[dashboard] Implement 'System' color theme option

gitpod-io · Apr 16, 2021 · 2093f15 · 2093f15
1 parent e726b1f
commit 2093f15
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/components/dashboard/src/settings/Preferences.tsx b/components/dashboard/src/settings/Preferences.tsx
@@ -13,6 +13,8 @@ import vscode from '../images/vscode.svg';
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import settingsMenu from "./settings-menu";
 
+type ColorTheme = 'system' | 'dark' | 'light';
+
 export default function Preferences() {
     const { user } = useContext(UserContext);
     const [ defaultIde, setDefaultIde ] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || 'theia');
@@ -28,11 +30,16 @@ export default function Preferences() {
         await getGitpodService().server.updateLoggedInUser({ additionalData });
         setDefaultIde(value);
     }
-    const [ isDarkTheme, setIsDarkTheme ] = useState<boolean>(document.documentElement.classList.contains('dark'));
-    const actuallySetIsDarkTheme = (is: boolean) => {
-        document.documentElement.classList.toggle('dark', is);
-        localStorage.theme = is ? 'dark' : 'light';
-        setIsDarkTheme(is);
+    const [ theme, setTheme ] = useState<ColorTheme>(localStorage.theme || 'system');
+    const actuallySetTheme = (theme: ColorTheme) => {
+        if (theme === 'light' || theme === 'dark') {
+            localStorage.theme = theme;
+        } else {
+            localStorage.removeItem('theme');
+        }
+        const isDark = localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        document.documentElement.classList.toggle('dark', isDark);
+        setTheme(theme);
     }
 
     return <div>
@@ -54,8 +61,9 @@ export default function Preferences() {
             <h3 className="mt-12">Color Scheme</h3>
             <p className="text-base text-gray-500">Light or dark?</p>
             <div className="mt-4 space-x-4 flex">
-                <label><input type="radio" name="theme" value="light" checked={!isDarkTheme} onChange={() => actuallySetIsDarkTheme(false)}></input> Light</label>
-                <label><input type="radio" name="theme" value="dark" checked={isDarkTheme} onChange={() => actuallySetIsDarkTheme(true)}></input> Dark</label>
+                <label><input type="radio" name="theme" value="system" checked={theme === 'system'} onChange={() => actuallySetTheme('system')}></input> System</label>
+                <label><input type="radio" name="theme" value="dark" checked={theme === 'dark'} onChange={() => actuallySetTheme('dark')}></input> Dark</label>
+                <label><input type="radio" name="theme" value="light" checked={theme === 'light'} onChange={() => actuallySetTheme('light')}></input> Light</label>
             </div>
         </PageWithSubMenu>
     </div>;