Markdown editor, style/CSS lost with upgrade

Support
1

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

2

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

3

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

4

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

5

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!

6

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
7

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!

8

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?

9

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.

10

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