# Userchrome.css change codeblock color - not working

**URL:** <https://discourse.joplinapp.org/t/userchrome-css-change-codeblock-color-not-working/18278>\
**Category:** Support\
**Created:** [27 June 2021 15:23 UTC](https://discourse.joplinapp.org/t/userchrome-css-change-codeblock-color-not-working/18278 "2021-06-27T15:23:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![phqzgunsfjror](https://avatars.discourse-cdn.com/v4/letter/p/ba8739/32.png) [@phqzgunsfjror](https://discourse.joplinapp.org/u/phqzgunsfjror)\
**Post date:** [27 June 2021 15:23 UTC](https://discourse.joplinapp.org/t/userchrome-css-change-codeblock-color-not-working/18278/1 "2021-06-27T15:23:33Z")

</div>

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

When I debug it via development tool, I get:

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

```

I also tried (often used in the forum):

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

```

Here I found this ([How to change CSS style for inline code block? - #4 by bela53](https://discourse.joplinapp.org/t/how-to-change-css-style-for-inline-code-block/11210/4)):

```auto
.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:

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

```

---

<div class="post-metadata">

**Author:** ![CalebJohn](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/calebjohn/32/356_2.png) [@CalebJohn](https://discourse.joplinapp.org/u/CalebJohn)\
**Post date:** [27 June 2021 16:14 UTC](https://discourse.joplinapp.org/t/userchrome-css-change-codeblock-color-not-working/18278/2 "2021-06-27T16:14:45Z")

</div>

@phqzgunsfjror I've just tested on my computer with

```css
.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?

---

<div class="post-metadata">

**Author:** ![phqzgunsfjror](https://avatars.discourse-cdn.com/v4/letter/p/ba8739/32.png) [@phqzgunsfjror](https://discourse.joplinapp.org/u/phqzgunsfjror)\
**Post date:** [28 June 2021 15:13 UTC](https://discourse.joplinapp.org/t/userchrome-css-change-codeblock-color-not-working/18278/3 "2021-06-28T15:13:09Z")

</div>

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...

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [28 June 2021 15:20 UTC](https://discourse.joplinapp.org/t/userchrome-css-change-codeblock-color-not-working/18278/4 "2021-06-28T15:20:46Z")

</div>

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.

> [@Share your CSS](https://discourse.joplinapp.org/t/share-your-css/1730/167):
>
> I read that a more specifically stated element can override a previous, but less specific, element's !important I tried the below and the code text changed to red in the dark theme. However you may want to give it a bit more testing to ensure it works in all situations. pre.CodeMirror-line span[role="presentation"] span.cm-comment { /\* code text - dark theme override\*/ color: red !important; }

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

```

---

<div class="post-metadata">

**Author:** ![phqzgunsfjror](https://avatars.discourse-cdn.com/v4/letter/p/ba8739/32.png) [@phqzgunsfjror](https://discourse.joplinapp.org/u/phqzgunsfjror)\
**Post date:** [28 June 2021 18:36 UTC](https://discourse.joplinapp.org/t/userchrome-css-change-codeblock-color-not-working/18278/5 "2021-06-28T18:36:27Z")

</div>

Thank you so much!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/1/c/1c948e33314e232a0927789508474d8624f4270b.png) [@system](https://discourse.joplinapp.org/u/system)\
**Post date:** [28 July 2021 18:36 UTC](https://discourse.joplinapp.org/t/userchrome-css-change-codeblock-color-not-working/18278/6 "2021-07-28T18:36:39Z")

</div>

Closed on 28 July 2021 18:36 UTC

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