# Share your CSS

**URL:** <https://discourse.joplinapp.org/t/share-your-css/1730>\
**Category:** Lounge\
**Tags:** tips-and-tricks\
**Created:** [28 February 2019 15:51 UTC](https://discourse.joplinapp.org/t/share-your-css/1730 "2019-02-28T15:51:09Z")\
**Posts on this page:** 1\
**Showing post:** 337

<div class="post-metadata">

**Author:** ![chupa](https://avatars.discourse-cdn.com/v4/letter/c/bbce88/32.png) [@chupa](https://discourse.joplinapp.org/u/chupa)\
**Post date:** [18 December 2021 11:17 UTC](https://discourse.joplinapp.org/t/share-your-css/1730/337 "2021-12-18T11:17:00Z")

</div>

I'm using [Stylus addon](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) on Firefox to style websites using CSS and it's possible to set different variable values depending on the OS theme like this:

```auto
@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](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/11) on a similar thing, but there hasn't been much progress:

---

_[View the full topic](https://discourse.joplinapp.org/t/share-your-css/1730)._