From 06c17e4ea9b25f03984055a9496170df0c8aec5a Mon Sep 17 00:00:00 2001
From: Ivan Gabaldon <igabaldon@inetol.net>
Date: Wed, 12 Feb 2025 13:57:09 +0100
Subject: [PATCH] fix theme sync

---
 www/src/components/modals/settings/ThemeSection.tsx | 2 +-
 www/src/screens/Editor.tsx                          | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/www/src/components/modals/settings/ThemeSection.tsx b/www/src/components/modals/settings/ThemeSection.tsx
index c9ad32d..f0a3a73 100644
--- a/www/src/components/modals/settings/ThemeSection.tsx
+++ b/www/src/components/modals/settings/ThemeSection.tsx
@@ -42,7 +42,7 @@ export default function ThemeSection() {
 					<input
 						type='checkbox'
 						id='theme-color-scheme-toggle'
-						class='toggle theme-controller'
+						class='toggle'
 						value='light'
 						disabled={themeSchemeMode() === 'device'}
 						checked={themeScheme() === 'light'}
diff --git a/www/src/screens/Editor.tsx b/www/src/screens/Editor.tsx
index f4c3b3c..9bbfddd 100644
--- a/www/src/screens/Editor.tsx
+++ b/www/src/screens/Editor.tsx
@@ -1,5 +1,5 @@
 import { useLocation } from '@solidjs/router';
-import { Suspense, lazy, onMount } from 'solid-js';
+import { Suspense, createEffect, lazy, on } from 'solid-js';
 import Header from '#component/Header.tsx';
 import GenericFallback from '#screen/GenericFallback.tsx';
 import { type LangKeys, langs, setLanguage } from '#util/langs.ts';
@@ -17,7 +17,11 @@ export default function EditorScreen() {
 		setLanguage(language as LangKeys);
 	}
 
-	onMount(() => document.documentElement.setAttribute('data-theme', themeScheme()));
+	createEffect(
+		on(themeScheme, (themeScheme) => {
+			document.documentElement.setAttribute('data-theme', themeScheme);
+		})
+	);
 
 	return (
 		/* FIXME: Overflows when width is over 1024px */