Editor color highlighting

[awefaerg]

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

[awefaerg]

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

Feature Request: Editor colors

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. [t…

[Daeraxa]

Proposal to change it was here:

RFC: Update Markdown editor CSS to make it match loaded theme

Release notes:

Release v2.2.2 · laurent22/joplin

CSS wiki:

Joplin Customization

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 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 [plain_codemirror] /ref dpoulton comment Dark Theme Mermaid Flowchart (Flowchart only) users…

How to customise Joplin:

Introduction to customising Joplin (userchrome.css & userstyle.css)

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…

[dpoulton]

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

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.

/* ==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;
}

[awefaerg]

I love you guys. Thanks