From 93496227907d8e3db4ce8fdaca623ae565cb07d6 Mon Sep 17 00:00:00 2001
From: Nikhil Kumar Rajak <ryzrr.official@gmail.com>
Date: Thu, 13 Aug 2026 09:47:16 +0000
Subject: [PATCH] fix: use doc-kit's island theme toggle

---
 components/NavBar.jsx  | 11 ++---------
 components/SideBar.jsx |  5 ++++-
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/components/NavBar.jsx b/components/NavBar.jsx
index 64760374..8851d971 100644
--- a/components/NavBar.jsx
+++ b/components/NavBar.jsx
@@ -1,4 +1,3 @@
-import ThemeToggle from '@node-core/ui-components/Common/ThemeToggle';
 import NavBar from '@node-core/ui-components/Containers/NavBar';
 import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
@@ -10,7 +9,7 @@ import Logo from '#theme/Logo';
 
 // TODO(avivkeller): Give these components proper exports
 import SearchBox from '../node_modules/@doc-kit/generator-react/src/html/ui/components/SearchBox';
-import { useTheme } from '../node_modules/@doc-kit/generator-react/src/html/ui/hooks/useTheme.mjs';
+import ThemeToggle from '../node_modules/@doc-kit/generator-react/src/html/ui/components/ThemeToggle.jsx';
 
 const versionBase = new URL(baseURL).pathname;
 
@@ -18,8 +17,6 @@ const versionBase = new URL(baseURL).pathname;
  * NavBar component that displays the headings, search, etc.
  */
 export default ({ metadata }) => {
-  const [themePreference, setThemePreference] = useTheme();
-
   return (
     <NavBar
       Logo={Logo}
@@ -28,11 +25,7 @@ export default ({ metadata }) => {
       pathname={toPublicLink(metadata.path, versionBase)}
     >
       <SearchBox pathname={metadata.path} />
-      <ThemeToggle
-        onChange={setThemePreference}
-        currentTheme={themePreference}
-        ariaLabel="Toggle color theme"
-      />
+      <ThemeToggle />
       <a
         href="https://github.com/webpack/webpack"
         className={styles.ghIconWrapper}
diff --git a/components/SideBar.jsx b/components/SideBar.jsx
index dff33184..d728e754 100644
--- a/components/SideBar.jsx
+++ b/components/SideBar.jsx
@@ -5,6 +5,7 @@ import { sidebar } from '#theme/local/site';
 import { version } from '#theme/config';
 import { toPublicLink } from '../utils/helpers/urls.mjs';
 import versions from '../versions.json' with { type: 'json' };
+import withIsland from '../node_modules/@doc-kit/generator-react/src/html/ui/islands/withIsland.jsx';
 
 /** @param {string} url */
 const redirect = url => (window.location.href = url);
@@ -33,7 +34,7 @@ const versionItems = versions.map(version => ({
 const currentVersion = isVersioned ? versionBase : undefined;
 
 /** Docs sidebar, plus a webpack version picker on the versioned API docs. */
-export default ({ metadata }) => (
+const Sidebar = ({ metadata }) => (
   <SideBar
     pathname={toPublicLink(metadata.path, versionBase)}
     groups={groupsFor(metadata.path)}
@@ -54,3 +55,5 @@ export default ({ metadata }) => (
     )}
   </SideBar>
 );
+
+export default withIsland(Sidebar, { name: 'SideBar', on: { idle: true } });