Support CSS Variables

[OskarGroth]

Reposting this as an issue from another discussion around dark mode here:
#33

Shiki claims to support css-variables via a hack workaround using a special theme and last-second remap of colors. I see several issues with this approach:

• No clear API, functionality is triggered by a theme name ('css-variables')
• Limited to only 12 colors
• No control over color names. I'm forced to use colors like shiki-token-punctuation for something semantically different to make use of all 12 colors.
• The current COLOR_REPLACEMENT map contains errors, there is no entry for 000003:

  shiki/packages/shiki/src/highlighter.ts

  Line 69 in 4478d64

  '#000002': 'var(--shiki-color-background)',

  Which leaves only 11 working colors.

Instead of the hacky and limited css-variables theme, why not just enable the user to supply their own color remap here:

shiki/packages/shiki/src/highlighter.ts

Line 67 in 4478d64

const COLOR_REPLACEMENTS: Record<string, string> = {

And instead of the name check here:

shiki/packages/shiki/src/highlighter.ts

Line 99 in 4478d64

if (_theme.name === 'css-variables') {

...add some new option on ShikiTheme like cssVariables: boolean? Or extend type to be light | dark | css, and trigger the remap based on that?

Seems to me that by doing this it would unlock full theming via CSS Variables and resolve all dark-mode issues, including my problems listed above. Users would be able to swap out any colors they'd like for a CSS variable instead.

[OskarGroth]

Submitted my changes in #314. This is working perfect for my needs, I can now create a theme that is completely controlled by CSS, making it super easy to support Dark Mode. Would love to see this merged so let me know your feedback.