Share your CSS

[uar]

Here is my userchrome, I mostly managed to get all the classes looking at the code from @uxamanda

/* VARIABLES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

:root {
	--Menu-background: #A3A79F;
	--Sidebar-background: #2E3033;
	--Editor-background: #363B40;

	--light: #dedede;
}


/* MAIN MENU ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.editor-toolbar .button {
    height: 40px !important;
}

.header {
	background-color: var(--Sidebar-background) !important;
	border-bottom: 2px solid var(--light) !important;
}

/* BUTTONS */

/* new notebook */
.header>*:nth-child(5) {
	order: 1;
}

/* new note */
.header>*:nth-child(3) {
	order: 2;
}

/* new todo */
.header>*:nth-child(4) {
	order: 3;
	display: none !important;
}

/* toggle sidebar */
.header>*:nth-child(1) {
	order: 4;
	margin-left: 24px !important;
}

/* toggle notebooks */
.header>*:nth-child(2) {
	order: 5;
}

/* Code view */
.header>*:nth-child(6) {
	order: 6;
	display: none !important;
}

/* layout */
.header>*:nth-child(7) {
	margin-left: 24px !important;
	order: 7;
}

/* search */
.header>*:nth-child(8) {
	position: absolute;
	top: 3px;
	right: 0px;
	width: 300px;
	order: 8;
}



/* SIDEBAR ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.side-bar {
    background-color: var(--Sidebar-background) !important;
}

/* tags */
.side-bar>*:nth-child(1)>*:nth-child(4) {
	display: none !important;
}

/* Note counters */
.list-item div {
    margin-left: auto !important;
    padding-right: 13px !important;
    opacity: 0.3 !important;
}



