theme toggling

Author: avivkeller

eslint.config.mjs

@@ -74,7 +74,11 @@ export default [
     },
   },
   {
-    files: ['src/generators/legacy-html/assets/*.js'],
+    files: [
+      'src/generators/legacy-html/assets/*.js',
+      'src/generators/web/hooks/*',
+      'src/generators/web/components/*',
+    ],
     languageOptions: { globals: { ...globals.browser } },
   },
 ];

src/generators/web/components/NavBar.jsx

@@ -1,7 +1,12 @@
 import NavBar from '@node-core/ui-components/Containers/NavBar';
 import NodejsLogo from '@node-core/ui-components/Common/NodejsLogo';
+import ThemeToggle from '@node-core/ui-components/Common/ThemeToggle';
+
+import { useTheme } from '../hooks/useTheme.mjs';
 
 const MDXNavBar = () => {
+  const [theme, toggleTheme] = useTheme();
+
   return (
     <NavBar
       pathname="/docs/latest/api/"
@@ -40,7 +45,10 @@ const MDXNavBar = () => {
         },
       ]}
     >
-      <p>some child</p>
+      <ThemeToggle
+        onClick={toggleTheme}
+        aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
+      />
     </NavBar>
   );
 };

src/generators/web/hooks/useTheme.mjs

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * This hook provides theme management functionality
+ */
+export const useTheme = () => {
+  const [theme, setTheme] = useState('light');
+
+  useEffect(() => {
+    // Get initial theme from HTML or fallback to system preference
+    const htmlElement = document.documentElement;
+    const currentTheme = htmlElement.getAttribute('data-theme');
+
+    const initialTheme =
+      currentTheme ||
+      localStorage.getItem('theme') ||
+      (window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light');
+
+    setTheme(initialTheme);
+    htmlElement.setAttribute('data-theme', initialTheme);
+  }, []);
+
+  /**
+   * Toggles the theme between 'light' and 'dark'.
+   */
+  const toggleTheme = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  return [theme, toggleTheme];
+};