will svelte 5 ever work consistently?

who knows!

$inspect shouldn't change behavior!!!

Author: CaptainCodeman

package.json

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

src/lib/state.svelte.ts

@@ -27,8 +27,9 @@ export interface Config {
 }
 
 class ThemeState {
-	#system = new MediaQuery('(prefers-color-scheme: dark)')
-	#override: Theme = 'system'
+	#override = $state<Theme>('system')
+	#system: Theme
+	#value: Theme
 	#subscribe: VoidFunction
 	#update?: VoidFunction
 
@@ -37,29 +38,33 @@ class ThemeState {
 	labels = defaultLabels
 
 	constructor() {
+		const prefersDark = new MediaQuery('(prefers-color-scheme: dark)')
+		this.#system = $derived(prefersDark.current ? 'dark' : 'light')
+		this.#value = $derived(this.#override === 'system' ? this.#system : this.#override)
+
 		this.#subscribe = createSubscriber(update => {
 			this.#update = update
-
 			const saved: Theme = localStorage.theme ?? 'system'
 			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
 					update()
 				}
 			})
 		})
+
+		$effect.root(() => {
+			$effect.pre(() => {
+				document.documentElement.classList.toggle('dark', this.#value === 'dark')
+			})
+		})
 	}
 
 	get system() {
-		this.#subscribe()
-		return this.#system.current
+		return this.#system
 	}
 
 	get override() {
@@ -69,13 +74,7 @@ class ThemeState {
 
 	get current() {
 		this.#subscribe()
-		switch (this.#override) {
-			case 'dark':
-			case 'light':
-				return this.#override
-			case 'system':
-				return this.#system.current ? 'dark' : 'light'
-		}
+		return this.#value
 	}
 
 	set current(value: Theme) {