diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Forecast/ForecastDrawer.svelte | 2 | ||||
| -rw-r--r-- | src/stores.ts | 17 |
2 files changed, 17 insertions, 2 deletions
diff --git a/src/components/Forecast/ForecastDrawer.svelte b/src/components/Forecast/ForecastDrawer.svelte index 0fdab29..16ed509 100644 --- a/src/components/Forecast/ForecastDrawer.svelte +++ b/src/components/Forecast/ForecastDrawer.svelte @@ -19,7 +19,7 @@ height: 100%; overflow: hidden; align-self: stretch; - box-shadow: 0px -6px 7px 0px black; + box-shadow: var(--elevation-1-shadow); } @media (min-width: 640px), (min-height: 720px) { diff --git a/src/stores.ts b/src/stores.ts index 16dc03e..468efca 100644 --- a/src/stores.ts +++ b/src/stores.ts @@ -1,6 +1,21 @@ -import { writable, readable } from 'svelte/store'; +import { writable, readable, get } from 'svelte/store'; +// Choose dark or light mode. export const theme = writable('light'); +function check_system_theme() { + if (typeof window === "undefined") { return; } + let system_theme = window.matchMedia("(prefers-color-scheme:dark)").matches ? "dark" : "light"; + if (system_theme != get(theme)) { theme.set(system_theme); } +} +setInterval(check_system_theme, 1000); +theme.subscribe(value => { + if (typeof window === "undefined") { return; } + if (value == "dark") { + window.document.body.classList.add("dark"); + } else { + window.document.body.classList.remove("dark"); + } +}); /* * the different data sources are |