feat: enforce dark mode by always applying 'dark' class and attribute

2 files changed, 10 insertions, 7 deletions

diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index 2160b85..1c465b1 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -38,13 +38,14 @@
   });
   
   $effect(() => {
-    if (settingsState.settings.theme === 'light') {
-        document.documentElement.classList.remove('dark');
-        document.documentElement.setAttribute('data-theme', 'light');
-    } else {
-        document.documentElement.classList.add('dark');
-        document.documentElement.setAttribute('data-theme', 'dark');
-    }
+    // ENFORCE DARK MODE: Always add 'dark' class and attribute
+    // This combined with the @variant dark in app.css ensures dark mode is always active
+    // regardless of system preference settings.
+    document.documentElement.classList.add('dark');
+    document.documentElement.setAttribute('data-theme', 'dark');
+    
+    // Ensure 'light' class is never present
+    document.documentElement.classList.remove('light');
   });
 
   onDestroy(() => {
diff --git a/ui/src/app.css b/ui/src/app.css
index f1d8c73..2ea9a8c 100644
--- a/ui/src/app.css
+++ b/ui/src/app.css
@@ -1 +1,3 @@
 @import "tailwindcss";
+
+@variant dark (&:where(.dark, .dark *));