fix theme not being applied when system setting updates

Author: CaptainCodeman

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-theme-select",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"type": "module",
 	"keywords": [
 		"svelte",

src/lib/Icon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { theme } from './theme'
+	import { theme } from './state.svelte'
 </script>
 
 <span class="size-6" hidden={theme.override === 'system'}>

src/lib/ThemeSelect.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment'
 	import Icon from './Icon.svelte'
-	import { theme, themes, type Theme } from './theme'
+	import { theme, themes, type Theme } from './state.svelte'
 
 	function onChange(e: Event) {
 		const el = e.target as HTMLSelectElement

src/lib/ThemeToggle.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Transition from 'svelte-transition'
 	import { createMenu } from 'svelte-headlessui'
-	import { theme, themes, type Theme } from './theme'
+	import { theme, themes, type Theme } from './state.svelte'
 	import Icon from './Icon.svelte'
 
 	const menu = createMenu({ label: 'Theme' })

src/lib/index.ts

@@ -1,5 +1,5 @@
 export * from './icons'
-export * from './theme'
+export * from './state.svelte'
 export { default as Theme } from './Theme.svelte'
 export { default as ThemeToggle } from './ThemeToggle.svelte'
 export { default as ThemeSelect } from './ThemeSelect.svelte'

src/lib/theme.ts src/lib/state.svelte.tssrc/lib/theme.ts renamed to src/lib/state.svelte.ts

@@ -44,6 +44,10 @@ class ThemeState {
 			this.#override = saved
 			update()
 
+			$effect(() => {
+				document.documentElement.classList.toggle('dark', this.current === 'dark')
+			})
+
 			return on(window, 'storage', (event: StorageEvent) => {
 				if (event.key === 'theme') {
 					this.#override = event.newValue as Theme
@@ -86,7 +90,6 @@ class ThemeState {
 		}
 		this.#override = value
 		this.#update?.()
-		document.documentElement.classList.toggle('dark', this.current === 'dark')
 	}
 }