Joplin: Support automatic dark/light theme switching according to OS settings

[laurent22]

Joplin should honour the dark/light theme settings of the operating system.

Add the following settings to config screen:

• 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.

Related to: https://discourse.joplinapp.org/t/night-mode-button/6581

[Rishabh-malhotraa]

I'm working on it!

[anjulalk]

I'm working on it!

Hey, are you working on the mobile app or desktop? I'd like to implement this on the desktop application.

[raghavg27]

did anyone get this done?

[Rishabh-malhotraa]

did anyone get this done?

I'm working on it @raghavg27

[kowalskidev]

@Rishgod are you still working on it? would you mind if I work on this issue.

[kowalskidev]

After working for 3 days I able to add autodetectcheckbox and two other drop downs based on selected checkbox and also able to detect operating system theme.
Now the issue I'm facing is I unable to save changes made on 'public' property of all three drop downs after saving configuration when I restart app the public property set to it's default values. There's no function for setting public value like setValue() for changing values.

I tried making new function similar to setValue() i.e. setPublic()but it return some SQLITE error!
please help me how to change public property and save it state

There's also show property in metadata I didn't get what show property does? please enlighten me.

[kowalskidev]

Finally I have fixed this issue.
@laurent22 I have one doubt, Do we need dark mode button like mention here ? Night Mode Button because as you mentioned in the issue

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.

if we are adding Dark Mode button then are we providing this options for Dark mode button or Auto Detect checkbox or both?

[kowalskidev]

@laurent22 I have one question: By clicking on Auto Detect checkbox how can we notify the user about detected theme? whether detected theme is dark or light?
Here I thought that we can show only one option based on detected theme like if detected theme is dark we only show Preferred Dark Theme drop down and vice-versa.

Any other solution?

[xplosionmind]

There is a further improvement which could be made to implement this: along with the option to follow system light/dark theme, a button to arbitrarily switch between dark theme and light theme could be added.

This improvement is further described on the Discourse Forum

[kowalskidev]

There is a further improvement which could be made to implement this: along with the option to follow system light/dark theme, a button to arbitrarily switch between dark theme and light theme could be added.

This improvement is further described on the Discourse Forum

Did you mean NIGHT MODE BUTTON which toggle between dark theme and light theme?
If So, then it's already implemented in my PR though 😉

[xplosionmind]

If So, then it's already implemented in my PR though 😉

Yeah I meant this. I love you. I didn't read this issue comments well enough.

How about userchrome.css and userstyle.css? Are they going to be splitted in two, the dark and the light ones, or who customizes them can't toggle between light and dark mode?

[kowalskidev]

How about userchrome.css and userstyle.css? Are they going to be splited in two, the dark and the light ones, or who customize them can't toggle between light and dark mode?

Yeah that's a very good question I didn't thought about it, I'll try to add USERCHROME AND USERSTYLE theme option in Preferred Light Theme and Preferred Dark Theme drop downs respectively that way you'll be able to toggle between light and dark mode. But before that, let's wait for Laurent's opinion

[xplosionmind]

that way you'll be able to toggle between light and dark mode. But before that, let's wait for Laurent's opinion

That would be wonderful. Thanks a lot!