Plugin: 🎨 macOS theme for Joplin

The setting for margin-bottom is not working.
I've put #rendered-md in front of all custom rendered markdown styling.

My bad, the plugin styles are loaded after the user stylesheet and therefore takes precedence. There are a few ways to increase the specificity of your rules:

/* chain 'rendered-md' */
#rendered-md#rendered-md h1 { /*... */ }

/* or simply add a generic element like body in front */
body #rendered-md h1 { /*... */}

Both of the above solutions should work.

Hi @andrejilderda

May I make two suggestions?

When counting items in a notebook, it would be very useful to be able to distinguish the number of notes from the number of todo.

It would also be very useful if the title of a notebook could be adapted to the size of the column.

Thanks for this very nice light theme!

Hi everyone. My mac plugin stopped working yesterday with the whole interface now showing text in extremely small unreadable font size. Has anyone experienced the same issue? Thanks!

I've added your feature request here:

1 Like

Hmm... Do you use any other plugins? Have you updated Joplin recently? Which OS are you using?

I use big sur and this is the only plug-in I use.

Do you use any custom css?

No nothing custom

It's been about 2 years since I last used Joplin. I came back to OneNote. Today, I wanted to rediscover this tool.

One of things that made me switch back to OneNote was the design of Joplin. Then, today I discovered the plugins support in Joplin with some useful things like your macOS Theme. It's just perfect ! So thanks for this visual.

It seems to have a little lag to apply the visual when switching notebook, but it's not a big issue.

1 Like

I have a suggestion :

Add an option to have color in heading titles instead having them black.


I only used the Markdown editor, so I'm only interested in its color styles. Is there any kind of quick preview for the styles? Because otherwise you always have to choose a new style, restart Joplin and test it. It takes quite a while until you have tried them all. Maybe in the form of screenshots.

Furthermore I would like to see a Markdown theme like the one from HedgeDoc:

Hi @andrejilderda

Do you think it would be possible to offer this option ?

Probably unrelated, but is there a way to set this theme on mobile (android), or is it limited to desktop?

@DominicDesbiens Do you mean in the main or the Markdown editor? How would you use this feature?

@touly You can! See: CodeMirror: Theme Demo This only previews JavaScript though.

@naveenroy Unfortunately this theme cannot be applied on mobile.

@bepolymathe The layout unfortunately doesn't support this. Only thing that comes to mind is that you could make the title go over multiple lines if it doesn't fit. Would that solve your problem?

Yes, it would be very practical!

@andrejilderda I mean in the main part (visual editor, not markdown). I want colored titles just to makes sections more clear in my notes to separate contents (like OneNote does with headings, by default blue colors. Dark blue for H2, light blue for H3, etc).

Thanks, I really appreciate this plugin!

1 Like

@bepolymathe Try adding this to your userchrome.css:

.sidebar.sidebar > div .list-item-container {
  height: auto !important;

.sidebar.sidebar > div .list-item {
  align-items: baseline !important;
  padding-bottom: 2px !important;

.sidebar.sidebar > div .list-item .title {
  text-overflow: initial !important;
  overflow: initial !important;
  white-space: normal !important;

In that case you can add the following to your userstyle.css (Joplin preferences › Appearance › Show Advanced Settings › Custom stylesheet for rendered Markdown):

:root:root {
  --g-headerTextColor: blue;

If you like more fine-grained control per heading level, you can use:

#rendered-md#rendered-md h1 {
  color: red;

#rendered-md#rendered-md h2 {
  color: rebeccapurple;

/*  etc. */

Thanks a lot ! It works perfectly....
Can i adopt the same strategy for the note list ?