diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
index dc2c31d77ae841..08672f7ba93d5d 100644
--- a/components/dashboard/src/App.tsx
+++ b/components/dashboard/src/App.tsx
@@ -142,7 +142,7 @@ function App() {
 
     useEffect(() => {
         const updateTheme = () => {
-            const isDark = localStorage.theme === 'dark' || (localStorage.theme === 'system' && window.matchMedia("(prefers-color-scheme: dark)").matches);
+            const isDark = localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia("(prefers-color-scheme: dark)").matches);
             setIsDark(isDark);
         }
         updateTheme();
diff --git a/components/dashboard/src/settings/Preferences.tsx b/components/dashboard/src/settings/Preferences.tsx
index 00e5aeab19df98..b602ecdb38d623 100644
--- a/components/dashboard/src/settings/Preferences.tsx
+++ b/components/dashboard/src/settings/Preferences.tsx
@@ -58,14 +58,14 @@ export default function Preferences() {
         setUseDesktopIde(value);
     }
 
-    const [theme, setTheme] = useState<Theme>(localStorage.theme || 'light');
+    const [theme, setTheme] = useState<Theme>(localStorage.theme || 'system');
     const actuallySetTheme = (theme: Theme) => {
-        if (theme === 'dark' || theme === 'system') {
+        if (theme === 'dark' || theme === 'light') {
             localStorage.theme = theme;
         } else {
             localStorage.removeItem('theme');
         }
-        const isDark = localStorage.theme === 'dark' || (localStorage.theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        const isDark = localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches);
         setIsDark(isDark);
         setTheme(theme);
     }