Search code examples
monaco-editor

Remove line selection border

I need to remove this selection border from a project I'm working on and I've tried all different options from the API to no avail. Inspecting the CSS didn't helped either. How to I remove/edit it?

enter image description here

Solution

  • You have to set the color for the line highlight in your theme settings of the editor. The specific value is editor.lineHighlightBorder (see also the vscode theme colors page). Example code:

    monaco.editor.defineTheme('myTheme', {
    base: 'vs',
    inherit: true,
    rules: [{ background: 'EDF9FA' }],
    colors: {
        'editor.lineHighlightBackground': '#00000000',
        'editor.lineHighlightBorder': '#00000000'
    }
});

    Note: the background must be transparent for the border to show up at all. So, alternatively, you can also set the main background color as the highlight background color to make the border disappear.

    Play with the code in the Monaco Editor playground to see the various effects.