Share your CSS

Lounge
337

I'm using Stylus addon on Firefox to style websites using CSS and it's possible to set different variable values depending on the OS theme like this:

@media (prefers-color-scheme: light) {
    /* light theme colors */
    :root {
        --bg-color: white;
    }
}

@media (prefers-color-scheme: dark) {
    /* dark theme colors */
    :root {
        --bg-color: black;
    }
}

/* ... */

div#joplin-container-content {
    background-color: var(--bg-color) !important;
}

I've been trying to do the same thing in Joplin because currently, my userchrome.css and userstyle.css contain hardcoded color values for dark theme, so changing OS theme to light makes Joplin look difficult to use (dark background on dark text etc). Is it possible to use prefers-color-scheme or something similar in userchrome.css and userstyle.css to set separate colors for dark and light themes?

I've seen a discussion on a similar thing, but there hasn't been much progress: