Share your CSS

I originally meant different color schemes for different list types, but different colors/shades of color per level would be pretty sweet too. I'm mediocre (at best) at css, so I wasn't even sure if customizing the colors/shades of color based on list level was even possible by just editing the userchrome file.

Per level is certainly easy enough, you actually identified the three categories you need already. However doing this will make it the same for each type of list (e.g. cm-variable-2 will change the colour for both the 1. and - type lists at the same time - it also works for checkboxes). I don't (currently) know a way of identifying the different list types but I'm sure somebody far far better than me with CSS (which isn't hard) might be able to answer that for certain.
An example of how to change the 3 levels is below - they also then repeat; so after .cm-keyword it goes back to .cm-variable-2:
image {color: #0055aa !important;} {color: #008855 !important;} {color: #770088 !important;}
1 Like

Oh nice, thanks for your help! That'll work fine for now, I'll keep looking around for options regarding the whole colors based on list type quandary.

I'm having some trouble with a few CSS changes.

Currently the MD table in dark mode looks like so, which isn't very readable:

Two changes I'd like to make are:

  1. Change the text color in MD table from grey to white
  2. Change the colors in alternate rows from black&white to two different shades of grey.

Can someone point to what classes I need to reference to make the changes? Thanks.

table > thead > tr > th {
  color: white;
  background: #212121;
table > tbody > tr > td {
  color: white;

table > tbody > tr:nth-child(even) {
  background: #2f2f2f;

table > tbody > tr:nth-child(odd) {
  background: #383838;
1 Like

I have placed the snippet in userstyle.css. However, there are no changes after restarting.

I use the macOS theme plugin
In README it says there are a few !important tags used.
I have made other changes to userchrome and userstyle with the theme plugin active and it has worked. However, your snippet doesn't work. How can I debug the CSS? Is there an Inspect Element somewhere?

Hi @manthanf1 , here is another choice and I think this must work:

#joplin-container-content > #rendered-md  table > thead > tr > th {
  color: white;
  background: #212121 !important;
#joplin-container-content > #rendered-md  table > tbody > tr > td {
  color: white !important;

#joplin-container-content > #rendered-md  table > tbody > tr:nth-child(even) {
  background: #2f2f2f !important;

#joplin-container-content > #rendered-md  table > tbody > tr:nth-child(odd) {
  background: #383838 !important;
1 Like

Thank you, this absolutely works!

1 Like

I wonder if anyone could suggest some clean CSS to show text next to the "New note" and "New to-do" buttons.

I've myself managed to come up with something like this. Please keep in mind that I didn't spent a lot of time on the code, as it was more like a quick and dirty fix.


.rli-noteList > div > div > div:first-child,
.rli-noteList > div > div > div:first-child > div {
	display: inline-block !important;
	height: auto !important;

.new-todo-button {
	margin-top: 8px !important;
	margin-left: 0 !important;

.new-todo-button:after {
	content: attr(title) !important;
	font-size: 13px !important;
	left: 44px !important;
	position: absolute !important;

The code works but is kind of ugly, and also I think it would be better if the two buttons could stay in a single-line.

The main reason for this requirement is that I work with an older person who simply cannot remember what a button without any visible text label does.

For anyone which might find this helpful I figured out a way how to use note-overview and some css to get a card view of all the note or notes in a certain notebook see more Note overview - #229 by meldarionqeusse


Is there any way to make nested tags with this css stuff (that I dont really understand!)
Sorry if its a dumb question

Unfortunately not, CSS is cosmetic, it essentially just modifies what Joplin looks like. There are lots of clever tricks that can add functionality in different ways but nested tags is not one of them. There is a long history of that particular feature and issues with it but basically, no, it has to be coded in Joplin itself.

Thanks @Daeraxa
Never mind, I can live without that

Hey there, I'm new here and I've been using Joplin for quite a while. I have to admit that I'm not quite as advanced as some of you seem to be, but I've made this little tag view if y'all are interested:

It's more of a cosmetic thing (doesn't automatically add the tags to Joplin), but I still like how it turned out. It has a shadow in case a light theme is being used and has support for printing/exporting to PDF. I've fully documented the CSS file to make it as beginner-friendly as possible and you can get it on my GitHub page.

I'll be making more of those little snippets in the future and may even start a theme if I that itch... but I'll see. Hope someone may find this useful too. Enjoy! :slightly_smiling_face:


I have absolutely no clue... I copy pasted exactly this snippet of CSS and put in my file and it doesn't work at all...

Here's my complete userstyle.css file, is there any mistake somewhere?

.list-item-depth-0 .title::first-letter{
    color: transparent !important; 

.list-item-depth-1 .title::first-letter{
    color: transparent !important; 

.list-item-depth-2 .title::first-letter{
    color: transparent !important; 

.list-item-depth-3 .title::first-letter{
    color: transparent !important; 

* {margin-left:0px;padding:0px;font-family:calibri;line-height:1.1;}

body {width:550px;}

It goes in userchrome.css as it is for styling the note list in the app, userstyle.css is for styling the rendered output (markdown preview).

1 Like

Thank you! It works. :slight_smile:

1 Like

Please have a look at dpoulton post. He explained in much detail what is customized how:

Somebody asked a question on Discord about whether the markdown editor and preview windows could swap position. I have no idea if this will break anything (as it isn't something I will ever use and have no real impetus to test it) but I managed to do it by adding the following to userchrome.css.

.rli-editor > div > div > div > div > div > div {
    flex-direction: row-reverse !important;

Et voilà!


Apparently modern web engine support multiple columns layout. It is even more simpler than traditional text processor software. You can read more about css style here

1 Like