I know that this is extremely late, but I wanted to add my two cents and this was the most recent thread I could find on this topic. I didn't think it was appropriate to make another thread, so if I am breaking any particular rule or guideline, someone please let me know. Also, apologies in advance if I ramble, I'm in the midst of a covid brain fog and I'm running mostly on caffeine and spite. (But not against Joplin or laurent. I love this app. I just wanted to write about my experience and leave a helpful snippet for anyone having the same issue.)
I would say that this change was very annoying for my type of user. For context: I make my living by editing large amounts of text, both fiction and nonfiction. Other than occasionally modding video games or working with virtual machines to play the ridiculously old games of my childhood, I have very little experience with "tech stuff" - I want to learn how to do programming, including CSS, but between a schedule that includes multiple projects and a growing family I have precious little time to learn brand-new skills. So customizing Joplin is largely beyond me.
After struggling for years with Evernote and OneNote, Joplin has been a godsend for me: I can make each project into a separate notebook, or even sort notebooks into groups according to contract. I use a lot of outlines to keep my thoughts and proposed edits organized - many editors make an outline and then rewrite the text proper. Joplin's previous behavior of alternating colors when handling lists was great for this! I realize that this was a side-effect of text coloration for the convenience of coders, but there is usually quite a bit going on in a manual, and even more going on in fiction, so having outlines that alternated colors according to their tab depth to organize my notes was great on a level I couldn't describe. Seriously. It was transcendent. I might write a song about how awesome Joplin is someday.
When the change happened, I actually didn't think much about it at first because, again, busy, but over time it got to the point where I was having trouble keeping track of my notes. I was looking at an endless field of white text on a dark background and there wasn't anything to differentiate one piece from another except for the tab depth of the bullet, which wasn't helpful when I was neck-deep in someone's deathless prose.
I still soldiered on, but when I caught covid and my contracts were kind enough to allow me time to recover, in a stunning display of wisdom, I decided to finally restore the alternate colors instead of hibernating. Thus began a six hour long saga of experimenting with the CSS posted here on the forums and elsewhere. Very little of it worked. It was only after cobbling together material from at least three different sources that I found that I had to:
- Do a find-replace to get the dark theme to change colors, as the only available snippet that functioned at all is for the light theme.
- Figure out which portions of the CSS apply to the lists. If anyone finds this post having suffered the same issue these are, in order of their depth in a list: cm-variable-2, cm-variable-3, and cm-keyword. That is, cm-variable-2 will always be the first depth in the list (starting a list without hitting tab), cm-variable-3 will always be depth 2 in the list, and cm-keyword will always be depth 3 in the list, and afterward they repeat every time you add a depth level. I do not know why cm-keyword comes before the other two in the code but after them in a list, or why cm-variable appears to do nothing.
- Paste the CSS into userchrome.css (which for future reference can be accessed through Tools -> Appearance -> Advanced Options -> Custom stylesheet for Joplin-wide app styles). I will include the CSS snippet that I'm using below.
- Save userchrome.css, then exit Joplin completely - do not minimize it to the tray.
- Sacrifice a goat to the Elder Gods to make my stylesheet work. Unfortunately I had to dispose of my ritual robes afterward, as blood is impossible to get out of fabric.
- Restart Joplin.
Mine is probably a very niche use case, I know, but I feel that allowing the option to swap between the colored text and the more standard text might be a good future feature. I do imagine that most coders would be able to whip up something for themselves, though, so maybe I'm the only one.
Thank you all for reading, and thank you Laurent for what is otherwise a flawless app. I think I'll actually go to sleep now.
Note that the below is incomplete; I only changed the colors for the lists and a lot of this looks pretty terrible in dark mode as-is. Still, all you have to do is plug in the hex code for the color you want.
/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
div.CodeMirror.cm-s-material-darker span.cm-header {color: blue;}
div.CodeMirror.cm-s-material-darker span.cm-quote {color: #090;}
div.CodeMirror.cm-s-material-darker span.cm-negative {color: #d44;}
div.CodeMirror.cm-s-material-darker span.cm-positive {color: #292;}
div.CodeMirror.cm-s-material-darker span.cm-header, span.cm-strong {font-weight: bold;}
div.CodeMirror.cm-s-material-darker span.cm-em {font-style: italic;}
div.CodeMirror.cm-s-material-darker span.cm-link {text-decoration: underline;}
div.CodeMirror.cm-s-material-darker span.cm-strikethrough {text-decoration: line-through;}
div.CodeMirror.cm-s-material-darker span.cm-keyword {color: #70bf5d;}
div.CodeMirror.cm-s-material-darker span.cm-atom {color: #219;}
div.CodeMirror.cm-s-material-darker span.cm-number {color: #164;}
div.CodeMirror.cm-s-material-darker span.cm-def {color: #00f;}
div.CodeMirror.cm-s-material-darker span.cm-variable,
div.CodeMirror.cm-s-material-darker span.cm-punctuation,
div.CodeMirror.cm-s-material-darker span.cm-property,
div.CodeMirror.cm-s-material-darker span.cm-operator {}
div.CodeMirror.cm-s-material-darker span.cm-variable-2 {color: #71bebd;}
div.CodeMirror.cm-s-material-darker span.cm-variable-3, div.CodeMirror.cm-s-material-darker span.cm-type {color: #c2bd60;}
div.CodeMirror.cm-s-material-darker span.cm-comment {color: #a50;}
div.CodeMirror.cm-s-material-darker span.cm-string {color: #a11;}
div.CodeMirror.cm-s-material-darker span.cm-string-2 {color: #f50;}
div.CodeMirror.cm-s-material-darker span.cm-meta {color: #555;}
div.CodeMirror.cm-s-material-darker span.cm-qualifier {color: #555;}
div.CodeMirror.cm-s-material-darker span.cm-builtin {color: #30a;}
div.CodeMirror.cm-s-material-darker span.cm-bracket {color: #997;}
div.CodeMirror.cm-s-material-darker span.cm-tag {color: #170;}
div.CodeMirror.cm-s-material-darker span.cm-attribute {color: #00c;}
div.CodeMirror.cm-s-material-darker span.cm-hr {color: #999;}
div.CodeMirror.cm-s-material-darker span.cm-link {color: #00c;}
div.CodeMirror.cm-s-material-darker span.cm-error {color: #f00;}
span.cm-invalidchar {color: #f00;}