Skip to content

Prototype of getting active vscode theme in the extension #772

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

vezwork
Copy link
Collaborator

@vezwork vezwork commented Jul 25, 2025

The problem

As reported in #525, the visual editor does not use code highlighting colors from the user's vscode color theme.

The extension does get some colors from the theme, but it does not get any code highlighting related colors. I believe the extension includes its own code highlighting color themes for each of the default vscode themes. If the user is using a built-in vscode theme (e.g. Monokai, Solarized, etc.) then the extension is able to guess that and select a matching theme definition from its own list. However, if the user is not using a built-in vscode theme, the extension somehow picks one of the built-in themes to use as the code highlighting theme, which is not great.

You can see this maybe most glaringly with a monochrome theme from the extension store:

Source Editor with Monochromatic theme Visual Editor with same Monochromatic theme
Screenshot 2025-07-25 at 11 24 15 AM Screenshot 2025-07-25 at 11 23 32 AM

Can we get the user's theme colors?

Yes, to some extent at least. See the discussion on the vscode repo here.

This PR so far gives a prototype of getting and logging code highlighting theme data from the user's vscode theme. Here's an example of what we can get:

Here's an example of the data that is logged in this PR
'[["comment",[["foreground","#6a737d"]]],["punctuation.definition.comment",[["foreground","#6a737d"]]],["string.comment",[["foreground","#6a737d"]]],["constant",[["foreground","#005cc5"]]],["entity.name.constant",[["foreground","#005cc5"]]],["variable.other.constant",[["foreground","#005cc5"]]],["variable.language",[["foreground","#005cc5"]]],["keyword.operator.symbole",[["foreground","#000000"]]],["keyword.other.mark",[["foreground","#000000"]]],["entity",[["foreground","#6f42c1"]]],["entity.name",[["foreground","#6f42c1"]]],["variable.parameter.function",[["foreground","#000000"]]],["entity.name.tag",[["foreground","#22863a"]]],["keyword",[["foreground","#d73a49"]]],["storage",[["foreground","#d73a49"]]],["storage.type",[["foreground","#d73a49"]]],["storage.modifier.package",[["foreground","#000000"]]],["storage.modifier.import",[["foreground","#000000"]]],["storage.type.java",[["foreground","#000000"]]],["string",[["foreground","#032f62"]]],["punctuation.definition.string",[["foreground","#032f62"]]],["string punctuation.section.embedded source",[["foreground","#032f62"]]],["string.unquoted.import.ada",[]],["support",[["foreground","#005cc5"]]],["meta.property-name",[["foreground","#005cc5"]]],["variable",[["foreground","#e36209"]]],["variable.other",[["foreground","#000000"]]],["invalid.broken",[["fontStyle","bold italic underline"],["foreground","#b31d28"]]],["invalid.deprecated",[["fontStyle","bold italic underline"],["foreground","#b31d28"]]],["invalid.illegal",[["fontStyle","italic underline"],["foreground","#b31d28"]]],["carriage-return",[["fontStyle","italic underline"],["foreground","#d73a49"]]],["invalid.unimplemented",[["fontStyle","bold italic underline"],["foreground","#b31d28"]]],["message.error",[["foreground","#b31d28"]]],["string source",[["foreground","#000000"]]],["string variable",[["foreground","#005cc5"]]],["source.regexp",[["foreground","#032f62"]]],["string.regexp",[["foreground","#032f62"]]],["string.regexp.character-class",[["foreground","#032f62"]]],["string.regexp constant.character.escape",[["fontStyle","bold"],["foreground","#22863a"]]],["string.regexp source.ruby.embedded",[["foreground","#032f62"]]],["string.regexp string.regexp.arbitrary-repitition",[["foreground","#032f62"]]],["support.constant",[["foreground","#005cc5"]]],["support.variable",[["foreground","#005cc5"]]],["meta.module-reference",[["foreground","#005cc5"]]],["markup.list",[["foreground","#735c0f"]]],["markup.heading",[["fontStyle","bold"],["foreground","#005cc5"]]],["markup.heading entity.name",[["fontStyle","bold"],["foreground","#005cc5"]]],["markup.quote",[["foreground","#22863a"]]],["markup.italic",[["fontStyle","italic"],["foreground","#000000"]]],["markup.bold",[["fontStyle","bold"],["foreground","#000000"]]],["markup.raw",[["foreground","#005cc5"]]],["markup.deleted",[["foreground","#b31d28"]]],["meta.diff.header.from-file",[["foreground","#b31d28"]]],["punctuation.definition.deleted",[["foreground","#b31d28"]]],["markup.inserted",[["foreground","#22863a"]]],["meta.diff.header.to-file",[["foreground","#22863a"]]],["punctuation.definition.inserted",[["foreground","#22863a"]]],["markup.changed",[["foreground","#e36209"]]],["punctuation.definition.changed",[["foreground","#e36209"]]],["markup.ignored",[["foreground","#005cc5"]]],["markup.untracked",[["foreground","#005cc5"]]],["meta.diff.range",[["foreground","#6f42c1"],["fontStyle","bold"]]],["meta.diff.header",[["foreground","#005cc5"]]],["meta.separator",[["fontStyle","bold"],["foreground","#005cc5"]]],["meta.output",[["foreground","#005cc5"]]],["brackethighlighter.tag",[["foreground","#586069"]]],["brackethighlighter.curly",[["foreground","#586069"]]],["brackethighlighter.round",[["foreground","#586069"]]],["brackethighlighter.square",[["foreground","#586069"]]],["brackethighlighter.angle",[["foreground","#586069"]]],["brackethighlighter.quote",[["foreground","#586069"]]],["brackethighlighter.unmatched",[["foreground","#b31d28"]]],["sublimelinter.mark.error",[["foreground","#b31d28"]]],["sublimelinter.mark.warning",[["foreground","#e36209"]]],["sublimelinter.gutter-mark",[["foreground","#959da5"]]],["constant.other.reference.link",[["foreground","#032f62"],["fontStyle","underline"]]],["string.other.link",[["foreground","#032f62"],["fontStyle","underline"]]],["meta.function-call support.function",[["foreground","#005cc5"]]],["meta.function-call entity.name.function",[["foreground","#005cc5"]]],["keyword.operator",[["foreground","#000000"]]]]'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant