How to change The minimap Background color in Monaco index.html

538 Views Asked by At

enter image description here

Since, i want it to be transparent this is what i have now, i have readed every topic or etc

 monaco.editor.defineTheme('TestMonaco', {
                    base: 'vs-dark',
                    inherit: true,
                    rules: [
                        { token: 'global', foreground: '4060FF', fontStyle: "bold" },
                        { token: 'keyword', foreground: '4060FF', fontStyle: "bold" },
                        { token: 'comment', foreground: '666666' },
                        { token: 'number', foreground: 'd4d4d4' },
                        { token: 'string', foreground: 'd4d4d4' },
                    ],
                                        colors: {
                    'editor.background': '#00000000',
                    'editorLineNumber.foreground': '#949494',
                    'minimap.background': 'd4d4d4',
                }
                });

I tried, every toppic answers and css and js edit the workers of the monaco

1

There are 1 best solutions below

4
On

This worked fine for me:

monaco.editor.defineTheme('TestMonaco', {
    base: 'vs-dark',
    inherit: true,
    rules: [{ background: '#0000FF' }], // This is needed
    colors: {
        'editor.background': '#000000',
    }
});

monaco.editor.setTheme('TestMonaco');

Make sure you remove 'minimap.background': 'd4d4d4' property and give the rules an object with a background property only don't give it a token, of course you can add it with other rules also.

Note: you can't make the background of minimap transparent, you can remove it if you wish