question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[theme] allow variables in the color theme definition file

See original GitHub issue

Support 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:open
  • Created 3 years ago
  • Reactions:3
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
aeschlicommented, Aug 24, 2020

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 and editor.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:

	"colorPalette": {
		"color1": "#fa0000"
	}
	"colors": {
		"activityBar.foreground": "$color1"
	},
	"tokenColors": [	
		{
			"name": "Variable",
			"scope": [
				"variable",
				"meta.definition.variable.name",
				"support.variable"
			],
			"settings": {
				"foreground": "$color1"
			}
		}
	]
1reaction
iDad5commented, Sep 15, 2022

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…)

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found