# Markdown editor, style/CSS lost with upgrade

**URL:** <https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799>\
**Category:** Support\
**Created:** [6 October 2021 08:23 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799 "2021-10-06T08:23:20Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![penfold](https://avatars.discourse-cdn.com/v4/letter/p/bbe5ce/32.png) [@penfold](https://discourse.joplinapp.org/u/penfold)\
**Post date:** [6 October 2021 08:23 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/1 "2021-10-06T08:23:20Z")

</div>

Hi,  
I am using Joplin 2.4.8 now on Ubuntu 20.04.

I recently updated Joplin from an older version (don't exactly know which one, some version from 2020 for sure..).  
After the upgrade the markdown editor lost its styling and it's driving me crazy, since I can't fix it.

I understand there is a userstyles.css and a userchrome.css, and styles for the markdown editor go in the userchrome.css.  
I've tried various themes from here: [GitHub - kot-behemoth/awesome-joplin: 📒 A curated list of awesome Joplin themes and tools.](https://github.com/kot-behemoth/awesome-joplin#themes-userstylecss-and-userchromecss) but none is helping.

I got some styles in the userchrome.css now from one of the templates which do apply:

```auto
:root {
  /*
  headers
    .cm-header-1,
    .cm-header-2,
    .cm-header-3,
    .cm-header-4,
    .cm-header-5,
    .cm-header-6
  */
  /* mauve */
  --color-headers: #eebaff;
  /*
  italics
    .cm-em,
  inline comments
    span.cm-comment,
  katex brackets
    .cm-bracket
  */
  /* glossy grape */
  --color-italics: #B18EB1;
  /*

```

But they do not affect the styling of lists. My lists are all white and nearly flat.  
**I need coloring on the different levels of lists and more padding.** I actually don't want to write it myself, there must be working templates that style the whole markdown editor experience, inluding lists and other stuff?

Please help, I can't use Joplin properly like this ! ☹

Thanks,  
penfold

---

<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:** [6 October 2021 09:35 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/2 "2021-10-06T09:35:48Z")

</div>

You can restore the old theme with this CSS from the CSS wiki post.

> [@Joplin Customization](https://discourse.joplinapp.org/t/joplin-customization/11195#restore-codemirror-light-theme-prior-to-v2-2):
>
> This page is a collection of CSS tweaks to customize Joplin (e.g. editor, rendering, ...) To discover CSS classes and types [refer to this comment](https://discourse.joplinapp.org/t/custom-stylesheets/384/36)Plain editor (no color, no font changes) userchrome.css Joplin version tested on: 1.1.4 div.CodeMirror-lines \* { font-size: inherit !important; color: black !important; font-weight: normal !important; text-decoration: none !important; } Example /ref dpoulton [comment](https://discourse.joplinapp.org/t/monospace-editor-font-size-is-no-longer-consistent/11174/6)Dark Theme Mermaid Flowchart (Flowchart only) usersty…

---

<div class="post-metadata">

**Author:** ![penfold](https://avatars.discourse-cdn.com/v4/letter/p/bbe5ce/32.png) [@penfold](https://discourse.joplinapp.org/u/penfold)\
**Post date:** [7 October 2021 08:57 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/3 "2021-10-07T08:57:19Z")

</div>

Hi,  
thanks for your reply!

I tried the styles in userchrome.css, they do not apply, everything is plain white with these.

Also they don't seem to deal with lists, I can't see something that might concern lists in the code.

The problems I'm looking for solutions for:

- Color of list items should vary on different levels

- Enhance the indent of list items

- I have not mentioned this before: The whole editor text is centered and not aligned to the left which i would prefer

Basically, I just want clearly structured lists back, because that is all I do all day in Joplin, note stuff in lists.

Thanks,  
Ben

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [7 October 2021 09:17 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/4 "2021-10-07T09:17:37Z")

</div>

> I tried the styles in userchrome.css, they do not apply,

Did you restart Joplin?

> The whole editor text is centered and not aligned to the left which i would prefer

> [@Please read this if you are wondering why there's now a margin on the note text](https://discourse.joplinapp.org/t/please-read-this-if-you-are-wondering-why-theres-now-a-margin-on-the-note-text/19585):
>
> The latest version of Joplin sets a maximum width for the note content in order [to improve readability](https://baymard.com/blog/line-length-readability). You can disable this by going into Configuration \> Appearance and set the width to "0".

---

<div class="post-metadata">

**Author:** ![penfold](https://avatars.discourse-cdn.com/v4/letter/p/bbe5ce/32.png) [@penfold](https://discourse.joplinapp.org/u/penfold)\
**Post date:** [10 October 2021 06:33 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/5 "2021-10-10T06:33:34Z")

</div>

Thank you for your reply!

I did restart Joplin, yes.  
Thanks for your reply concerning the margin / the editor text being centered. That is solved for my.

Still I need solutions for the issues:

- Color of list items should vary on different levels
- Enhance the indent of list items

As far as I can see, the post, Daeraxa refers to does not deal with list (items), or am I wrong? It's this CSS code:

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

div.CodeMirror.cm-s-default span.cm-keyword {color: #708;}
div.CodeMirror.cm-s-default span.cm-atom {color: #219;}
div.CodeMirror.cm-s-default span.cm-number {color: #164;}
div.CodeMirror.cm-s-default span.cm-def {color: #00f;}
div.CodeMirror.cm-s-default span.cm-variable,
div.CodeMirror.cm-s-default span.cm-punctuation,
div.CodeMirror.cm-s-default span.cm-property,
div.CodeMirror.cm-s-default span.cm-operator {}
div.CodeMirror.cm-s-default span.cm-variable-2 {color: #05a;}
div.CodeMirror.cm-s-default span.cm-variable-3, div.CodeMirror.cm-s-default span.cm-type {color: #085;}
div.CodeMirror.cm-s-default span.cm-comment {color: #a50;}
div.CodeMirror.cm-s-default span.cm-string {color: #a11;}
div.CodeMirror.cm-s-default span.cm-string-2 {color: #f50;}
div.CodeMirror.cm-s-default span.cm-meta {color: #555;}
div.CodeMirror.cm-s-default span.cm-qualifier {color: #555;}
div.CodeMirror.cm-s-default span.cm-builtin {color: #30a;}
div.CodeMirror.cm-s-default span.cm-bracket {color: #997;}
div.CodeMirror.cm-s-default span.cm-tag {color: #170;}
div.CodeMirror.cm-s-default span.cm-attribute {color: #00c;}
div.CodeMirror.cm-s-default span.cm-hr {color: #999;}
div.CodeMirror.cm-s-default span.cm-link {color: #00c;}

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

```

Thanks for your help!

---

<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:** [10 October 2021 21:34 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/6 "2021-10-10T21:34:40Z")

</div>

> [@penfold](#):
>
> Still I need solutions for the issues:
> 
> - Color of list items should vary on different levels

The CSS I linked does this, or am I missing something here? Do you have other CSS overriding it?  
 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/6/67e70b048fd1042439598b494a7b30df3ed0176b.png)

For reference those list items are:

```auto
.cm-keyword 
.cm-variable-2
.cm-variable-3

```

---

<div class="post-metadata">

**Author:** ![penfold](https://avatars.discourse-cdn.com/v4/letter/p/bbe5ce/32.png) [@penfold](https://discourse.joplinapp.org/u/penfold)\
**Post date:** [12 October 2021 20:06 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/7 "2021-10-12T20:06:47Z")

</div>

Thanks for your help, Daeraxa!

I found the problem: Dark theme. I got the [CSS you linked](https://discourse.joplinapp.org/t/joplin-customization/11195#restore-codemirror-light-theme-prior-to-v22-7) working in light theme (as it states in the headline mentioned in the link).  
When I switch back to dark mode, my text is all white (on black background) again. How can I get it working for dark theme? I don't get why it's not working for dark mode, is it other CSS classes then?

Also, do you know how I can change list item indent?

Thanks!

---

<div class="post-metadata">

**Author:** ![penfold](https://avatars.discourse-cdn.com/v4/letter/p/bbe5ce/32.png) [@penfold](https://discourse.joplinapp.org/u/penfold)\
**Post date:** [12 October 2021 20:24 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/8 "2021-10-12T20:24:04Z")

</div>

Ok, I inspected the CSS in Dark theme and it works if I replace "div.CodeMirror.cm-s-default" with " **div.CodeMirror.cm-s-material-darker**"!  
But do I really have to set this up manually now? Is there not various dark theme styles I can chose from?! I'm confused!  
How come the Dark themes here don't work? [GitHub - kot-behemoth/awesome-joplin: 📒 A curated list of awesome Joplin themes and tools.](https://github.com/kot-behemoth/awesome-joplin#themes-userstylecss-and-userchromecss)

Did the editor change? And if so, is there not maybe a list of new compatible themes?

---

<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:** [13 October 2021 08:39 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/9 "2021-10-13T08:39:53Z")

</div>

There have been a couple of changes (I think both in 2020 but I only started using Joplin seriously in late 2020). One was a UI/design refresh and the other was changing the older Ace editor to the current Codemirror editor so I guess this will have broken quite a lot of the older themes.

You might want to have a look at the newer posts in [Share your CSS](https://discourse.joplinapp.org/t/share-your-css/1730) and see if there is anything there.

There was also a [change](https://discourse.joplinapp.org/t/rfc-update-markdown-editor-css-to-make-it-match-loaded-theme/18601) (and a [lengthy discussion](https://discourse.joplinapp.org/t/talking-about-markdowns-codemirror-theme-update/19443)) about the changes that were made to the syntax highlighting on the markdown editor. The changes were made for themeing consistancy but there are others (like me) who subscribe more to the "markdown is code" metaphor where I prefer to have the syntax highlighting etc. albeit with the "hybrid" approach of dynamic text sizing for headers etc.

---

<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:** [12 November 2021 08:40 UTC](https://discourse.joplinapp.org/t/markdown-editor-style-css-lost-with-upgrade/20799/10 "2021-11-12T08:40:45Z")

</div>

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