Allow CSS variables in themes

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)

[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