Share your CSS

[dpoulton]

Due to a request for help elsewhere on this forum I started digging around how Mermaid charts are displayed. It seems that the css used to format the chart is exposed and can be modified using userstyle.css and so I used it to change the chart font. It also means that a “standard” graph/flowchart like this

can be tweaked to look as awful as this

There may be better ways to select elements but I just settled on the first guess I made that worked. Unfortunately I could not work out how to change the arrowhead colour before my limited attention span cut in. I also do not know if all the !importants are required, I was just a bit lazy…

Just posted here in case anyone may find this useful …

:root {
    --mermaid-font-family: "Bahnschrift SemiCondensed" !important;
    /* sets mermaid font variable */
    }
path.path {
    stroke: red !important;
    /* sets line colour for the lines joining nodes*/
    }
rect.label-container,
polygon.label-container,
circle.label-container,
ellipse.label-container {
    fill: gold !important;
    /* sets fill color for nodes*/
    stroke: green !important;
    /* sets line color for nodes*/
    stroke-width: 2px !important;
    /* sets line width for nodes*/
    }
span.edgeLabel {
    background-color: blue !important;
    /* sets background color for text boxes */
    color: white !important;
    /* sets font color for text boxes */
    }

By adding this

div.mermaid {
    background-color: #1D2024 !important;
    /* sets full background colour */
    }

and setting the colours to black and white values you can get something like this which may interest dark theme enthusiasts. However if you start doing this you may have to track down all the css elements and classes for all the different chart types you use (and there’s still the problem with the arrowheads!).

[dpoulton]

Had an idea to check GitHub for Mermaid for theme files

I hacked about at the css file for flowcharts and came up with:

div.mermaid {
    background-color: #1D2024 !important;
    /* sets full background colour to Joplin Dark Theme colour */
    }
:root {
    --mermaid-font-family: "Bahnschrift SemiCondensed" !important;
    /* sets mermaid font variable */
    }
.label {
  font-family: var(--mermaid-font-family);
  color: black !important;
}

.label text {
  fill: black !important;
}

.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
  fill: white !important;
  stroke: white !important;
  stroke-width: 1px;
}

.node .label {
  text-align: center;
}
.node.clickable {
  cursor: pointer;
}

.arrowheadPath {
  fill: white !important;
}

.edgePath .path {
  stroke: white !important;
  stroke-width: 1.5px;
}

.flowchart-link {
  stroke: white !important;
  fill: none;
}

.edgeLabel {
  background-color: #1D2024 !important;
  rect {
    opacity: 0.5;
  }
  text-align: center;
  color: white !important;
}

This means that flowcharts that currently look like this:

Change to this:

If someone mentions that this has been posted elsewhere on the forum I will scream. Also I do not know why I persisted with this because I do not even use a dark theme!

Hope it is a useful starter for someone out there…

[uxamanda]

@glocalglocal

as they do now in WYSIWYG

As far as I know, you cannot currently theme the WYSIWYG with CSS. If anyone knows that this has changed, please let me know, would love to tackle a theme for it.

[uxamanda]

FYI, I added very basic Code Mirror support to my theme if anyone was looking for it.

/* code mirror */

/* background and base color */
.cm-s-material-darker.CodeMirror {
    background-color: var(--black) !important;
    color: var(--light-grey) !important
}

/* lists */
.cm-s-material-darker .cm-variable-2 {
    color: var(--light-grey) !important
}

/* internal links */
.cm-s-material-darker .cm-string {
    color: var(--primary) !important
}

/* headers */
.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4 {
    color: var(--dark-white) !important
}

[dpoulton]

Fixed Header / Footer

In this thread a user asked if it was possible to add a fixed header and footer to every page of printed / exported PDF note. The idea was that the text was not part of the note text itself, more a “watermark”.

Whilst the user was looking for the text to appear on every page, the below CSS inserts a set line of text at the start of a printed note / exported PDF and at the end as well. I am not aware of a way of adding a variable value to this text using just CSS, so, no dates, usernames, version info etc.

The text gets added to every printed or PDF exported note. You cannot be selective. The font defined here is Google’s “Roboto Mono” so please replace with a font on your system if you do not have that one. Being custom CSS, which is an unsupported feature, there is no guarantee that this will continue to work with all future Joplin releases.

I am not a programmer but it appears to me that Joplin prepares a note as a single HTML page before sending it to print or the PDF generator. This CSS “injects” the fixed text into that HTML. That means that it may not actually be possible to add the fixed text to every page of a multi-page note. If anyone can work out a way to add the text to every page please post a reply here.

Copied to this thread in case anyone else is searching for something similar.

userstyle.css

.exported-note::before {
    font-family: 'Roboto Mono';
    font-size: 10px;
    color: darkgrey;
    display: block;
    text-align: right;
    content: 'This is the header text';
}
.exported-note::after {
    font-family: 'Roboto Mono';
    font-size: 10px;
    color: darkgrey;
    display: block;
    text-align: right;
    border-top: 1px solid darkgrey;
    content: 'This is the footer text';
}

Above CSS as PDF

Another Example

[dpoulton]

Bright Tags

If you want to brighten up the tags on the tag bar this css will assist. It also rounds the corners of the tags.

userchrome.css

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

