Set dark theme even for login screen

[kevinpapst]

Discussed in #4687

^{Originally posted by TheZoker March 7, 2024}
Hi there,

I noticed, that only after I log in, the theme switches to a dark theme.
How can I set the application to have the dark theme by default and therefore also use it on the login screen?

Thanks!

[silverwind]

Should have three themes: dark,light,auto. Default to auto which derives its initial value from prefers-color-scheme. Auto theme could be as simple as

@import "./light.css" (prefers-color-scheme: light);
@import "./dark.css" (prefers-color-scheme: dark);

[kevinpapst]

Thanks @silverwind - I'd wish developer life would ever be as easy as it seems at the first glance 😁

[joho1968]

For what it's worth, in some of the "dashboard" like applications I've been writing lately, I've added a display mode switch like toggle in the upper right hand corner, it will, apart from actually switching the theme, also set a cookie. The cookie overrides whatever the user's preference is set to, allowing them to use dark mode on some clients, light mode on others, and whatever they have configured as the default.

Which means I also add an event listener like so:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);