Use system preference for light/dark theme

[ghost]

I do not use the forum so I will try to write here. I hope they will understand me.

In Tutanota there is a light and dark theme, it would be great if you could configure the function in the settings so that the themes change automatically depending on the time on the computer or the user's time zone.

Thanks.

[jowlo]

For web client see prefers-color-scheme.

[jowlo]

I think we should not switch between light and dark mode based on the system time but only based on system preference.

At least for android i know that it is quite easy to switch the system wide dark/light preference based on time (or sunset) and we would then change in the app as well.

[charlag]

You can configure in your system when its daytime and when it's not. We should not implement our logic, I agree completely.

[rightsaidfred99]

I'd hope this would be a simple addition to ad!

Majority of apps and websites now support automatic switching of day and night mode based on system prefs. Surely this would be like a few lines of code as already the backbone of the day and night theme is there!

Would be a good update and easy one :)

At the very least, Whitelabel users should be able to add in custom css code even

.day { background: #eee; color: black; } .night { background: #333; color: white; }

@media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } }

@media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } }

.day, .night { display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle; }

[charlag]

@rightsaidfred99 I also want to have it but it's more complicated than a few lines. We need a new preference value for selected theme and we need to have detection in the native part of each app.

[rightsaidfred99]

@rightsaidfred99 I also want to have it but it's more complicated than a few lines. We need a new preference value for selected theme and we need to have detection in the native part of each app.

I don't understand, isn't Tutanota a web interface so basically CSS can be used for theming?

Why would it not be possible to use this so that the client has system ui as light and Tutanota defaults to red/light UI and when client has system ui to dark, Tutanota uses default dark UI?

prefers-color-scheme.

This would work, Mac, Windows, android etc...surely?

[charlag]

We do generate css programmatically so it's not as easy as just applying a bit of CSS.

In addition we have:

• 2 light themes
• whitelabel themes (which are handled in web and apps)
• whitelabel theme editor (which applies the theme only whilte editing)
• mobile/desktop apps (which also make use of colors although this could be changed slightly but they also need to use some system API to query dark theme status)
• we need to introduce another preference, codify it into UI and change our already not so simple theming model

This is a desirable feature but it's not three lines, it never is.

[bufothefrog]

In some other applications (also Electron) the selection of system theme in the theme menu defaults to the regular light/dark theme (which imo is a good enough v1) or allows you to choose two separate ones for light/dark.

[Magical898]

Can you also apply dark css for the content of the email (similar to darkreader browser extension)? Html emails are often sent by companies and those burn eyes because there is no dark mode.

[WannabeSmith]

Any update on this one? Most Android/iOS apps automatically adapt to the system theme, and it'd be great to not have to switch the theme manually each day.

Thanks to the devs for all that you do! ❤️

[charlag]

It is scheduled so hopefully it's not too far

[kib42]

Login on Android is randomly stuck at "offline" for about 5s. Regardless of whether theme is set to "System".

[jm355]

On Linux, where does tutanota read the preferred theme? I switch to dark mode with

gsettings set org.gnome.desktop.interface color-scheme 'prefer-dark'
gsettings set org.gnome.desktop.interface gtk-theme Adwaita-dark

but tutanota doesn't seem to respect the theme. Is there something else I should set? I skimmed the code but must've missed how it actually gets the theme. I know the preferred theme is visible to electron apps because signal desktop switches with the theme

[ganthern]

@jeremiah-miller If you haven't already, you also need to set the "System" option in Settings -> Appearance -> Switch Color Theme, then it should work.

[jm355]

Yep, it's set to "System"

[ganthern]

that sounds like a bug then. the relevant code for the preference is in the ThemeController.ts file for the web renderer and the DesktopThemeFacade.ts for the node side of the equation. If you can make an issue with your setup and repro steps, we'll take a look at it.

[jm355]

Created #5886