search

eddiesigner / liebling

Beautiful and clean Ghost theme that is easy and comfortable to use. To get the latest version please head over the releases page 👉🏼
https://github.com/eddiesigner/liebling/releases
MIT License
1.25k stars 597 forks source link

data-theme being set on page load, preventing prefers-color-scheme from changing theme #454

Closed gradiian closed 2 years ago

gradiian commented 2 years ago

On initial page load, the html tag has data-theme="dark" set which prevents prefers-color-scheme from being able to change themes automatically. If I manually set it to an empty value: <html data-theme="">, the theme changes based on the system's theme until it's been overridden by the manual toggle.

eddiesigner commented 2 years ago

This is actually the desired behaviour, as soon as you set the theme by pressing the dark mode toggle a setting is saved in local storage in order to persist your preference, thus prefers-color-scheme is ignored.

When the page loads the theme checks if a mode preference is stored locally, if it finds it then applies the correct mode based on that value. If there is no preference stored then the mode changes automatically according to the prefers-color-scheme system preference.

eddiesigner commented 2 years ago

I will close this issue for now, please feel free to open another one if needed.