From 57401ece86943d9e4b9c49f8e93c4616fc24aeae Mon Sep 17 00:00:00 2001
From: Claudio W <cwunder@gnome.org>
Date: Sun, 15 Oct 2023 15:25:27 +0200
Subject: [PATCH] fix: use next-themes for the legacy website (#6004)

---
 components/Header.tsx            |  4 ++++
 next.constants.mjs               |  5 ++++
 pages/_app.tsx                   |  5 ++--
 providers/themeProvider.tsx      | 15 ++++++++----
 public/static/js/legacyMain.js   | 40 --------------------------------
 styles/old/layout/dark-theme.css |  1 -
 6 files changed, 22 insertions(+), 48 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index fbdf711438194..12cff84bea9c8 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import Image from 'next/image';
+import { useTheme } from 'next-themes';
 import { useIntl } from 'react-intl';
 
 import { useLocale } from '@/hooks/useLocale';
@@ -13,6 +14,7 @@ const Header = () => {
   const { navigationItems } = useNavigation();
   const { formatMessage } = useIntl();
   const { asPath, basePath } = useRouter();
+  const { theme, setTheme } = useTheme();
 
   const getLinkClassName = (href: string) =>
     classNames({ active: isCurrentLocaleRoute(href, href !== '/') });
@@ -57,6 +59,7 @@ const Header = () => {
             type="button"
             title={toggleDarkMode}
             aria-label={toggleDarkMode}
+            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
           >
             <Image
               priority
@@ -66,6 +69,7 @@ const Header = () => {
               src={`${basePath}/static/images/light-mode.svg`}
               alt="Dark Theme Switcher"
             />
+
             <Image
               priority
               width="28"
diff --git a/next.constants.mjs b/next.constants.mjs
index 1cd4ee08ca04e..86dec07d500df 100644
--- a/next.constants.mjs
+++ b/next.constants.mjs
@@ -153,3 +153,8 @@ export const EXTERNAL_LINKS_SITEMAP = [
   'https://trademark-list.openjsf.org/',
   'https://www.linuxfoundation.org/cookies',
 ];
+
+/**
+ * The `localStorage` key to store the theme choice of `next-themes`
+ */
+export const THEME_LOCAL_STORAGE_KEY = 'theme';
diff --git a/pages/_app.tsx b/pages/_app.tsx
index becce66c869a0..122d37d2d72b4 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,6 +7,7 @@ import { BlogDataProvider } from '@/providers/blogDataProvider';
 import { LocaleProvider } from '@/providers/localeProvider';
 import { NodeReleasesProvider } from '@/providers/nodeReleasesProvider';
 import { SiteProvider } from '@/providers/siteProvider';
+import { ThemeProvider } from '@/providers/themeProvider';
 
 import '@/styles/old/index.css';
 
@@ -17,7 +18,7 @@ const sourceSans = Source_Sans_3({
 });
 
 const App = ({ Component, pageProps }: AppProps) => (
-  <>
+  <ThemeProvider>
     <LocaleProvider>
       <SiteProvider>
         <NodeReleasesProvider>
@@ -37,7 +38,7 @@ const App = ({ Component, pageProps }: AppProps) => (
         }
       `}
     </style>
-  </>
+  </ThemeProvider>
 );
 
 export default App;
diff --git a/providers/themeProvider.tsx b/providers/themeProvider.tsx
index 4703e3ffab566..0c1aa7c6459ff 100644
--- a/providers/themeProvider.tsx
+++ b/providers/themeProvider.tsx
@@ -1,10 +1,15 @@
 import { ThemeProvider as NextThemeProvider } from 'next-themes';
 import type { FC, PropsWithChildren } from 'react';
 
+import { THEME_LOCAL_STORAGE_KEY } from '@/next.constants.mjs';
+
 export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => (
-  <>
-    <NextThemeProvider enableSystem={true} enableColorScheme={true}>
-      {children}
-    </NextThemeProvider>
-  </>
+  <NextThemeProvider
+    attribute="data-theme"
+    storageKey={THEME_LOCAL_STORAGE_KEY}
+    enableSystem={true}
+    enableColorScheme={true}
+  >
+    {children}
+  </NextThemeProvider>
 );
diff --git a/public/static/js/legacyMain.js b/public/static/js/legacyMain.js
index baf69a6487648..24abc82c73f0c 100644
--- a/public/static/js/legacyMain.js
+++ b/public/static/js/legacyMain.js
@@ -1,14 +1,3 @@
-const themeAttr = 'data-theme';
-
-const setTheme = theme => {
-  document.querySelector('html').setAttribute(themeAttr, theme);
-  window.localStorage.setItem('theme', theme);
-};
-
-const preferredColorScheme = window.matchMedia('(prefers-color-scheme: dark)');
-
-const getTheme = () => window.localStorage.getItem('theme');
-
 const listenLanguagePickerButton = () => {
   const langPickerTogglerElement = document.querySelector(
     '.lang-picker-toggler'
@@ -28,25 +17,6 @@ const listenLanguagePickerButton = () => {
   langPickerTogglerElement.addEventListener('click', toggleFunction);
 };
 
-const watchThemeChanges = () =>
-  preferredColorScheme.addEventListener(
-    'change',
-    event => getTheme() || setTheme(event.matches ? 'dark' : 'light')
-  );
-
-const listenThemeToggleButton = () => {
-  const darkThemeSwitcherElement = document.querySelector(
-    '.dark-theme-switcher'
-  );
-
-  darkThemeSwitcherElement.addEventListener('click', () => {
-    const currentTheme =
-      getTheme() || (preferredColorScheme.matches ? 'dark' : 'light');
-
-    setTheme(currentTheme === 'light' ? 'dark' : 'light');
-  });
-};
-
 const listenScrollToTopButton = () => {
   const scrollToTop = document.querySelector('#scroll-to-top');
 
@@ -67,19 +37,9 @@ const listenScrollToTopButton = () => {
   });
 };
 
-const setCurrentTheme = () =>
-  setTheme(getTheme() || (preferredColorScheme.matches ? 'dark' : 'light'));
-
 const startLegacyApp = () => {
-  setCurrentTheme();
-
-  watchThemeChanges();
-
   listenLanguagePickerButton();
-  listenThemeToggleButton();
   listenScrollToTopButton();
 };
 
-setCurrentTheme();
-
 window.startLegacyApp = startLegacyApp;
diff --git a/styles/old/layout/dark-theme.css b/styles/old/layout/dark-theme.css
index ce4e3e9559848..0a72845b5ea1f 100644
--- a/styles/old/layout/dark-theme.css
+++ b/styles/old/layout/dark-theme.css
@@ -1,7 +1,6 @@
 html[data-theme='dark'] {
   background-color: $dark-black;
   color: $white;
-  color-scheme: dark;
 
   .dark-theme-switcher {
     img.light-image {