CODEWITHSUNDEEP
javascriptcodemirror
user1159517
user1159517

Reputation: 6320

How can I change the color of selected text?

I need to change the background color of the selected text using codemirror. Can anyone help?

Upvotes: 9

Views: 7948

Answers (7)

Gillespie
Gillespie

Reputation: 6561

If you have a CodeMirror 6 theme, you can update the selection color with:

const selection = "#ffffff"; // <-- Selection color here

const myTheme = EditorView.theme({
    //...
    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
        { backgroundColor: selection },
    //...
}

Sample theme: https://github.com/codemirror/theme-one-dark (see: one-dark.ts in that repo)

Upvotes: 0

Jo Liss
Jo Liss

Reputation: 32955

In CodeMirror 6, use this to change the selection color:

.cm-selectionBackground,
.cm-editor ::selection {
  background-color: #ccc !important;
}

The .cm-selectionBackground selector is used when you use the drawSelection() extension, which is part of the basicSetup set that the documentation recommends.

The .cm-editor ::selection selector is used to style the browser-native selection, in case you don't use drawSelection().

To reset it to the browser's default, rather than drawSelection's own choice of color, use this:

.cm-selectionBackground {
  background-color: highlight !important;
}

Upvotes: 1

kofifus
kofifus

Reputation: 19295

Don't forget the essential !important. You need:

.CodeMirror-selected {background-color: #CCCCCC !important;}

If you need to also change the selection foreground color, CodeMirror has the mark-selection.js addon to achieve that.

Upvotes: 15

Rohit
Rohit

Reputation: 6613

You need to import mark-selection add on and set the custom background-color.

  1. import 'codemirror/addon/selection/mark-selection';
  2. In case you need to reset the background color to default browser behavior then add this to your style background-color: highlight;

Upvotes: 2

Matt Andrzejczuk
Matt Andrzejczuk

Reputation: 2066

I was able to solve this by overriding the highlight color specific to the CodeMirror theme:

/** OVERRIDE SELECTED TEXT HIGHLIGHT COLOR FOR THEMES: **/

    /* isotope theme */
    .cm-s-isotope div.CodeMirror-selected {
        background: #0004FF !important;
    }
    /* colorforth theme */
    .cm-s-colorforth div.CodeMirror-selected {
        background: #0004FF !important;
    }
    /* 3024-night theme */
    .cm-s-3024-night div.CodeMirror-selected {
        background: #0004FF !important;
    }

/** - - - - - **/

This solution applies to the AngularJS version of CodeMirror.

Upvotes: 4

aljordan82
aljordan82

Reputation: 1720

Change the background color for .CodeMirror-selected {} , the class is located in codemirror.css

.CodeMirror-selected {background:#CCCCCC;}

Upvotes: 9

rationalboss
rationalboss

Reputation: 5389

I believe this is a CSS concern. Please refer to the following article:

Overriding the Default Text Selection Color with CSS

Upvotes: -2

Related Questions