fix(theme): Conform theme logic with OS theme preference (#6138)

demakoff · web-flow · commit 5882ccbff287 · 2023-11-23T18:22:27.000Z
diff --git a/components/Common/ThemeToggle/index.tsx b/components/Common/ThemeToggle/index.tsx
@@ -11,7 +11,7 @@ type ThemeToggleProps = {
 const ThemeToggle: FC<ThemeToggleProps> = ({ onClick = () => {} }) => {
   const t = useTranslations();
 
-  const ariaLabel = t('components.header.buttons.toggleDarkMode');
+  const ariaLabel = t('components.header.buttons.toggleTheme');
 
   return (
     <button
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -15,13 +15,13 @@ import { availableLocales } from '@/next.locales.mjs';
 const Header = () => {
   const { navigationItems } = useSiteNavigation();
   const [showLangPicker, setShowLangPicker] = useState(false);
-  const { theme, setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
 
   const pathname = usePathname();
   const t = useTranslations();
 
   const toggleLanguage = t('components.header.buttons.toggleLanguage');
-  const toggleDarkMode = t('components.header.buttons.toggleDarkMode');
+  const toggleTheme = t('components.header.buttons.toggleTheme');
 
   return (
     <header aria-label="Primary">
@@ -50,19 +50,21 @@ const Header = () => {
 
         <div className="switchers">
           <button
-            className="dark-theme-switcher"
+            className="theme-switcher"
             type="button"
-            title={toggleDarkMode}
-            aria-label={toggleDarkMode}
-            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+            title={toggleTheme}
+            aria-label={toggleTheme}
+            onClick={() =>
+              setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+            }
           >
             <Image
               priority
               width="28"
               height="28"
               className="dark-image"
               src={`${BASE_PATH}/static/images/light-mode.svg`}
-              alt="Dark Theme Switcher"
+              alt="Theme Switcher"
             />
 
             <Image
@@ -71,7 +73,7 @@ const Header = () => {
               height="28"
               className="light-image"
               src={`${BASE_PATH}/static/images/dark-mode.svg`}
-              alt="Dark Theme Switcher"
+              alt="Theme Switcher"
             />
           </button>
 
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/id.json b/i18n/locales/id.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/it.json b/i18n/locales/it.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/ja.json b/i18n/locales/ja.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/ka.json b/i18n/locales/ka.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/ko.json b/i18n/locales/ko.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/pt-br.json b/i18n/locales/pt-br.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/ru.json b/i18n/locales/ru.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/tr.json b/i18n/locales/tr.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/uk.json b/i18n/locales/uk.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/zh-cn.json b/i18n/locales/zh-cn.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/i18n/locales/zh-tw.json b/i18n/locales/zh-tw.json
@@ -67,7 +67,7 @@
       },
       "buttons": {
         "toggleLanguage": "Toggle Language",
-        "toggleDarkMode": "Toggle dark/light mode"
+        "toggleTheme": "Toggle dark/light mode"
       }
     },
     "navigation": {
diff --git a/providers/themeProvider.tsx b/providers/themeProvider.tsx
@@ -8,9 +8,9 @@ import { THEME_STORAGE_KEY } from '@/next.constants.mjs';
 export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => (
   <NextThemeProvider
     attribute="data-theme"
-    defaultTheme="dark"
+    defaultTheme="system"
     storageKey={THEME_STORAGE_KEY}
-    enableSystem={false}
+    enableSystem={true}
   >
     {children}
   </NextThemeProvider>
diff --git a/styles/old/layout/dark-theme.css b/styles/old/layout/dark-theme.css
@@ -2,7 +2,7 @@ html[data-theme='dark'] {
   background-color: $dark-black;
   color: $white;
 
-  .dark-theme-switcher {
+  .theme-switcher {
     img.light-image {
       display: none;
     }
@@ -40,7 +40,7 @@ html[data-theme='dark'] {
   }
 
   header,
-  .dark-theme-switcher img,
+  .theme-switcher img,
   .lang-picker-toggler img {
     background-color: $dark-black2;
   }
diff --git a/styles/old/page-modules/header.css b/styles/old/page-modules/header.css
@@ -1,5 +1,5 @@
 header,
-.dark-theme-switcher img,
+.theme-switcher img,
 .lang-picker-toggler img {
   background-color: $node-gray;
 }
@@ -47,7 +47,7 @@ header {
     top: 0;
   }
 
-  .dark-theme-switcher {
+  .theme-switcher {
     border: none;
     cursor: pointer;
     margin: 0 8px 0 0;

Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@`
`67`	`67`	`},`
`68`	`68`	`"buttons": {`
`69`	`69`	`"toggleLanguage": "Toggle Language",`
`70`		`- "toggleDarkMode": "Toggle dark/light mode"`
	`70`	`+ "toggleTheme": "Toggle dark/light mode"`
`71`	`71`	`}`
`72`	`72`	`},`
`73`	`73`	`"navigation": {`