microsoft / microsoft/vscode-textmate

Allow CSS variables in parseTheme()

Open
#154 1 comment 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
678
Forks
135
Avg merge
1d 14h
Merged PRs (30d)
2

Description

You can see the validation of colors as hex values here, where non-hex values are ignored: https://github.com/microsoft/vscode-textmate/blob/main/src/theme.ts#L126-L134

We are trying to add CSS variable support to Shiki: https://github.com/shikijs/shiki/pull/212
Using a theme that uses CSS variables instead of hex values: https://github.com/shikijs/shiki/issues/33#issuecomment-905953016
But this issue is blocking this solution, and the end result is a color map of only #000000 and #FFFFFF.

Would you consider relaxing this check to support var(--xxxxxxxxx) as well? I'm sure this won't have much use inside of the VSCode editor, but it would have some important usage in the larger web ecosystem.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in src/theme.ts at the color validation around lines 126-134 and trace how parseTheme() handles non-hex values. Done means CSS values such as var(--xxxxxxxxx) are accepted instead of ignored, so themes using CSS variables retain their intended color mappings.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
tooling
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.