feat: support `prefers-color-scheme` - Githubissues

josefaidt / svelte-themer

A theming engine for your Svelte apps using CSS Variables, persisted.

https://svelte-themer.vercel.app/

MIT License

140 stars 14 forks source link

feat: support `prefers-color-scheme` #15

Closed josefaidt closed 3 years ago

josefaidt commented 3 years ago

Support prefers-color-scheme with window.matchMedia() to determine user theme on first visit.

Current Behavior:

on visit, active theme choice is decided by

local storage (if exists)
fallback to first theme in themes array

Proposed Behavior:

on visit, active theme choice is decided by

local storage (if exists)
prefers-color-scheme choice (will be light or dark and themes should have a palette with one of these names)
fallback to first theme in themes array

Changes

add new prop to disable proposed behavior, something like disablePrefersColorScheme? Forcing the new behavior may cause unwanted UX adjustments
add test to prove new behavior and prop are working as intended

josefaidt commented 3 years ago

@dysfunc thoughts on the proposed prop to disable the new behavior?