Illegal Color Name

[philcockfield]

Hey thanks @brijeshb42 for making these themes. This is so jolly helpful!

---

I'm trying to get this working using the "Directly with Webpack" approach:

   const monokai = require('monaco-themes/themes/Monokai.json');

    monaco.editor.defineTheme('monokai', monokai);
    monaco.editor.setTheme('monokai');

and I'm getting an error.

Looks like it's bawking at the hex color values. Any ideas on what I might be doing wrong here? Thanks!

[brijeshb42]

Seems to be working fine for me with webpack locally and also on the https://bitwiser.in/monaco-themes/ demo page

What version of monaco are you using?

[philcockfield]

Ah, I'll check out the version - could well be that! Thanks for confirming what I'm doing should work @brijeshb42.

And thanks again for these themes. Not having monokai makes me 😞 .... 😃

[gunn]

Fails for me as well with monaco 0.13.1 and 0.14.2.

I can fix this by: Removing all the #s from the colors except the ones in the colors object. And making sure colors are 6 characters, not 8. I.e. ff6600ff -> ff6600

This also matches what we see in monaco's doumentation - https://github.com/Microsoft/monaco-editor/blob/088301bfb99/website/playground/new-samples/customizing-the-appearence/tokens-and-colors/sample.js#L17

[brijeshb42]

I don't think # and 8 digit hex codes are the issue. I can see that in vs/editor/common/modes/supports/tokenization.ts the regex that is being used to parse hex colors gives the base 6 digit hex code and alpha code which is then used in the editor. I have setup another project @ https://editor-a5ea1.firebaseapp.com/ using webpack with themes as a dependency. But that is also working without any errors.

Can you guys tell me which language are you using in the editor when this error comes up? Maybe that can help me in identifying the bug.

Meanwhile, I have published a beta version which has only 6 char hex code and no #. Can you try to install that using npm install monaco-themes@beta and see if the error comes or not?

[philcockfield]

I'm on version 0.14.1 of monaco-editor via react-monaco-editor

I'm setting the custom theme in the didMount callback handler

        <MonacoEditor
         ...
          editorDidMount={this.handleAfterMount}
        />

which is where other config manipulation at setup is going:

    private handleAfterMounted = (
      editor: ICodeEditor,
    ) => {

      // Configure Monokai theme.
      // https://github.com/brijeshb42/monaco-themes
      monaco.editor.defineTheme(
        'monokai',
        monokai as monaco.editor.IStandaloneThemeData,
      );
      monaco.editor.setTheme('monokai');
    };

Examples in Typescript.

Thanks @brijeshb42

[philcockfield]

Just checked - your definition for monokai in monaco-themes@beta is working for me @brijeshb42

Thanks.

[brijeshb42]

Published the beta to stable