Userchrome.css overridden by built-in themes

[almgh]

Operating system

Windows

Joplin version

2.13.14

Desktop version info

Joplin 2.13.14 (prod, win32)

Client ID: 5a6184dc2f95484ca2570128ff551197
Sync Version: 3
Profile Version: 44
Keychain Supported: Yes

Revision: 174c5f4

What issue do you have?

I'm facing an issue with customizing Joplin's appearance using userchrome.css/userstyle.css.

Despite following recommended steps and clearing the cache, my custom styles are not applied, and default themes override them regardless of which one I pick or activating/deactivating "Automatically switch theme to match system theme".

What I've Tried:

Verified userchrome.css location (which is C:\Users[my username].config\joplin-desktop)
Cleared Joplin cache by deleting the cache folder in above location
Swapped to every built-in theme and restarted Joplin by killing it with Ctrl+Q and/or killed all its processes in the activity manager
Deleted the Joplin settings file in above location and started from scratch

Themes I've tried:

My account is new, so I can't link, but I've tried every single theme listed in the awesome-joplin GitHub repository without success. In some cases I've seen changes to the text in the side panels, but that's pretty much it.

How can I get Joplin to stop ignoring the built-in themes and use what's specified in userchrome.css and userstyle.css? Has anyone else encountered and resolved this?

[dpoulton]

@almgh welcome to the forum.

The files userchrome.css and userstyle.css are loading into Joplin when it starts. So if you add css code to them ensure that Joplin is fully quit (File > Quit) and restarted to allow the css code to have an effect.

That being said it does appear that in some cases Joplin will read css information for parts of the interface after userchrome.css, so it overwrites the changes you have made. That is why you see the code !important being used in some css examples on this forum. It gives that particular piece of css a priority that does not allow it to be later overridden. For instance I do not use the Rich Text Editor so I wanted to hide the Markdown/Rich Text Editor button. The code:

button[title="Toggle editors"] {
    display: none;
}

should do that, but it doesn't. However using:

button[title="Toggle editors"] {
    display: none !important;
}

does.

[almgh]

I have absolutely no idea why it wasn't working. I kept doing what I had already done for a while, and suddenly Joplin decided to parse my userchrome.css. Thanks anyway!