Background color of user-selected text.

v6
1

In the attached image the word “which” in the line “from the macroscopic …” has been selected by the user but it is not visible in the active line. Below is the theme I am using.

Thanks!

image
image1054×228 38.3 KB

let myTheme = EditorView.theme({

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

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

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

        backgroundColor: "#a6a"
    },

    // From Marijn Haverbeke:
    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground" : {
        backgroundColor: "#5555ff",
        color: "#fff"
    },


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

}, {dark: true})
2

You’ll want to use transparent colors for text background styles. The selection (and other layers) are rendered behind the text, so if you give that an opaque background, you hide anything behind it.