# Dark theme syntax highlighting

**URL:** <https://discourse.joplinapp.org/t/dark-theme-syntax-highlighting/21049>\
**Category:** Support\
**Created:** [16 October 2021 14:49 UTC](https://discourse.joplinapp.org/t/dark-theme-syntax-highlighting/21049 "2021-10-16T14:49:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dalto](https://avatars.discourse-cdn.com/v4/letter/d/8e7dd6/32.png) [@dalto](https://discourse.joplinapp.org/u/dalto)\
**Post date:** [16 October 2021 14:49 UTC](https://discourse.joplinapp.org/t/dark-theme-syntax-highlighting/21049/1 "2021-10-16T14:49:35Z")

</div>

After upgrading to version 2.4.9 the color highlighting for bulleted lists is no longer available.

Is there a way to restore those without a working knowledge of CSS?

I am not change averse but I use my notes when I am speaking and the color changes allow me to present smoothly without losing my place. Without the colors, it is just a big blob of text.

I tried grabbing the CSS from the wiki post but that is for the light theme and uses colors that are not readable on a dark theme.

---

<div class="post-metadata">

**Author:** ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)\
**Post date:** [16 October 2021 14:54 UTC](https://discourse.joplinapp.org/t/dark-theme-syntax-highlighting/21049/2 "2021-10-16T14:54:02Z")

</div>

Have a look at this post in this topic: [Markdown editor, style/CSS lost with upgrade - #8 by penfold](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/8)

---

<div class="post-metadata">

**Author:** ![dalto](https://avatars.discourse-cdn.com/v4/letter/d/8e7dd6/32.png) [@dalto](https://discourse.joplinapp.org/u/dalto)\
**Post date:** [16 October 2021 14:59 UTC](https://discourse.joplinapp.org/t/dark-theme-syntax-highlighting/21049/3 "2021-10-16T14:59:29Z")

</div>

I tried that before posting but the results are what I described above. You get a dark theme with many of the colors from the light theme which isn't readable. Shades of blue, purple and green. The green is jarring but readable. However, all the blues and purple-ish colors do not have enough contrast to be readable on a dark theme.

---

<div class="post-metadata">

**Author:** ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)\
**Post date:** [16 October 2021 17:13 UTC](https://discourse.joplinapp.org/t/dark-theme-syntax-highlighting/21049/4 "2021-10-16T17:13:46Z")

</div>

Try the following. There might be some incorrect stuff but this is what I got for a 5 min comparison from the old dark theme.

```css
div.CodeMirror.cm-s-material-darker span.cm-header {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-quote {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-negative {color: #d44;}
div.CodeMirror.cm-s-material-darker span.cm-positive {color: #292;}
div.CodeMirror.cm-s-material-darker span.cm-header, span.cm-strong {font-weight: bold;}
div.CodeMirror.cm-s-material-darker span.cm-em {font-style: italic;}
div.CodeMirror.cm-s-material-darker span.cm-link {text-decoration: underline;}
div.CodeMirror.cm-s-material-darker span.cm-strikethrough {text-decoration: line-through;}

div.CodeMirror.cm-s-material-darker span.cm-keyword {color: #c792ea;}
div.CodeMirror.cm-s-material-darker span.cm-atom {color: #f78c6c;}
div.CodeMirror.cm-s-material-darker span.cm-number {color: #ff5370;}
div.CodeMirror.cm-s-material-darker span.cm-def {color: #00f;}
div.CodeMirror.cm-s-material-darker span.cm-variable,
div.CodeMirror.cm-s-material-darker span.cm-punctuation,
div.CodeMirror.cm-s-material-darker span.cm-property,
div.CodeMirror.cm-s-material-darker span.cm-operator {}
div.CodeMirror.cm-s-material-darker span.cm-variable-2 {color: #eeffff;}
div.CodeMirror.cm-s-material-darker span.cm-variable-3, div.CodeMirror.cm-s-material-darker span.cm-type {color: #decb6b;}
div.CodeMirror.cm-s-material-darker span.cm-comment {color: #878787;}
div.CodeMirror.cm-s-material-darker span.cm-string {color: #c3e88d;}
div.CodeMirror.cm-s-material-darker span.cm-string-2 {color: #f50;}
div.CodeMirror.cm-s-material-darker span.cm-meta {color: #ffcb6b;}
div.CodeMirror.cm-s-material-darker span.cm-property {color: #decb6b;}
div.CodeMirror.cm-s-material-darker span.cm-qualifier {color: #555;}
div.CodeMirror.cm-s-material-darker span.cm-builtin {color: #30a;}
div.CodeMirror.cm-s-material-darker span.cm-bracket {color: #ff5370;}
div.CodeMirror.cm-s-material-darker span.cm-tag {color: #ff5370;}
div.CodeMirror.cm-s-material-darker span.cm-attribute {color: #00c;}
div.CodeMirror.cm-s-material-darker span.cm-hr {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-link {color: #c3e88d;}
div.CodeMirror.cm-s-material-darker span.cm-link-text {color: #dddddd;}
div.CodeMirror.cm-s-material-darker span.cm-operator {color: #89ddff;}

div.CodeMirror.cm-s-material-darker span.cm-error {color: #dddddd;}
span.cm-invalidchar {color: #f00;}

```

---

<div class="post-metadata">

**Author:** ![dalto](https://avatars.discourse-cdn.com/v4/letter/d/8e7dd6/32.png) [@dalto](https://discourse.joplinapp.org/u/dalto)\
**Post date:** [16 October 2021 17:27 UTC](https://discourse.joplinapp.org/t/dark-theme-syntax-highlighting/21049/5 "2021-10-16T17:27:08Z")

</div>

Thank you very much!

That definitely does what I need it to.

---

<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:** [15 November 2021 17:27 UTC](https://discourse.joplinapp.org/t/dark-theme-syntax-highlighting/21049/6 "2021-11-15T17:27:37Z")

</div>

Closed on 15 November 2021 17:27 UTC

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