From bbb3bbe5ffabae6e20a32186aff122bf216920db Mon Sep 17 00:00:00 2001 From: Dallas Hoffman Date: Sun, 1 Oct 2023 17:55:03 -0400 Subject: [PATCH] ThemeStore adjustments --- src/lib/stores/theme.ts | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts index 69fb865..d42accf 100644 --- a/src/lib/stores/theme.ts +++ b/src/lib/stores/theme.ts @@ -1,4 +1,4 @@ -import { writable, type Readable } from 'svelte/store'; +import { writable, type Readable, get } from 'svelte/store'; export type Theme = 'light' | 'dark'; @@ -8,22 +8,29 @@ export class ThemeStore implements Readable { (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') ); - constructor() { - const themeMetaTag = document.querySelector('meta[name="theme-color"]'); + readonly themeColor: Record = { + light: '#fbfbfc', + dark: '#18232c', + }; - this.theme.subscribe((newTheme) => { - document.documentElement.dataset.theme = newTheme; - localStorage.setItem('theme', newTheme); - themeMetaTag?.setAttribute('content', newTheme === 'dark' ? '#18232c' : '#fbfbfc'); - }); + constructor() { + this.apply(get(this.theme)); } + private apply = (theme: Theme) => { + const themeMetaTag = document.querySelector('meta[name="theme-color"]'); + document.documentElement.dataset.theme = theme; + localStorage.setItem('theme', theme); + themeMetaTag?.setAttribute('content', this.themeColor[theme]); + }; + subscribe = this.theme.subscribe; - set = this.theme.set; toggle = () => { this.theme.update((currentTheme) => { - return currentTheme === 'dark' ? 'light' : 'dark'; + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + this.apply(newTheme); + return newTheme; }); }; }