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. but none is helping. I got some styles in the userchrome.css now from one of the templates which do apply: :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 ! :frowning: Thanks, penfold

You can restore the old theme with this CSS from the CSS wiki post. [image] Joplin Customization couch_and_lampLounge 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) usersty…

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

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 [image] Please read this if you are wondering why there's now a margin on the note text News The latest version of Joplin sets a maximum width for the note content in order to improve readability. You can disable this by going into Configuration > Appearance and set the width to "0".

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: 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!

[image] 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] For reference those list items are: .cm-keyword .cm-variable-2 .cm-variable-3

Thanks for your help, Daeraxa! I found the problem: Dark theme. I got the CSS you linked 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!

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. Did the editor change? And if so, is there not maybe a list of new compatible themes?

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 and see if there is anything there. There was also a change (and a lengthy discussion) 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.

Markdown editor, style/CSS lost with upgrade

Support

Daeraxa 6 October 2021 09:35 2

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

Topic		Replies	Views
Talking about Markdown's CodeMirror theme update Lounge	20	4288	26 January 2022
After update css does not work anymore Support	1	812	1 September 2021
Color Indicators in Markdown-Editor are gone Support	10	2685	20 August 2021
No more colors or formatting in editor Support	7	1393	14 August 2021
Updated from 2.1.9 to 2.3.5. List items are now all the same color Support	3	740	19 August 2021

Markdown editor, style/CSS lost with upgrade

Related topics