diff --git a/src/app.html b/src/app.html index e225a622..b4b79873 100644 --- a/src/app.html +++ b/src/app.html @@ -7,7 +7,6 @@ - { + isDarkQuery.onchange = (event) => set(event.matches) + return () => (isDarkQuery.onchange = null) + }) diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts index 1ccdbdcf..4367053f 100644 --- a/src/lib/stores/theme.ts +++ b/src/lib/stores/theme.ts @@ -1,6 +1,7 @@ import { getFromLocalStorage, saveToLocalStorage } from '$lib/adapters/utils' import { writable, type Writable } from 'svelte/store' import { z } from 'zod' +import { isSystemDark } from './is-system-dark' const darkModeSchema = z.enum(['dark', 'light', 'system']) export type DarkMode = z.infer @@ -8,6 +9,7 @@ export type DarkMode = z.infer interface Theme { darkMode: DarkMode baseColor: string + isDarkMode: boolean } interface ThemeStore extends Writable { @@ -28,7 +30,14 @@ function createThemeStore(): ThemeStore { } catch (error) { // this is fine } - const store = writable({ darkMode, baseColor }) + const store = writable({ darkMode, baseColor, isDarkMode: false }) + + isSystemDark.subscribe((isSystemDark) => { + store.update((theme) => ({ + ...theme, + isDarkMode: isSystemDark && theme.darkMode === 'system', + })) + }) return { ...store, diff --git a/src/lib/utils/color.ts b/src/lib/utils/color.ts index 23280cae..4628757a 100644 --- a/src/lib/utils/color.ts +++ b/src/lib/utils/color.ts @@ -1,6 +1,5 @@ import { getClosestColor, hexToRgb } from '@waku-objects/luminance' import { browser } from '$app/environment' -import type { DarkMode } from '$lib/stores/theme' interface Color { name: string @@ -70,10 +69,9 @@ const lightColorsVars: Color[] = [ }, ] -export function changeColors(baseColor: string, darkMode: DarkMode, isSystemDark: boolean) { +export function changeColors(baseColor: string, isDarkMode: boolean) { if (!browser) return - const isDarkMode = darkMode === 'dark' || (darkMode === 'system' && isSystemDark) const colors = isDarkMode ? darkColorVars : lightColorsVars const colorsToRemove = isDarkMode ? lightColorsVars : darkColorVars diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index ab2da3ae..f9695e95 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -24,9 +24,6 @@ let unsubscribeWalletStore: (() => void) | undefined = undefined let unsubscribeExchangeStore: (() => void) | undefined = undefined let loading = true - let error: string | undefined = undefined - let isDarkQuery: MediaQueryList - let isSystemDark: boolean | undefined onMount(async () => { unsubscribeWalletStore = walletStore.subscribe(({ wallet }) => { @@ -60,11 +57,6 @@ }) } loading = false - - isDarkQuery = window.matchMedia('(prefers-color-scheme: dark)') - isDarkQuery.onchange = (event) => { - isSystemDark = event.matches - } }) onDestroy(() => { @@ -73,7 +65,7 @@ if (unsubscribeExchangeStore) unsubscribeExchangeStore() }) - $: changeColors($theme.baseColor, $theme.darkMode, isSystemDark ?? isDarkQuery?.matches) + $: changeColors($theme.baseColor, $theme.isDarkMode) const resolveError = (error: ErrorDescriptor, handler: () => Promise | void) => async () => { @@ -82,6 +74,10 @@ } + + + +
{#if $errorStore.length > 0} {@const error = $errorStore[0]}