fix: use next-themes for the legacy website (nodejs#6004)

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"

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';

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;

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>
 );

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;

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 {