/* NOTE LIST ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.note-list {
	padding-top: 5px !important;
}



/* NOTE MENU HEADER ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.editor-toolbar {
    border-bottom: 0px !important;
}


/* MARKDOWN EDITOR ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.ace_content {
	border-right: 1px solid #000 !important;
	background-color: var(--Editor-background) !important;
}

.ace_heading {
	font-weight: bold;
	text-transform: uppercase;
	color: var(--white) !important;
}

It only modifies a few things regarding color, it’s not a full theme declaration, so works best by selecting the Dark Mode and adding this to your CSS.

Besides that, it does a few minor tweaks to margins, reposition the note counters, and remove a few items from the menu that I don’t use.

What I could not figure out, is how to change the blue highlight color for the menu buttons and the notebook selection.
Also, I would love to remove the forth and back arrow buttons as well as the tag button from the editor menu.
Moving the Info button beside the note title would be great, but I guess that is out of the CSS limits.

Any ideas about which classes should I point to?

[uxamanda]

Very cool, uar!

At the moment, I have not found a way to target the selected state of the notebook from CSS. I just made a request for the same, since I’d like to change that as well (See: Cleaner design of the sidebar?)

You can target the menu highlight with:

.editor-toolbar .button:not(.disabled):hover, .header .button:not(.disabled):hover{
 background-color: orange !important;
 border: 1px solid orange !important;
}

For the back and forth and tag button, you can remove them by:

#react-root>div>div>div:last-child>div>div>.editor-toolbar a:nth-child(1), #react-root>div>div>div:last-child>div>div>.editor-toolbar a:nth-child(2), #react-root>div>div>div:last-child>div>div>.editor-toolbar a:nth-child(5){
	display: none !important
}

You can see I’m counting the number of buttons in the row to target them, so keep an eye on this. New versions might have a different number of buttons.

As for the info button, I agree, I am not sure how to do this with CSS.

Hope that helps!

[uar]

That was very helpful! Thanks!
I managed to move the Info button and completely remove the extra line.

#react-root>div>div>div:last-child>div>div>.editor-toolbar a:nth-child(3){
	position: absolute;
	top: 70px;
	right: 0px;
}

Here is a shot of it, with a few items removed and the minor color tweaks, which for my use-case is perfect.

[Rolograaf]

Amanda, as a feature request, would you be willing to add a user setting in the variables, so the icons are twice the size? My old eyes and fast mouse are having issues…

to get something like this

thanks
Lourens

[uxamanda]

Yep, good idea! Just did some refactoring in V0.8, so now you can adjust font size and icon size. Now headers are relative to those sizes as well.

    --font-size: var(--base-size-13);
    --icon-size: var(--font-size);

Thanks for the suggestion.

[xplosionmind]

@uxamanda

At the moment, I have not found a way to target the selected state of the notebook from CSS. I just made a request for the same, since I’d like to change that as well (See: Cleaner design of the sidebar? )

I lost so much time trying to make this customization work... thanks a lot!

[xplosionmind]

Hello everybody, I waited a long time before posting, I started following this thread almost since its beginning and I followed suggestions and tweaks written here to improve my Joplin app styling.

Now, the time has come:

this is the GitHub repository with my userchrome.css and my userstyle.css.

I’m very thankful to @uxamanda and @tessus, who are the ones whose stylesheets inspired me the most.

My custom design is thought to be totally black and without any borders. Here are a few screenshots:

Please tell me what you think and give me an heads-up if you’re gonna use my theme! Just for me to be proud somebody enjoys my design so much he/she uses it him/herself.

Thanks a lot again, proud to be part of this community.

Have a nice day!
Tommi

[uxamanda]

Nice work! Love the all black, tempted to test that out. Also like the placement of your search bar, makes a lot of sense.

[inkspreads]

Can someone please let me know how to increase the font size and change the font family of everything in the sidebar. I tried many ways, but I could only change the font size and family of the notes counter in the side bar.

@uxamanda

Will you be able to help me?

Any help is much appreciated.

[xplosionmind]

Thanks a lot! If you do test it, please share your impressions! Cheers

[uxamanda]

@inkspreads Tested this on the base dark theme. The first two definitions affect the Notebook list, the last definition is for the notes list. Hope that helps!

.side-bar div {
    font-size: 20px !important;
}

a.list-item {
    font-size: 20px !important;
}


.list-item-container a {
    font-size: 20px !important;
}

[uxamanda]

It looks nice installed! I like the condensed font, especially on a smaller display. I don’t have the same fonts installed, so the rendered markdown doesn’t look as slick as yours. I also see a different color black for the markdown. I am on 1.0.218, so maybe that is why.

[pat3]

Here my reports, as you ask.
I’d like better a deep grey background color ( that could be very deep, like #111) than a totally black, that seems to be more readable to me. And I don’t really understand why using capitals in the bars; not really good to read.

[pat3]

Very fancy, and seems to remain readable too. Good !

[inkspreads]

Thanks @uxamanda ! It works.
Gotta start digging on CSS soon I guess.

[xplosionmind]

Inter is an awesome font I fell in love with. I suggest you to try it, you’ll probably never abandon it!

I understand totally black background may be a bit too much, maybe I’ll swap it with the default MacOS dark grey for the dark theme. Does anyone know what exact shade is it? I looked up on this page, but I found only the accent colors…

Thanks a lot!

[xplosionmind]

I’m a capital titles enthusiast, btw I don’t remember adding text-transform: uppercase to the sidebars, it’s me who writes in capitals every note and folder title.

About the background, I shared my thoughts about it here

Thanks for the feedback.

[pat3]

As the shared CSS amount increased, it would be great to improve the way to choose beetwen them in the app: first to keep them instead of replace them with the new one, and second to pick one in a list, with at least a preview on the list, or best, an app preview before choosing.
Do you think it could be hard to implement ?

[uxamanda]

Is #252525 the one you are looking for?

[xplosionmind]

Actually, I updated my Joplin theme repo with Mac-like colors, that I tried to get by myself. I’ll see if with Big Sur something changes (I expect it will)