Force dark theme defaults across shells

packages/tauri-app/src-tauri/tauri.conf.json

@@ -22,7 +22,9 @@
         "center": true,
         "resizable": true,
         "fullscreen": false,
-        "decorations": true
+        "decorations": true,
+        "theme": "Dark",
+        "backgroundColor": "#1a1a1a"
       }
     ],
     "security": {

packages/ui/src/lib/theme.tsx

@@ -21,14 +21,11 @@ function applyTheme(dark: boolean) {
 export function ThemeProvider(props: { children: JSX.Element }) {
   const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)")
   const { themePreference, setThemePreference } = useConfig()
-  const [isDark, setIsDarkSignal] = createSignal(false)
+  const [isDark, setIsDarkSignal] = createSignal(true)
 
   const resolveDarkTheme = () => {
-    const preference = themePreference()
+    themePreference()
-    if (preference === "system") {
+    return true
-      return systemPrefersDark.matches
-    }
-    return preference === "dark"
   }
 
   const applyResolvedTheme = () => {
@@ -42,11 +39,8 @@ export function ThemeProvider(props: { children: JSX.Element }) {
   })
 
   onMount(() => {
-    const handleSystemThemeChange = (event: MediaQueryListEvent) => {
+    const handleSystemThemeChange = () => {
-      if (themePreference() === "system") {
+      applyResolvedTheme()
-        setIsDarkSignal(event.matches)
-        applyTheme(event.matches)
-      }
     }
 
     systemPrefersDark.addEventListener("change", handleSystemThemeChange)
@@ -56,12 +50,12 @@ export function ThemeProvider(props: { children: JSX.Element }) {
     }
   })
 
-  const setTheme = (dark: boolean) => {
+  const setTheme = (_dark: boolean) => {
-    setThemePreference(dark ? "dark" : "light")
+    setThemePreference("dark")
   }
 
   const toggleTheme = () => {
-    setTheme(!isDark())
+    setTheme(true)
   }
 
   return <ThemeContext.Provider value={{ isDark, toggleTheme, setTheme }}>{props.children}</ThemeContext.Provider>

packages/ui/src/renderer/index.html

@@ -6,30 +6,18 @@
     <title>CodeNomad</title>
     <style>
       :root {
-        color-scheme: light dark;
+        color-scheme: dark;
       }
-      /* html,
+      html,
       body {
-        background-color: #ffffff;
+        background-color: #1a1a1a;
-        color: #1a1a1a;
+        color: #e0e0e0;
       }
-      @media (prefers-color-scheme: dark) { */
-        html,
-        body {
-          background-color: #1a1a1a;
-          color: #e0e0e0;
-        }
-      /* } */
     </style>
     <script>
       ;(function () {
         try {
-          const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+          document.documentElement.setAttribute('data-theme', 'dark')
-          // if (prefersDark) {
-            document.documentElement.setAttribute('data-theme', 'dark')
-          // } else {
-          //   document.documentElement.removeAttribute('data-theme')
-          // }
         } catch (error) {
           console.warn('Failed to apply initial theme', error)
         }

packages/ui/src/renderer/loading.html

@@ -7,12 +7,7 @@
     <script>
       ;(function () {
         try {
-          const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+          document.documentElement.setAttribute('data-theme', 'dark')
-          if (prefersDark) {
-            document.documentElement.setAttribute('data-theme', 'dark')
-          } else {
-            document.documentElement.setAttribute('data-theme', 'light')
-          }
         } catch (error) {
           console.warn('Failed to apply initial theme', error)
         }