[dpoulton]

Modify editor toolbar icons

The below css can change the colour of the editor toolbar icons. The intention was not to have any other icons change, such as the main toolbar (create note, create notebook etc.) or those used in the Notebook pane (for “All notes”, “Notebooks” and “Tags”).

The second part of the css sets inactive icons to the default for a light theme. If this second part is omitted the inactive icons will be about 40% of the opacity of whatever colour you select in the first part.

userchrome.css

div.editor-toolbar a.button i.fas{
     color: black !important;
     /* changes active button colour */
}
div.editor-toolbar a.button.disabled i.fas{
     color: rgb(85,85,85) !important;
     /* sets default Joplin light theme colour for inactive buttons. The actual colour used will be 40% opacity of the color set here*/
}

before

after above css

using colour Purple and both parts of the css

using colour Purple and the first part of the css only

[hrqmonteiro]

Hello guys, i finished my theme, and i think it turned out quite nice

I added a few things i wanted to use on Joplin so i ‘implemented’ myself.

Like: FontAwesome/Material Icons, Colored glyphs and other stuff. If anyone want to check, it’ s on my GitHub.

hrqmonteiro/joplin-theme

[hrqmonteiro]

Hey @gregoltsov, do you think you could add my theme to your list? I put many ‘features’ on it, you can have a look:

hrqmonteiro/joplin-theme

[gregoltsov]

Awesome-joplin repo is always open for PRs. I added your theme just now anyway

By the way, great work - you've added so many cool features there. I use Things 3 myself, and you really made Joplin look so close to it.

[hrqmonteiro]

Thanks, man! Appreciate it!

I like so much the aesthetics and functionality of the Things 3, i just don’t use it cause i don’t really have any Apple device here, but i’m glad i could make it a little bit close to it.

Thanks again for adding!

[omega3]

Please, can you share code for this look (icons and all elements).

[Rolograaf]

Sorry @omega3,

The latest release Joplin with latest release of Amanda's dark theme it just looks like this

My little tweaks to get double sized icons in the primary color, do not seem to work anymore. I am (gladly) not a CSS specialist, so you will have to figure it out yourself or ask Amanda to help you out.

Cheers,
Lourens

[uxamanda]

Hmm, looks like the icons each have different classes now, would take some work to find them all. For example, the alarm now has a custom . icon-alarm class instead of a .fas class (used to be used for all icons).

I plan to do some work on my theme at some point to make a dark version of the new theme, but have been using the base theme for a couple weeks to see what tweaks are helpful.

[jamedeus]

Has anyone had any luck changing the color of inline code blocks (in md editor) while using dark theme?

It's trivial with light theme, just need:

.cm-comment {
  color: var(--inline-code) !important;
}

In dark theme they also get class .cm-s-material-darker, but targetting this doesn't work. It looks like first they get styled by material-darker.css:

.cm-s-material-darker .cm-comment {
  color: #545454;
}

Which is then overridden by the main stylesheet, under <style id="codemirrorStyle">:

.cm-s-material-darker span.cm-comment {
	color: #878787 !important;
}

Which also overrides anything in userchrome.css...

Is there a way to work around this? It seems like userchrome.css is being read before the other stylesheet which overrides since they have same importance.

Maybe removing this from material-darker.css completely would allow !important to be removed, making user customization possible again?

[uxamanda]

@Rolograaf

My little tweaks to get double sized icons

Try adding:

[class^="icon-"], [class*=" icon-"]{
font-size: 24px !important
}

Didn't notice that the first time around, but I think that will change all of them.

[dpoulton]

I read that a more specifically stated element can override a previous, but less specific, element's !important

I tried the below and the code text changed to red in the dark theme. However you may want to give it a bit more testing to ensure it works in all situations.

pre.CodeMirror-line span[role="presentation"] span.cm-comment {
	/* code text - dark theme override*/
	 color: red !important;
}

[jamedeus]

Thanks so much! I flipped through a bunch of existing notes and haven't found any problems. Definitely going to try this approach on some other issues.

[elsiehupp]

This is an extremely simple modification of the Dark Mode CSS to eliminate outlines on everything for a "flat" look:

/* Remove Borders on Everything */

div, input, a, button, select, div::before {
	border: 0px !important;
}

/* Fix Input Mode Toolbar Item To Work Without Border */

.tox-tbtn div {
	height: 26px !important;
	border-radius: 4px !important;
}

.fab {
	top: 5px !important;
	font-size: 17px !important;
}

.fas {
	top: 5px !important;
	font-size: 15px !important;
}

/* Make Input and Select Elements the Same Height as Buttons */

input, select {
	height: 26px !important;
}

/* Use Alternating Row Colors In Note List */

.note-list .list-item-container:nth-child(even) {
	background-color: #26282e !important;
}

The alternating row colors only work with Solarized Dark for the time being. Somebody mentioned having a CSS color scheme specific to macOS, and I would really like to be able to use that instead!

Big Sur seems to use very subtle transparency for tinting. I looked into it, and Electron requires an API call for window transparency, so it can't be done with CSS alone. An additional advantage with window transparency is that perhaps the window wouldn't appear solid white while the application is loading.

[jamedeus]

Great work! The alternating colors is actually working fine for me on regular dark theme too.