custom color themes?

[giladgray]

I'm interested in developing a custom coloring scheme for this editor. Not a language definition, jus the CSS styles to make languages look the way I like. I can't find any documentation on how to do this for the Monaco editor (found it for VSCode but I'm doubting .tmThemes are supported here).

It seems as though tokens are classed .token.{tokens...}.{language}, for instance .token.support.function.if.bat. My corresponding Atom theme already uses very similar classes. Is this an appropriate pattern to develop against?

[giladgray]

well now I've found this: https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-tokens-and-colors. looks like i was on the right track!

[alexdima]

@giladgray The vast majority of the tokens the tokenizers produce are found here -- https://github.com/Microsoft/monaco-languages/tree/master/src

An insane CSS file containing the default themes is found here -- https://github.com/Microsoft/vscode/blob/master/src/vs/editor/browser/standalone/media/standalone-tokens.css

Appologies for the insanity of the CSS file, it is quite a long story of how we ended up with this one :)... It involves shipping VSCode with half languages colorized using TM Grammars, half colorized using those tokenizers, thus half of those tokenizers got adjusted to emit TM style tokens, meanwhile the rest remained in a simple format that we used since more than 5 years.

I think at one point we should align all the tokenizers in monaco-languages with TextMate token names, but this is at this point a low priority item.

[JulCesWhat]

@giladgray It seems that the background option does not work in the monaco.editor.IStandaloneThemeData rules. I was wondering if you could give me any insight on why would this be happening. Thanks.

[e9gille]

I just hit the same issue with the background option and managed to trace it to generateTokensCSSForColorMap in vs/editor/common/modes/supports/tokenization.ts

It seems all colors (whether foreground or background) are all turned into classes that only define a color css property. Any plans on getting this fixed?

[alexdima]

There is an example of how to create a custom theme:

https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-tokens-and-colors

and here are the default editor themes: https://github.com/Microsoft/vscode/blob/93028e44ea7752bd53e2471051acbe6362e157e9/src/vs/editor/standalone/common/themes.ts#L13

[swashata]

I have a question regarding swashata/vscode-beautiful-ui#1 I have vscode theme defined with json. So all syntax highlighting of the tokens are already defined in the tokenColors hash, like

{
    "tokenColors": [
        {
            "settings": {
                "foreground": "#e7e2d0",
                "background": "#0f141a"
            }
        },
        {
            "name": "Comment",
            "scope": [
                "comment",
                "punctuation.definition.comment"
            ],
            "settings": {
                "fontStyle": "italic",
                "foreground": "#5d6874"
            }
        },
        {
            "name": "Variable",
            "scope": [
                "variable",
                "variable.other",
                "variable.name"
            ],
            "settings": {
                "foreground": "#e7e2d0"
            }
        },
        {
            "name": "Storage - modifier",
            "scope": [
                "storage.modifier"
            ],
            "settings": {
                "foreground": "#f07076"
            }
        },
    ]
}

Does all these scope has one-to-one mapping to the monaco editor rules. So that I can do something like

	rules: [
		{ token: 'variable.name', foreground: 'e7e2d0' },
		{ token: 'variable.other', foreground: 'e7e2d0' },
		{ token: 'storage.modifier', foreground: 'f07076' },
	]

The goal here is to replace ace editor with monaco editor of this site --> https://vscbui.rocks/

[brownbl1]

Is there a way to convert from .tmTheme to the json style expected here?

[Izhaki]

Same question as @swashata :

How do you port something like vscode/extensions/theme-solarized-light/themes/solarized-light-color-theme.json with its tokenColors to the IStandaloneThemeData API?

https://gitlab.com/snippets/1728446?

[locohost]

Yep, I'm trying to do this now myself. Is there a conversion guide anywhere detailing how to do this manually? Or a util that converts the VSCode themes so they will work in Monaco?There are soooooo many awesome VSCode themes. I'd love to use them in Monaco.

[alexdima]

There is unfortunately no other documentation except the one I have linked to in my previous comment -- #207 (comment)

The TM themes that are used in vscode cannot be easily/mechanically transformed to Monaco Editor themes because the Monaco Editor does not use TM grammars for tokenization.