# Editor color highlighting

**URL:** <https://discourse.joplinapp.org/t/editor-color-highlighting/23750>\
**Category:** Support\
**Created:** [15 February 2022 14:38 UTC](https://discourse.joplinapp.org/t/editor-color-highlighting/23750 "2022-02-15T14:38:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![awefaerg](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@awefaerg](https://discourse.joplinapp.org/u/awefaerg)\
**Post date:** [15 February 2022 14:38 UTC](https://discourse.joplinapp.org/t/editor-color-highlighting/23750/1 "2022-02-15T14:38:17Z")

</div>

There used to be color highlighting for titles and bullet points in the editor.  
Now all the text is black and horrible to look at. I dont want to look at "rendered" markdown. I want to edit the normal file with highlighting.  
How do I make it go back to how it was before?

Why did you get rid of the colors????

---

<div class="post-metadata">

**Author:** ![awefaerg](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@awefaerg](https://discourse.joplinapp.org/u/awefaerg)\
**Post date:** [15 February 2022 14:45 UTC](https://discourse.joplinapp.org/t/editor-color-highlighting/23750/2 "2022-02-15T14:45:57Z")

</div>

How do I get the color highlighting back like seen on the editor tab in this post?

> [@Feature Request: Editor colors](https://discourse.joplinapp.org/t/feature-request-editor-colors/2017):
>
> Recently I noticed that a lot of my notes come from meetings, where I write down items that where discussed and lists of action items that came up. It ends up with a pretty purple screen as shown in the screen shot below. I would really love to be able to change some of the colors, especially for the lists to something more pleasing. The switch to dark mode it a bit too drastically for me though, so I’m looking for a more granular solution, like changing only some colors in the editor.

---

<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:** [15 February 2022 15:14 UTC](https://discourse.joplinapp.org/t/editor-color-highlighting/23750/3 "2022-02-15T15:14:25Z")

</div>

Proposal to change it was here:

> [@RFC: Update Markdown editor CSS to make it match loaded theme](https://discourse.joplinapp.org/t/rfc-update-markdown-editor-css-to-make-it-match-loaded-theme/18601):
>

Release notes:

> **[Release v2.2.2 · laurent22/joplin](https://github.com/laurent22/joplin/releases/tag/v2.2.2)**
>
> Attention: The default font size has been changed in the Markdown editor. You can change it back in Config \> Appearance \> Editor font size.
> 
> Improved: Ensure that timestamps are not changed when sh...

CSS wiki:

> [@Joplin Customization](https://discourse.joplinapp.org/t/joplin-customization/11195#restore-codemirror-light-theme-prior-to-v22-7):
>
> 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…

How to customise Joplin:

> [@Introduction to customising Joplin (userchrome.css & userstyle.css)](https://discourse.joplinapp.org/t/introduction-to-customising-joplin-userchrome-css-userstyle-css/21370):
>
> Joplin has several internal stylesheets that control what Joplin looks like to the user. However two have been provided that allow the user to customise the app. Joplin uses its built-in styles but these two files can be used to override those styles. These files are just like the Cascading Style Sheets (CSS) used when creating web-sites. The files are called userchrome.css and userstyle.css. userchrome.css allows styling of the app itself, including the Markdown Editor, userstyle.css allows s…

---

<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:** [15 February 2022 16:11 UTC](https://discourse.joplinapp.org/t/editor-color-highlighting/23750/4 "2022-02-15T16:11:23Z")

</div>

@awefaerg welcome to the forum.

Here is a starter for you to put into your **userchrome.css** file.

It's commented so hopefully you should see what each bit changes. You can change the colours to suit your needs. I have mainly used named colours rather than hex codes. All the available named colours can be found [here](https://www.w3schools.com/colors/colors_names.asp).

Some elements remove things like text decoration (url underlines etc.) . If you dont want that just delete it.

Remember you must _completely_ restart Joplin for the changes to take effect. You must **quit** Joplin not just close the window to the system tray.

```css
/* ==CodeMirror editor modifications== */

 span[role="presentation"] {
    /* editor text */
     color: black;
}
 .cm-header {
    /* This covers ALL headers */
     color: blue !important;
}
 .cm-variable-2, .cm-meta {
    /* lists (.cm-meta controls the square brackets [] ) - may need extra elements added if the list goes down levels*/
     color: darkred !important;
}
 .cm-comment {
    /* code text - code blocks & inline code*/
     border: none !important;
     background-color: #F3F3F3 !important;
     font-weight: 500;
}
 .cm-quote {
    /* quoted text */
     color: darkviolet !important;
}
 .cm-image-marker {
    /* the "!" before displayed image links */
     color: red;
     font-weight: 900;
}
 .cm-link-text {
    /* links - .cm-link-text is everything in the square brackets of a link*/
     font-weight: bold;
     color: blue !important;
     text-decoration: none !important;
}
 .cm-string.cm-url, .cm-link {
    /* links - .cm-string.cm-url is the url itself in the round brackets of a link - .cm-link is a link created just using angled brackets - "<http://example.com>" */
     color: blue !important;
     text-decoration: none !important;
}
 .cm-tag, .cm-attribute {
    /* HTML tags - .cm-tag is the HTML tag itself such as "<img>" | .cm-attribute is any tag attributes such as "width" or "src" */
     color: blueviolet !important;
     font-weight: 500;
    /* the above are NOT applied if the html text is marked as "code" */
}
 .cm-hr {
    /* horizontal rule - "***" */
     color: darkorange !important;
     font-weight: 900;
}

```

---

<div class="post-metadata">

**Author:** ![awefaerg](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@awefaerg](https://discourse.joplinapp.org/u/awefaerg)\
**Post date:** [15 February 2022 22:56 UTC](https://discourse.joplinapp.org/t/editor-color-highlighting/23750/5 "2022-02-15T22:56:06Z")

</div>

I love you guys. Thanks

---

<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:** [17 March 2022 22:56 UTC](https://discourse.joplinapp.org/t/editor-color-highlighting/23750/6 "2022-03-17T22:56:41Z")

</div>

Closed on 17 March 2022 22:56 UTC

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