Make it easy to configure syntax highlighting theme?

[laike9m]

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:

Support more syntax highlighting theme natively

Currently there’s only one color theme for syntax highlighting. Though one could use some thiry-party libraries (e.g. GitHub - PiotrSss/logseq-clean-themes) to change it, the process is not as smooth. Thus I’m creating this feature request as it’s a common feature for notes taking apps.

[cannibalox]

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

[rob]

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

[rob]

Answering my own question: use this repo as a starting point. Instead of @importing https://cdn.jsdelivr.net/npm/codemirror-theme-vars/base.css in your CSS, you’ll need to copy and paste it by hand and then remove all instances of .cm-s-vars. Depending on your theme, you won’t place the color variables in :root either. For instance, in my fork of Logseq-dev-theme the CodeMirror syntax colors go in the light theme and dark theme files.