[theme] allow variables in the color theme definition file
See original GitHub issueSupport of using already defined colors in a theme’s theming rule will make themes a much more pleasant and easier experience in my opinion, instead of having a bunch of hexes all over the place or having to change all the occurrences when changing a widely used color.
Example:
{
"$schema": "vscode://schemas/color-theme",
"colors": {
"editor.foreground": "#FFFFFF"
},
"tokenColors": [
{
"name": "Variable",
"scope": [
"variable",
"meta.definition.variable.name",
"support.variable"
],
"settings": {
"foreground": "#FFFFFF"
}
}
]
}
Can be achieved using:
{
"$schema": "vscode://schemas/color-theme",
"colors": {
"editor.foreground": "#FFFFFF"
},
"tokenColors": [
{
"name": "Variable",
"scope": [
"variable",
"meta.definition.variable.name",
"support.variable"
],
"settings": {
"foreground": {
"$color": "editor.foreground"
}
}
}
]
}
Syntax for this feature is up for discussion, Can work on a PR for this if its relevant.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:9 (5 by maintainers)
Top Results From Across the Web
How to create better themes with CSS variables
CSS variables let you define values for reuse throughout a CSS file ... brand colors, but special event pages have a different color...
Read more >Theming Bootstrap
All colors available in Bootstrap 4, are available as Sass variables and a Sass map in our scss/_variables.scss file. This will be expanded...
Read more >4. Create Variations | Weebly Cloud Developer Documentation
Variations allow you to control certain color aspects of a theme. The Base theme has a light and a dark variation. The light...
Read more >Managing your CSS (GSS) files with variables and a theme
One of the best examples of variable use in CSS is probably color management. If your application has a default blue color, let's...
Read more >Theme variables - Publii
How to define theme variables? ... Create in your theme file called theme-variables.js and then put in this file function which will return...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Your request is kind of similar to https://github.com/microsoft/vscode/issues/56855. It asks for color variables but for the color configurations in the user settings. (
workbench.colorCustomizations
,editor.colorCustomizations
andeditor.semanticTokenColorCustomizations
),One can think of a solution that works for themes and settings, e.g. like in the snippet below, I’m a bit afraid that things get quite complex. So I wouldn’t mind looking at a solution just for the color theme file, as you propose. If you have interest to look at it, I’d be open for a PR. But we first would need to agree on the syntax.
Here’s a attempt based on the proposals from https://github.com/microsoft/vscode/issues/56855:
I would propose to call it ColorPaletteParser then, if that is ok, as I would like to see (at some point) the option to define colors not only in rgb-hash notation but also in hsl wich is much more intuitive for use in color-themes.
Provided that we are using json the $variable variant would be for me the way to go then. “colorPalette” as the property key is ok?
(Currently I’m testing out which way I would like to set up my environment for that development, so it’ll take a little while before I actually will be starting programming…)