Userchrome.css change codeblock color - not working

Support
1

I would like to change some colors within the markdown editor.

When I debug it via development tool, I get:

.cm-s-material-darker span.cm-comment {
    color: darkviolet !important;
}

I also tried (often used in the forum):

span.cm-comment {
    color: darkviolet !important;
}

Here I found this (How to change CSS style for inline code block? - #4 by bela53):

.cm-s-material-darker .cm-comment  {
  color: greenyellow !important;
}

Unfortunately nothing works.
I am using Joplin 2.0.11 (prod, linux)

What am I doing wrong?

Btw: changing header color works like a charm:

span.cm-header {
    color: #00CCFF;
    font-size: inherit !important;
    }
2

@phqzgunsfjror I've just tested on my computer with

.cm-comment {
color: yellow !important;
}

And it works perfectly. Is it possible that you have made a typo or something? Do you have any plugins installed?

3

Thanks for the reply.

I copy/pasted yours in my Userchrome.css, saved the file and restarted Joplin.
Codeblocks are still light grey.
I have no plugins installed.
I use OLED theme but in other themes it does not work either...

4

I think this occurs because the dark theme stylesheet within Joplin itself uses !important so your css will not over-ride it. Another user suffered this and that time I found that using a more specific css element can over-ride an earlier !important statement.

pre.CodeMirror-line span[role="presentation"] span.cm-comment {
	/* code text - dark theme override*/
	 color: red !important;
}
2 Likes
5

Thank you so much!

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.