From eec81aa1bf1ec03a4ac5ab8e433a8107e86956aa Mon Sep 17 00:00:00 2001 From: Jess Martin Date: Wed, 24 Aug 2022 16:17:03 -0400 Subject: [PATCH] Dark mode toggle (#36) * Add dark and light mode icons * Respect user's OS preferences, unless they toggle manually Co-authored-by: Brian Ginsburg <7957636+bgins@users.noreply.github.com> --- src/app.html | 2 +- src/components/Header.svelte | 24 ++++++++++++++++++++++-- src/components/icons/DarkMode.svelte | 16 ++++++++++++++++ src/components/icons/LightMode.svelte | 16 ++++++++++++++++ src/lib/theme/index.ts | 7 ++++++- src/routes/__layout.svelte | 7 +------ 6 files changed, 62 insertions(+), 10 deletions(-) create mode 100644 src/components/icons/DarkMode.svelte create mode 100644 src/components/icons/LightMode.svelte diff --git a/src/app.html b/src/app.html index 56409d4..8b5a642 100644 --- a/src/app.html +++ b/src/app.html @@ -37,6 +37,6 @@ -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/src/components/Header.svelte b/src/components/Header.svelte index 5f05ed5..0073457 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -1,8 +1,16 @@
@@ -24,10 +32,22 @@ + + {#if $theme === 'light'} + setTheme('dark')}> + + + {:else} + setTheme('light')}> + + + {/if} + + {#if !$sessionStore.loading} {#if !$sessionStore.authed}
- + Connect
diff --git a/src/components/icons/DarkMode.svelte b/src/components/icons/DarkMode.svelte new file mode 100644 index 0000000..35e3df6 --- /dev/null +++ b/src/components/icons/DarkMode.svelte @@ -0,0 +1,16 @@ + + + + diff --git a/src/components/icons/LightMode.svelte b/src/components/icons/LightMode.svelte new file mode 100644 index 0000000..73dcfd9 --- /dev/null +++ b/src/components/icons/LightMode.svelte @@ -0,0 +1,16 @@ + + + + diff --git a/src/lib/theme/index.ts b/src/lib/theme/index.ts index 8ffa1ce..4c618ff 100644 --- a/src/lib/theme/index.ts +++ b/src/lib/theme/index.ts @@ -4,7 +4,12 @@ export type Theme = 'light' | 'dark' export const loadTheme = (): Theme => { if (browser) { - return (localStorage.getItem('theme') as Theme) ?? 'light' + const browserTheme = localStorage.getItem('theme') as Theme + const osTheme = window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light' + + return browserTheme ?? (osTheme as Theme) ?? 'light' } } diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 87c1fc1..3d361dd 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -5,17 +5,12 @@ import { appName } from '$lib/app-name' import { initialize } from '$lib/common/webnative' import { deviceStore, sessionStore, theme } from '../stores' - import { storeTheme } from '$lib/theme' import { errorToMessage, type Session } from '$lib/session' import Toast from '$components/notifications/Toast.svelte' import Header from '$components/Header.svelte' let session: Session = null - theme.subscribe(val => { - storeTheme(val) - }) - sessionStore.subscribe(val => { session = val }) @@ -50,7 +45,7 @@ -
+
{#if session.error}