Make it easy to configure syntax highlighting theme?

While using logseq, I always wonder if I can use another code highlighting theme. Note that this is different from choosing a logseq theme, which customize more things.

Digging a bit deeper, here’s what I found

  1. Logseq is using CodeMirror, so I should be able to using CodeMirror themes

  2. Logseq includes two CodeMirror themes, default and solarized

  3. CodeMirror uses different class selector for different themes, for example .cm-s-material-palenight in the material-palenight theme.

    .cm-s-material-palenight .cm-keyword {
        color: #C792EA;
    }
    
  4. Because of 3, simply @import url("path_to_theme_css") in custom.css won’t work.

  5. I checked how some logseq themes do it. For example, in logseq-laurel-theme, it modifies the original css. Replacing the more specific class selector with [class*="cm-s-"] to make it function.

    [class*="cm-s-"] .cm-meta {
        color: #ffcb6b;
    }
    

In short, using a different codemirror theme requires copy/paste css, and modify them, which is not ideal.

If you know a better way, please let me know.

I once created a feature request but got no response:

1 Like

you can swap codemirror themes and options in logseq 0.5.8, refer to the config settings at the bottom of this thread Feature: add codemirror options by andelf · Pull Request #3699 · logseq/logseq · GitHub

1 Like

Is it possible to use different themes in light mode and dark mode?

1 Like