CSS for current selection

v6
1

I would like to change the color of the mouse-selected text — the last paragraph in the image below. Attached is my current theme.

Thanks in advance!

image
image1196×540 72.1 KB

let myTheme = EditorView.theme({

    "&": {
        color: "#fff",
        backgroundColor: "#404060"
    },

    // Cursor color and width
    "&.cm-focused .cm-cursor": {
        borderLeftColor: "rgba(255, 155, 0, 0.6 )",  // "#ffa000",
        highlightColor: "#ff0000",
        borderLeftWidth: "8px"
    },

    // Color for text selected via CM SEARCH
    "&.cm-highlight": {

        backgroundColor: "#a6a"
    },

    ".cm-selectionBackground, ::selection": {
        backgroundColor: "#005",
        color: "#fff"
    },

    // define color of user-selected text
    "&.cm-focused .cm-selectionBackground, ::selection": {
        backgroundColor: "#00cab0",
        color: "#fff"
    },

     // ".cm-bracket": { backgroundColor: "#008c8c" },  // not working // "#f70a0a"

    // ACTIVE LINE
     ".cm-activeLine": { backgroundColor: "#008c8c"},
    

}, {dark: true})
2

To style the focused selection, you have to override "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground" (it is that complex to avoid nested editors getting the focus style from the outer editor).

3

Thank you very much!