Update Theme Milestone

Author: lucemans

web/src/gui/navigation/ThemeSwitcher.tsx

@@ -3,14 +3,21 @@ import { FiMonitor, FiMoon, FiSun } from 'react-icons/fi';
 
 import { cn } from '@/util/style';
 
+export const updateTheme = () => {
+    const theme = localStorage.getItem('theme') || 'system';
+
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(theme);
+};
+
 export const ThemeSwitcher = () => {
     const theme = localStorage.getItem('theme') || 'system';
     const [currentTheme, setCurrentTheme] = useState(theme);
     const setTheme = (theme: string) => {
         localStorage.setItem('theme', theme);
         setCurrentTheme(theme);
-        document.documentElement.classList.remove('light', 'dark');
-        document.documentElement.classList.add(theme);
+
+        updateTheme();
     };
 
     return (

web/src/index.tsx

@@ -10,6 +10,7 @@ import { preflightAuth } from '@/api';
 // Import the generated route tree
 import { routeTree } from '@/routeTree.gen';
 
+import { updateTheme } from './gui/navigation/ThemeSwitcher';
 import { PageErrorBoundary } from './gui/PageErrorBoundary';
 import { defaultPendingComponent } from './gui/Router';
 import { QueryProvider } from './util/query';
@@ -27,11 +28,12 @@ const router = createRouter({
 // Register the router instance for type safety
 declare module '@tanstack/react-router' {
     // eslint-disable-next-line prettier/prettier, unused-imports/no-unused-vars
-  interface Register {
+    interface Register {
         router: typeof router;
     }
 }
 
+updateTheme();
 preflightAuth();
 
 ReactDOM.createRoot(document.querySelector('#root')!).render(

web/src/styles/colors.scss

@@ -12,10 +12,7 @@
 }
 
 html.dark {
-    --background: #0b0b0b;
-    --background2: #0d0d0d;
     --border: #313131;
-    --text: #fff;
     --link: #60a5fa;
     --muted: #1f1f1f;
 
@@ -26,3 +23,18 @@ html.dark {
     --text-primary: #fff;
     --text-secondary: #fff;
 }
+
+@media (prefers-color-scheme: dark) {
+    html:not(.light) {
+        --border: #313131;
+        --link: #60a5fa;
+        --muted: #1f1f1f;
+    
+        --bg-primary: #0d0d0d;
+        --bg-secondary: #0b0b0b;
+        --bg-hover: #ffffff1a;
+        --bg-muted: #1f1f1f;
+        --text-primary: #fff;
+        --text-secondary: #fff;
+    }
+}

web/src/styles/index.scss

@@ -26,7 +26,7 @@ body {
     overflow: hidden;
     font-family: "Inter", monospace, sans-serif;
     background-color: var(--bg-secondary);
-    color: var(--text);
+    color: var(--text-primary);
 }
 
 body.dark {

web/tailwind.config.js

@@ -12,10 +12,10 @@ module.exports = {
                 hover: 'var(--bg-hover)',
             },
             borderColor: {
-                default: 'var(--border)',
+                DEFAULT: 'var(--border)',
             },
             outlineColor: {
-                default: 'var(--border)',
+                DEFAULT: 'var(--border)',
             },
             textColor: {
                 link: 'var(--link)',