glanceapp / glance

A self-hosted dashboard that puts all your feeds in one place
GNU Affero General Public License v3.0
7.62k stars 269 forks source link

Feature request: Auto switch dark/light mode themes based on OS #55

Open nickian opened 4 months ago

nickian commented 4 months ago

It would be nice to be able to set two themes, one for the OS light mode and one of OS dark mode and autoswitch based on OS state. Something like:

theme-dark:
  background-color: 240 21 15
  contrast-multiplier: 1.2
  primary-color: 217 92 83
  positive-color: 115 54 76

theme-light:
  background-color: 0 0 95
  primary-color: 0 0 10
  negative-color: 0 90 50

Using CSS like this:

@media (prefers-color-scheme: dark) {
    ...
}
svilenmarkov commented 4 months ago

Hey, thanks for the idea!

I've actually been thinking about adding the ability to set theme presets and then being able to switch between them from the UI so you don't have to annoyingly restart Glance to change your theme. I don't have an ETA for that yet but whenever it does get implemented I'll be able to also add the ability to switch the scheme automatically based on OS preference.

As a hacky workaround until then, you could add custom CSS file that modifies the root variables:

/* or dark, so long as it's the opposite of what your default theme is */
@media (prefers-color-scheme: light) {
    :root {
        /* required for the text to appear correctly on a light scheme */
        /* set to "--scheme: ;" for dark scheme */
        --scheme: 100% -; 
        --bgh: 240; /* background hue */
        --bgs: 8%; /* background saturation */
        --bgl: 9%; /* background lightness */
        --cm: 1; /* contrast multiplier */
        --tsm: 1; /* text saturation multiplier */
        --color-primary: hsl(43, 50%, 70%); /* defaults, feel free to change */
        --color-positive: var(--color-primary); /* defaults, feel free to change */
        --color-negative: hsl(0, 70%, 70%); /* defaults, feel free to change */
    }
}
nickian commented 3 months ago

I decided to create a different solution for the time being. If anyone else is interested, it's here now:

https://github.com/nickian/Glance-Theme-Switch