Homepage    |    GitHub    |    API    |    FAQ

Share your CSS

Hi, I'm new here and I believe that somethings in my custom css don't make much sense but here it goes :slight_smile:

Based on the dark theme from @xplosionmind

Modified to look more like the One Dark Pro on vscode. Took some inspiration on the PHPStorm Nord theme.

You can download it here if you want

What it looks like:


Hey thanks for sharing. It's very successful. I would just say maybe the links are a little dark in the markdown rendering.


It has an effect on reading the tables.

Normally links are in yellow on my custom theme. Maybe can you share an example for debug the issue ? And you should switch the joplin theme to dark. Maybe that's was the issue.

What’s your config in tools --Β» options for theme by default ?

Ok, same for me. I had just make a copy/page user and chrome style...

And with a table...

oh! now I see what you mean :slight_smile: never used thoses links from one file to another before :slight_smile: I'm going to put those on my todo list. Thank you. And your headers in the editor are different too. Don't know why.

Okay, no worries. If you need, I can test again

1 Like

It's working ok now :slight_smile:

Yep, i confirm. Thanks !

1 Like

I am humbled. Thank you very much!

1 Like

I'm trying to put margin above my headings in the markdown editor. What would be h1 in the rendered note just seems to be a div in the editor. and inside that is just a span with cm-header-1 & cm-header. And spans don't have margins.


Change the line-height for the cm-header-1 class?

 .cm-header-1 {
    line-height: 300% !important;

Admittedly it adds space above and below the # text.



@dpoulton, thanks! I never seem to use line height.

Anyone know why it centers it? I tried to find a way to fix it but couldn't.

Maybe you could set the display of the span to inline-block or block? Would that not help/allow you to specify margins?

Oh, you're right. Don't know how I missed that. This is what works for me. I'm using the rich markdown plugin.

.cm-header-1 {
	display: inline-block;

It's slightly wonky because of the token styling, but it's ok. Thanks!

Is it possible to change the color of the arrow? β†’ →

In the older Joplin version is was highlighted automatically. Was quite nice =)

What arrow are you referring to?

So the arrow is done by → (just type it without inline codebox). The result is this symbol: β†’