Codemirror vim mode search highlight

1

Hello, I wonder is there a way to change the highlight color for vim mode search highlight? I currently use manual inspection to change the color for this: .ͼi .cm-searchMatch.cm-searchMatch But manually changing it is too cumbersome. Is there a way to change it in css with tampermonkey. (the code mirror is embedded in Overleaf.com)

2

The classes with ͼ characters are not stable and you should definitely not use them in your CSS. To override that style, either use a CodeMirror theme, or target .cm-editor .cm-searchMatch. Is the duplicate class in your example just to add specificity? In principle, styles provided with <style> tags should automatically override CSS injected by CodeMirror, when they have the same specificity.

4

Thank you for your suggestion. I just need some tampermonkey script so that I can permanently change the theme of overleaf editor in vim-mode. I am not very familiar with css/html stuff so…

And I got it working:

// ==UserScript==
// @name         Overleaf vim search highlight
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Override CSS on a specific website
// @author       Your Name
// @match        https://www.overleaf.com/project/*
// @grant        window.onurlchange
// ==/UserScript==

(function() {
    'use strict';
    console.log('Tampermonkey script is running');
    // Your custom CSS
    var customCSS = `
        .cm-editor .cm-searchMatch,
        .cm-editor .cm-selectionMatch {
            background: rgba(187, 212, 251, 0.9) !important;
            outline: 1px solid rgb(187, 212, 251) !important;
            margin: 0 !important;
        }
        /* Add more CSS rules here */
    `;

    // Create a style element
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(customCSS));

    // Append the style element to the head
    document.head.appendChild(style);
})();