add brower-default mode support

Signed-off-by: Josh Romero <rmerqg@amazon.com>
joshuarrrr · Jan 6, 2024 · f56628a · f56628a
1 parent 8283561
commit f56628a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/src/legacy/ui/ui_render/bootstrap/startup.js.hbs b/src/legacy/ui/ui_render/bootstrap/startup.js.hbs
@@ -7,17 +7,28 @@ try {
   console.log(error);
 }
 
+var useBrowserColorScheme = window.localStorage.getItem('useBrowserColorScheme') === 'true' || false;
+
 var browserDarkMode = uiSettings['theme:darkMode'] || {};
 var browserThemeVersion = uiSettings['theme:version'] || {};
 
-var rawDarkMode = typeof browserDarkMode.userValue !== 'boolean' ? {{configDarkMode}} : browserDarkMode.userValue
+var rawDarkMode = typeof browserDarkMode.userValue !== 'boolean' ? {{configDarkMode}} : browserDarkMode.userValue;
+
+debugger;
+if (useBrowserColorScheme && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches !== rawDarkMode) {
+  uiSettings['theme:darkMode'] = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  window.localStorage.setItem('uiSettings', JSON.stringify(uiSettings));
+  rawDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
 
 var rawThemeVersion = browserThemeVersion.userValue || '{{configThemeVersion}}'
 
 // TODO: source of truth for mapping should be elsewhere
 var darkMode = rawDarkMode ? 'dark' : 'light';
 var themeVersion = rawThemeVersion === 'v7' ? 'v7' : 'v8';
 
+console.log(themeVersion, darkMode, window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+
 window.__osdThemeTag__ = themeVersion + darkMode;
 
 var themeSourceKey = themeVersion === 'v7' ? 'v7' : 'default';

diff --git a/src/plugins/advanced_settings/public/header_user_theme_menu.tsx b/src/plugins/advanced_settings/public/header_user_theme_menu.tsx
@@ -55,13 +55,19 @@ export const HeaderUserThemeMenu = () => {
       text: 'Use browser settings',
     },
   ];
+  const prefersAutomatic =
+    (window.localStorage.getItem('useBrowserColorScheme') && window.matchMedia) || false;
   const [darkMode, setDarkMode] = useUiSetting$<boolean>('theme:darkMode');
   const [themeVersion, setThemeVersion] = useUiSetting$<string>('theme:version');
   const [isPopoverOpen, setPopover] = useState(false);
   // TODO: improve naming?
   const [theme, setTheme] = useState(themeOptions.find((t) => t.text === themeVersion)?.value);
   const [screenMode, setScreenMode] = useState(
-    darkMode ? screenModeOptions[1].value : screenModeOptions[0].value
+    prefersAutomatic
+      ? screenModeOptions[2].value
+      : darkMode
+      ? screenModeOptions[1].value
+      : screenModeOptions[0].value
   );
   const allSettings = uiSettings.getAll();
   const defaultTheme = allSettings['theme:version'].value;
@@ -80,11 +86,23 @@ export const HeaderUserThemeMenu = () => {
   };
 
   const onAppearanceSubmit = async (e: SyntheticEvent) => {
+    const actions = [setThemeVersion(themeOptions.find((t) => theme === t.value)?.text ?? '')];
+
+    if (screenMode === 'automatic') {
+      const browserMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      window.localStorage.setItem('useBrowserColorScheme', 'true');
+
+      if (browserMode !== darkMode) {
+        actions.push(setDarkMode(browserMode));
+      }
+    } else if ((screenMode === 'dark') !== darkMode) {
+      actions.push(setDarkMode(screenMode === 'dark'));
+      window.localStorage.removeItem('useBrowserColorScheme');
+    } else {
+      window.localStorage.removeItem('useBrowserColorScheme');
+    }
     // TODO: only set changed
-    await await Promise.all([
-      setThemeVersion(themeOptions.find((t) => theme === t.value)?.text ?? ''),
-      setDarkMode(screenMode === 'dark'),
-    ]);
+    await await Promise.all([actions]);
     window.location.reload();
   };