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.
I’m happy to start implementing it if we figure out UX.
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.
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?
Sure, please go ahead.
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.
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"
The VSCode solution sounds good to me. I think we could have three new controls:
theme.autodetect): a checkboxtheme.preferedDarkTheme): dropdown with all the themestheme.preferedLightTheme): dropdown with all the themesSo 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.
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 which uses prefers-color-scheme media query. I tested nativeTheme Electron API and it’s also broken.
It’s probably this Chromium bug. But still, it’s worth doing since it’ll work on Mac & Windows and Chromium may be fixed.
Please add support for this feature for all platforms where Joplin is available (including Windows, Android, and iOS apps).
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.
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.
Thanks. I don’t think they’ll consider implementing another two different userstyle.css and userchrome.css files, though.
Any idea on how to make this work fine on Linux? I use GNOME 43 and it's an standard option.
Hey, Joplin seems to be following the OS theme. I use the Night Theme Switcher extension to switch to dark theme after sunset.
And have you tried without the extension? How did you install Joplin?
