fix: resolve theme toggle issues across web and legacy generators

src/generators/legacy-html/assets/style.css

@@ -912,6 +912,10 @@ kbd {
   outline: var(--brand3) dotted 2px;
 }
 
+.theme-toggle-btn svg {
+  pointer-events: none;
+}
+
 @media only screen and (width >= 601px) {
   #gtoc > ul > li {
     display: inline;

src/generators/legacy-html/template.html

@@ -45,6 +45,7 @@
           <div class="header-container">
             <h1>Node.js __VERSION__ documentation</h1>
             <button
+              type="button"
               class="theme-toggle-btn"
               id="theme-toggle-btn"
               title="Toggle dark mode/light mode"

src/generators/web/ui/components/NavBar.jsx

@@ -13,7 +13,7 @@ import Logo from '#theme/Logo';
  * NavBar component that displays the headings, search, etc.
  */
 export default () => {
-  const [theme, toggleTheme] = useTheme();
+  const [theme, changeTheme] = useTheme();
 
   return (
     <NavBar
@@ -22,10 +22,7 @@ export default () => {
       navItems={[]}
     >
       <SearchBox />
-      <ThemeToggle
-        onClick={toggleTheme}
-        aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
-      />
+      <ThemeToggle onChange={changeTheme} currentTheme={theme} />
       <a
         href={`https://github.com/${STATIC_DATA.repository}`}
         aria-label={`${STATIC_DATA.title} GitHub`}

src/generators/web/ui/hooks/useTheme.mjs

@@ -32,18 +32,12 @@ export const useTheme = () => {
   }, []);
 
   /**
-   * Callback function to toggle between 'light' and 'dark' themes.
+   * Callback function to change the theme.
    */
-  const toggleTheme = useCallback(() => {
-    setTheme(prev => {
-      // Determine the next theme based on the current theme.
-      const next = prev === 'light' ? 'dark' : 'light';
-      // Apply the new theme.
-      applyTheme(next);
-      // Return the new theme to update the state.
-      return next;
-    });
+  const changeTheme = useCallback(newTheme => {
+    setTheme(newTheme);
+    applyTheme(newTheme);
   }, []);
 
-  return [theme, toggleTheme];
+  return [theme, changeTheme];
 };