diff --git a/src/generators/legacy-html/assets/style.css b/src/generators/legacy-html/assets/style.css
index 9a80797b..87ddd2f4 100644
--- a/src/generators/legacy-html/assets/style.css
+++ b/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;
diff --git a/src/generators/legacy-html/template.html b/src/generators/legacy-html/template.html
index 0142fde1..6767ad78 100644
--- a/src/generators/legacy-html/template.html
+++ b/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"
diff --git a/src/generators/web/ui/components/NavBar.jsx b/src/generators/web/ui/components/NavBar.jsx
index fe26e629..3a114650 100644
--- a/src/generators/web/ui/components/NavBar.jsx
+++ b/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`}
diff --git a/src/generators/web/ui/hooks/useTheme.mjs b/src/generators/web/ui/hooks/useTheme.mjs
index 0469ef33..8bd690d1 100644
--- a/src/generators/web/ui/hooks/useTheme.mjs
+++ b/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];
 };