Allow CSS variables in themes

[silverwind]

It would be awesome if Monaco would allow any valid CSS value to be used for theme colors:

monaco.editor.defineTheme('mytheme', {
  colors: {
    'editor.background': 'var(--color-code-bg)',
  }
}

This currently fails the validation with this error:

Error: Illegal value for token color: var(--color-code-bg)

[alexdima]

This would be nice, but problematic to implement because we render also the minimap based on those colors and in the minimap we use a <canvas> element, where AFAIK we need to have the real color available in JS such that we can set the colors of the pixels.

[silverwind]

You could get the resolved color via getComputedStyle:

window.getComputedStyle(document.documentElement).getPropertyValue('--varname').trim()

I think this method would only work for variables defined on CSS :root which is a pretty common practice but it's certainly possible for variables to appear on other selectors too. I guess it would have to be documented that CSS variables are only supported when defined on :root.

[limitedmage]

This feature would make maintaining our themes much easier as we could handle the colors in one place, instead of duplicating colors between CSS and the Monaco config. In our project we don't really use the minimap and don't care about it.

[joemaffei]

@silverwind

I think this method would only work for variables defined on CSS :root

You can get the computed style at the editor level. CSS variables cascade down no matter where they are declared.

const monacoRoot = document.querySelector('.monaco-editor');
const varnameValue = getComputedStyle(monacoRoot).getPropertyValue('--varname');

[yuval-hazaz]

+1 for that.
It would be very helpful to be able to manage all colors from one place

[hediet]

We closed this issue because we don't plan to address it in the foreseeable future. If you disagree and feel that this issue is crucial: we are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding, and happy coding!