improve settings handling

Author: refact0r

index.html

@@ -11,7 +11,7 @@
                 const defaultTheme = '__DEFAULT_THEME__'
 
                 try {
-                    const stored = localStorage.getItem('themeSettings')
+                    const stored = localStorage.getItem('settings')
                     let themeName = defaultTheme
                     if (stored) {
                         const parsed = JSON.parse(stored)

src/App.svelte

@@ -1,26 +1,44 @@
 <script>
     import '@fontsource-variable/geist-mono'
     import { settings } from './lib/settings-store.svelte.js'
+    import { themes } from './lib/themes.js'
     import Clock from './lib/components/Clock.svelte'
     import Links from './lib/components/Links.svelte'
     import Settings from './lib/components/Settings.svelte'
     import Stats from './lib/components/Stats.svelte'
     import Todoist from './lib/components/Todoist.svelte'
     import Weather from './lib/components/Weather.svelte'
+    import { saveSettings } from './lib/settings-store.svelte.js'
 
     let showSettings = $state(false)
 
     function closeSettings() {
         showSettings = false
     }
 
+    function applyTheme(themeName) {
+        const theme = themes[themeName] || themes['defaultTheme']
+        const root = document.documentElement
+        for (const [key, value] of Object.entries(theme.colors)) {
+            root.style.setProperty(key, value)
+        }
+    }
+
     $effect(() => {
         const fontName = settings.font?.trim() || 'Geist Mono Variable'
         document.documentElement.style.setProperty(
             '--font-family',
             `'${fontName}', monospace`
         )
     })
+
+    $effect(() => {
+        applyTheme(settings.currentTheme)
+    })
+
+    $effect(() => {
+        saveSettings(settings)
+    })
 </script>
 
 <main>

src/lib/components/Settings.svelte

@@ -1,7 +1,6 @@
 <script>
     import { fade, fly } from 'svelte/transition'
     import { saveSettings, settings } from '../settings-store.svelte.js'
-    import { getTheme, setTheme } from '../theme-store.svelte.js'
     import { themeNames, themes } from '../themes.js'
     import RadioButton from './RadioButton.svelte'
 
@@ -10,12 +9,6 @@
     // @ts-ignore
     const version = __APP_VERSION__
 
-    // Reactive theme binding
-    let currentTheme = $state(getTheme())
-    $effect(() => {
-        setTheme(currentTheme)
-    })
-
     function addLink() {
         settings.links = [...settings.links, { title: '', url: '' }]
     }
@@ -61,7 +54,7 @@
                     {#each themeNames as themeName}
                         <div class="theme-option">
                             <RadioButton
-                                bind:group={currentTheme}
+                                bind:group={settings.currentTheme}
                                 value={themeName}
                             >
                                 <div class="theme-preview">

src/lib/settings-store.svelte.js

@@ -1,6 +1,7 @@
 let defaultSettings = {
     timeFormat: '12hr',
     font: 'Geist Mono Variable',
+    currentTheme: 'default',
     todoistApiToken: '',
     latitude: null,
     longitude: null,