How to get text highlighting to work and coloring sidebar and notepages

Support
5

hi! you can customize joplin by using css. there are two files, one for rendered markdown and one for everything else. more info here. but you don't need to create the files you can edit them by going options > appearance > show advance settings. when you click 'edit' the file will be opened up in a text editor (i guess it depends on the default app on your computer for css files).

you can find plenty of examples in this topic. some people add comments as well to explain what a code block does. also just like in your browser, you can toggle development tools (under help) in joplin, and look for element / class (?not sure what they're called) names to then modify them in your css files. but i think you can get by with examples on here for basic stuff which is mostly what i do. don't forget to restart joplin to see the changes after saving css file.

might be useful: this topic mentions highlighted text and has a link about dev tools.

in userchrome.css i have this to make ==mark== color to light yellow in the editor. probably took it from the above link.

.cm-search-marker {
  background: #ffff99 !important;
  color: black !important;
}

and i remember it changed the ctrl+F search highlight color so that's why i have this:

.cm-search-marker-selected {
  background: black !important;
  color: white !important;
  /* ctrl+F search highlighter */
  /* if not added, it is the same color as search-marker*/
  /* but text stays white, making it hard to read*/
}

for rendered markdown ==mark== color i have this in userstyle.css (it's the same light yellow):

mark {
   background-color: #ffff99;
}

colors can be hex codes like the one above.

anyway i hope someone will correct me if i said anything wrong.

1 Like