Custom CSS disappears when system switches to / from dark mode

[752986]

Operating system

Linux

Joplin version

3.0.15

Desktop version info

Joplin 3.0.15 (prod, linux)

Client ID: 4416a18efe8f4a1880fa76f17bd712db
Sync Version: 3
Profile Version: 47
Keychain Supported: No

Function Plot: 1.0.0
Templates: 2.4.0

Current behaviour

I have a userstyle.css that just changes the font and tweaks some spacing. Whenever I switch my system to or from dark / light mode (using Koi on KDE Plasma), Joplin switches to the appropriate theme, but my styling is lost and the font reverts back to default. Closing and re-opening Joplin restores the expected custom styles.

Before switching (userstyle.css correctly applied):

After switching (note the different font, most noticeable on the 3, a, and l):

Expected behaviour

I expected Joplin to retain my userstyle.css customizations when switching to or from dark mode.

Logs

No response

[tomasz1986]

It would be helpful if we could see the actual CSS code though 😅.

I've seen a similar problem on the forum, and my intuition tells me that you simply need to add !important to your custom styles. This should prevent them from being overridden when switching themes.

[752986]

Sure, here's my CSS:

/* For styling the rendered Markdown */
body {
    font-family: "Inter";
    font-feature-settings: "cv01" on, "cv05" on, "cv08" on, "cv09" on;
}

table td, table th {
    font-family: "Inter" !important;
    font-feature-settings: "tnum" on, "cv01" on, "cv05" on, "cv08" on, "cv09" on !important;
}

code, pre {
    font-family: "Fragment Mono";
}

.katex-display {
    font-size: 1rem;
}

/* bigger math newlines to avoid fractions crashing into each other */
.katex .katex-html>.newline {   
    display: block;
    padding-bottom: 0.8em;
}

@media print {
    /* break on h1s when exporting to pdf */    
    h1:not(:nth-of-type(1)) {
        page-break-before: always;
        break-before: always;
    }

    /* allow breaks in long multiline math, otherwise keep paragraphs together */
    p:not(:has(.katex .newline)) {
        break-inside: avoid;
    }
}   

Yes putting !important after every line does work as a workaround, but that doesn't seem like it should be necessary. Ideally Joplin would bring user styles to the top whenever its own styles change. I'm not familiar with the structure of Joplin's code though, so I don't know how hard that is to implement.