# Feature idea: automatic dark/light theme switching according to OS

**URL:** <https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010>\
**Category:** Features\
**Created:** [20 February 2020 11:42 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010 "2020-02-20T11:42:39Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![gombosg](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/gombosg/32/2461_2.png) [@gombosg](https://discourse.joplinapp.org/u/gombosg)\
**Post date:** [20 February 2020 11:42 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/1 "2020-02-20T11:42:40Z")

</div>

Use case: as a user I switch dark/light OS themes often, maybe automatically. Mac OS has such a setting, Linux can be configured like that, too. I don’t want to manually switch dark/light themes in Joplin, but I’d like it to honor my OS setting.

This requires a setting to do that, plus 2 more settings for a default dark/light theme.

Other apps that support this are eg. Firefox and Visual Studio Code.

Electron [supports it](https://www.electronjs.org/docs/api/native-theme).  
I’m happy to start implementing it if we figure out UX.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [20 February 2020 11:48 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/2 "2020-02-20T11:48:12Z")

</div>

I guess below the "Theme" dropdown there could be checkbox:

> Automatically switch to dark/light theme according to OS settings

When it's on, it picks the Dark or Light theme accordingly.

---

<div class="post-metadata">

**Author:** ![gombosg](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/gombosg/32/2461_2.png) [@gombosg](https://discourse.joplinapp.org/u/gombosg)\
**Post date:** [20 February 2020 12:57 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/3 "2020-02-20T12:57:04Z")

</div>

It’s OK, as long as the user is fine with only the basic Dark/Light theme and not using some other theme. But it’s a good start, I agree.

Shall I have a try at it as a first contribution?

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [20 February 2020 13:19 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/4 "2020-02-20T13:19:28Z")

</div>

Sure, please go ahead.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [20 February 2020 14:17 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/5 "2020-02-20T14:17:08Z")

</div>

Let’s specify it a bit more. Are there any examples of existing apps that support system dark/light theme, but also have custom themes? How do they handle this? What you suggested would work, and I can think of other ways too, but I’m wondering if there’s some more or less accepted standard for this.

---

<div class="post-metadata">

**Author:** ![gombosg](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/gombosg/32/2461_2.png) [@gombosg](https://discourse.joplinapp.org/u/gombosg)\
**Post date:** [20 February 2020 14:32 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/6 "2020-02-20T14:32:21Z")

</div>

In Firefox: go to Customize and select the Default theme which switches automatically between the default dark and default light themes.  
In VS Code:

> Window: Auto Detect Color Scheme  
> If set, automatically switch to the preferred color theme based on the OS appearance

> Workbench: Preferred Dark Color Theme  
> Specifies the preferred color theme for dark OS appearance when 'window.autoDetectColorScheme' is enabled.

+ Same setting with light theme

So the simplest approach is to add a) a checkbox b) a theme in the theme list saying "Auto-select"

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [20 February 2020 15:02 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/7 "2020-02-20T15:02:11Z")

</div>

The VSCode solution sounds good to me. I think we could have three new controls:

- Auto Detect Theme (`theme.autodetect`): a checkbox
- Prefered Dark Theme (`theme.preferedDarkTheme`): dropdown with all the themes
- Prefered Light Theme (`theme.preferedLightTheme`): dropdown with all the themes

So you need three new setting values: `theme.autodetect`, `theme.preferedDarkTheme` and `theme.preferedLightTheme`.

When `theme.autodetect` is **true** , the `theme.preferedDarkTheme` and `theme.preferedLightTheme` dropdown are visible, and the “Theme” dropdown is hidden.

When `theme.autodetect` theme is **off** , the `theme.preferedDarkTheme` and `theme.preferedLightTheme` dropdown are hidden, and the “Theme” dropdown is visible.

Whenever the theme is auto-updated, the `theme` setting value should be set to the relevant theme ID.

---

<div class="post-metadata">

**Author:** ![gombosg](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/gombosg/32/2461_2.png) [@gombosg](https://discourse.joplinapp.org/u/gombosg)\
**Post date:** [21 February 2020 19:16 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/8 "2020-02-21T19:16:49Z")

</div>

After some testing, it turned out that this feature is broken on Linux, but may be repaired in the future.  
Also [doesn’t work on VS Code](https://github.com/microsoft/vscode/issues/91169) which uses `prefers-color-scheme` media query. I tested `nativeTheme` Electron API and it’s also broken.

It’s probably [this Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=998903). But still, it’s worth doing since it’ll work on Mac & Windows and Chromium may be fixed.

---

<div class="post-metadata">

**Author:** ![anon25789467](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@anon25789467](https://discourse.joplinapp.org/u/anon25789467)\
**Post date:** [24 February 2020 11:23 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/9 "2020-02-24T11:23:01Z")

</div>

Please add support for this feature for all platforms where Joplin is available (including Windows, Android, and iOS apps).

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [24 February 2020 11:30 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/10 "2020-02-24T11:30:12Z")

</div>

> [@gombosg](#):
>
> After some testing, it turned out that this feature is broken on Linux, but may be repaired in the future.  
> Also [doesn’t work on VS Code](https://github.com/microsoft/vscode/issues/91169) which uses `prefers-color-scheme` media query. I tested `nativeTheme` Electron API and it’s also broken.
> 
> It’s probably [this Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=998903). But still, it’s worth doing since it’ll work on Mac & Windows and Chromium may be fixed.

Yes that's fine. Unfortunately we have to disable some features now and then for Linux (desktop) as it's much harder to get things working on this platform.

---

<div class="post-metadata">

**Author:** ![xplosionmind](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/xplosionmind/32/2080_2.png) [@xplosionmind](https://discourse.joplinapp.org/u/xplosionmind)\
**Post date:** [9 April 2020 13:06 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/11 "2020-04-09T13:06:35Z")

</div>

A great option may also be to a add a settings button, or even a keyboard shortcut, to quickly toggle the dark/light theme. `userchrome.css` and `userstyle.css` may be split in `userchrome_light.css` + `userstyle_light.css` and `userchrome_dark.css` + `userstyle_dark.css`.

---

<div class="post-metadata">

**Author:** ![gombosg](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/gombosg/32/2461_2.png) [@gombosg](https://discourse.joplinapp.org/u/gombosg)\
**Post date:** [9 April 2020 13:39 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/12 "2020-04-09T13:39:20Z")

</div>

BTW a [PR](https://github.com/laurent22/joplin/issues/2665) is already underway, not by me though. 🙂

---

<div class="post-metadata">

**Author:** ![kowalskidev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/kowalskidev/32/2877_2.png) [@kowalskidev](https://discourse.joplinapp.org/u/kowalskidev)\
**Post date:** [9 April 2020 14:16 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/13 "2020-04-09T14:16:34Z")

</div>

Check this out: [Night Mode Button](https://discourse.joplinapp.org/t/night-mode-button/6581)

---

<div class="post-metadata">

**Author:** ![xplosionmind](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/xplosionmind/32/2080_2.png) [@xplosionmind](https://discourse.joplinapp.org/u/xplosionmind)\
**Post date:** [9 April 2020 14:48 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/14 "2020-04-09T14:48:12Z")

</div>

Thanks. I don’t think they’ll consider implementing another two different `userstyle.css` and `userchrome.css` files, though.

---

<div class="post-metadata">

**Author:** ![Yajo](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/yajo/32/8496_2.png) [@Yajo](https://discourse.joplinapp.org/u/Yajo)\
**Post date:** [22 November 2022 17:11 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/15 "2022-11-22T17:11:57Z")

</div>

Any idea on how to make this work fine on Linux? I use GNOME 43 and it's an standard option.

---

<div class="post-metadata">

**Author:** ![gombosg](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/gombosg/32/2461_2.png) [@gombosg](https://discourse.joplinapp.org/u/gombosg)\
**Post date:** [23 November 2022 21:40 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/16 "2022-11-23T21:40:37Z")

</div>

Hey, Joplin seems to be following the OS theme. I use the Night Theme Switcher extension to switch to dark theme after sunset.

---

<div class="post-metadata">

**Author:** ![Yajo](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/yajo/32/8496_2.png) [@Yajo](https://discourse.joplinapp.org/u/Yajo)\
**Post date:** [25 November 2022 09:16 UTC](https://discourse.joplinapp.org/t/feature-idea-automatic-dark-light-theme-switching-according-to-os/6010/17 "2022-11-25T09:16:47Z")

</div>

And have you tried without the extension? How did you install Joplin?