Homepage    |    GitHub    |    API    |    FAQ

Share your CSS

Yes. The important thing is to skip lines. I spent a longgg time to get this right

Here is a gist with the whole userstyle.css:

1 Like

Oh my lord, thank you so much! The line-skipping did the trick!

Thanks so much for the gist! Really helpful, especially the extra line spacing for equations and the "theorem" boxes! :smiley:

1 Like

Oh geniuses of Joplin CSS thread ;
I have a request ; you know in the editor part (not the rendered markdown part) ; so when I have latex formulas between $$ and $$ ; can I have it so that those parts are behind a different background like a semi highlight so it stands out . Just a visual contrast/perception thing . There are times I just want to segment that in my brain .

Q2 ) has anyone noticed how sometimes the rendered markdown part and the editor part are not aligned when scrolling ? is there a way to break that connection so they don't scroll at the same time ? to hold a place ?

didn't change much. it is a mix of other posts from here.


/* coloured tags */

grey, red, green, blue, purp {
    width: 90%;
    display: block;
    margin-left: 20px; 
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid;
    border-radius: 2px; 
    word-wrap: break-word;
    box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3) ; 

red strong{
     font-weight: bold;
     color : #000000;

grey {
    border-color: #b1bcc2;
    background-color: #e9edf0; 
    color : #000000;

green {
    border-color: #7CBF6B;
    background-color: #c5e5b4; 
    color : #000000;

red {
    border-color: #f65354;
    background-color: #fad3d4; 
    color : #000000;

purp {
    border-color: #af74e8;
    background-color: #ead9fb; 
    color : #000000;

blue {
    border-color: #71B4DF;
    background-color: #C4E8FF; 
    color : #000000;

h1 {
    background: #b7cced;
    text-align: center;
    border-bottom: 4px solid #99a4c4;
    color: #000000;
    font-size: 22px;
    border-radius: 3px; 
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.3); 
h2 {
    background: #d5ddf5;
    text-align: center;
    border-bottom: 3px solid #a9b3d1;
    color: #000000;
    font-size: 20px;
    border-radius: 3px; 
    padding-top: 8px;
    padding-bottom: 8px;
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.3); 
h3 {
    background: #e6ecfc;
    text-align: center;
    border-bottom: 2px solid #d5ddf5;
    color: #000000;
    font-size: 18px
    border-radius: 1.5px; 
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 1.5px 1.5px 3.5px 0 rgba(0,0,0,0.3);
h4 {
    background: #e6ecfc;
    text-align: center;
    color: #000000;
    font-size: 15px;
    border-radius: 1.5px; 
    padding-top: 5px;
    padding-bottom: 5px;


:root {
    --red: #FF1744;
    --white: #E5FFDE;
    --green: #23CD60;
  --color-italics:      #a842c2;
  --color-bold:         dark-grey;
  --color-quote:        green;

  --border-code:        1px solid rgb(70, 70, 70);
  --backgd-code:        rgba(47, 48, 49, 0.15);
  --radius-code:        .25em;

  --color-code-ital:    pink;
  --color-code-bold:    #6495ed;
  --color-katx-tags: orange;
  --size-scroll:        4px;
  --size-tab:           7px;

  /*  Alternating Notebook List Colors */

  /*  default/passthrough background for all the ODD rows  */
--backgd-list-book1: #c2192d;
  /*  default/passthrough background for all the EVEN rows  */
--backgd-list-book0:  #c2192d;

  /* .list-item-depth-0:nth-child(odd) a */
  --backgd-list-0book1: #090b54;
  /*   0 depth rows EVEN */
  --backgd-list-0book0: #07095e;

  /* .list-item-depth-1:nth-child(odd) a */
  --backgd-list-1book1: #000000;
  /*   1 depth rows EVEN */
  --backgd-list-1book0: #141414;

  /*   2 depth rows ODD */
  --backgd-list-2book1: #616161;
  /*   2 depth rows EVEN */
  --backgd-list-2book0: #666666;

  /*   3 depth rows ODD */
  --backgd-list-3book1: #b5b5b5;
  /*   3 depth rows EVEN */
  --backgd-list-3book0: #b5b5b5;

  /* Tag List */
  --backgd-list-tags1:  #092a0c;
  --backgd-list-tags0:  #0c2d0f;

div.tag-list span {
         border-radius: 5px;
         color:white !important;
         background: blue !important;

.cm-image-marker {
    color: var(--red);
   /* changes the font colour for the "!" before displayed image links */
    font-weight: 900;

.note-list div a:focus { 
    background-color: var(--green) !important;
    color: var(--white) !important;
    border-bottom: 0 !important;

.note-list .list-item-container:hover, .folders .list-item-container:hover {
    background-color: var(--red) !important;
    color: var(--white) !important;

/* code */

.cm-em {
  color:            var(--color-italics) !important;

.cm-strong {
  color:            var(--color-bold) !important;

.cm-quote {
  color:            var(--color-quote);
  font-style:       italic !important;

/* inline code */
.cm-s-material-darker pre.CodeMirror-line > span > span.cm-comment {
  color:            var(--color-italics) !important;
  border:           var(--border-code);
  background-color: var(--backgd-code);
  border-radius:    var(--radius-code);

/* inline code italics */
.cm-s-material-darker pre.CodeMirror-line > span > span.cm-comment.cm-em {
  color:            var(--color-code-ital) !important;

/* inline code bold */
.cm-s-material-darker pre.CodeMirror-line > span > span.cm-comment.cm-strong {
  color:            var(--color-code-bold) !important;

.cm-tab {
  font-size:        var(--size-tab) !important;

/* colorize katex tags */
.cm-tag {
  color:            var(--color-katx-tags) !important;

/* colorize katex brackets */
.cm-bracket {
  font-weight:      bold !important;
  color:            var(--color-italics) !important;

/* colorize katex numbers */
.cm-number {
  font-weight:      bold !important;
  color:            var(--color-quote) !important;

/* widen default horizontal and vertical scrollbars */
::-webkit-scrollbar {
  width:            var(--size-scroll);
  height:           var(--size-scroll);

div.tags > div.list-item-container:nth-child(odd) a{
  background-color: var(--backgd-list-tags1);

div.tags > div.list-item-container:nth-child(even) a{
  background-color: var(--backgd-list-tags0);

/*  Define the background color for empty list areas  */
  background-color: var(--backgd-list) !important;

/*  Alternating Note List Colors */

/*  Define the list background color for all the ODD background rows  */
.note-list > .list-item-container:nth-child(odd) a{ 
  background-color: var(--backgd-list-note1);
  background-clip:  content-box;

/*  Define the list background color for all the EVEN background rows  */
.note-list > .list-item-container:nth-child(even) a{
  background-color: var(--backgd-list-note0);
  background-clip:  content-box;

/*  Alternating Notebook Colors */

/*  Define the default/passthrough notebook background color for all the ODD background rows  */
.list-item-container:nth-child(odd) a{ 
  background-color: var(--backgd-list-book1);

/*  Define the default/passthrough notebook background color for all the EVEN background rows  */
.list-item-container:nth-child(even) a{
  background-color: var(--backgd-list-book0);

.list-item-depth-0:nth-child(odd) a{ 
  background-color: var(--backgd-list-0book1);

.list-item-depth-0:nth-child(even) a{
  background-color: var(--backgd-list-0book0);

.list-item-depth-1:nth-child(odd) a{ 
  background-color: var(--backgd-list-1book1);

.list-item-depth-1:nth-child(even) a{
  background-color: var(--backgd-list-1book0);

.list-item-depth-2:nth-child(odd) a{ 
  background-color: var(--backgd-list-2book1);

.list-item-depth-2:nth-child(even) a{
  background-color: var(--backgd-list-2book0);

.list-item-depth-3:nth-child(odd) a{
  background-color: var(--backgd-list-3book1);

.list-item-depth-3:nth-child(even) a{
  background-color: var(--backgd-list-3book0);

I borrowed this, and it looks much nicer. Thanks for sharing.

Anyone in here with a Mac with Big Sur who can check if the icons are working properly for my theme?:

[...] I was surprised to see I could use the native macOS icons (At least, it works on my machine™). Apparently SF Pro contains all icons and can also serve as an icon font.

I'm using Mojave on my MacBook, but I do have Catalina in a VM. I haven't installed Big Sur in a VM yet, but will hopefully get to it at some point.

1 Like

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.