feat: sets the right theme color (for iPhones) (#483)

src/app.html

@@ -7,7 +7,6 @@
 		<link rel="apple-touch-icon" href="/images/icons/icon-192x192.png" />
 		<link rel="manifest" href="/manifest.json" />
 		<meta name="msapplication-TileColor" content="#da532c" />
-		<meta name="theme-color" content="#ffffff" />
 		<meta
 			name="viewport"
 			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover"

src/lib/stores/is-system-dark.ts

@@ -0,0 +1,11 @@
+import { browser } from '$app/environment'
+import { readable } from 'svelte/store'
+
+const isDarkQuery = browser && window.matchMedia('(prefers-color-scheme: dark)')
+
+export const isSystemDark = !isDarkQuery
+	? readable(false)
+	: readable(isDarkQuery.matches, (set) => {
+			isDarkQuery.onchange = (event) => set(event.matches)
+			return () => (isDarkQuery.onchange = null)
+	  })

src/lib/stores/theme.ts

@@ -1,13 +1,15 @@
 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<typeof darkModeSchema>
 
 interface Theme {
 	darkMode: DarkMode
 	baseColor: string
+	isDarkMode: boolean
 }
 
 interface ThemeStore extends Writable<Theme> {
@@ -28,7 +30,14 @@ function createThemeStore(): ThemeStore {
 	} catch (error) {
 		// this is fine
 	}
-	const store = writable<Theme>({ darkMode, baseColor })
+	const store = writable<Theme>({ darkMode, baseColor, isDarkMode: false })
+
+	isSystemDark.subscribe((isSystemDark) => {
+		store.update((theme) => ({
+			...theme,
+			isDarkMode: isSystemDark && theme.darkMode === 'system',
+		}))
+	})
 
 	return {
 		...store,

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
 

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> | void) => async () => {
@@ -82,6 +74,10 @@
 		}
 </script>
 
+<svelte:head>
+	<meta name="theme-color" content={$theme.isDarkMode ? '#000000' : '#ffffff'} />
+</svelte:head>
+
 <div class="root">
 	{#if $errorStore.length > 0}
 		{@const error = $errorStore[0]}