From aa53e2c38f38066907eed016cb56baf5e44534eb Mon Sep 17 00:00:00 2001
From: 1genierock <ogenie261105@gmail.com>
Date: Fri, 26 Jun 2026 20:33:52 +0500
Subject: [PATCH 1/8] Update custom.css

---
 website/src/css/custom.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index f19f426cd1b4..706d636e6be1 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -246,3 +246,33 @@ html[data-navbar='false'] {
 html[data-red-border] div#__docusaurus {
   border: red solid thick;
 }
+/* CSS Anchor Positioning for Tooltips */
+:root {
+  --docusaurus-tooltip-bg: #1b1b1d;
+}
+
+[data-tooltip-trigger] {
+  anchor-name: --docusaurus-tooltip;
+}
+
+[data-tooltip-content] {
+  position: fixed;
+  position-anchor: --docusaurus-tooltip;
+  top: anchor(bottom);
+  left: anchor(center);
+  transform: translateX(-50%);
+  margin-top: 8px;
+  padding: 6px 10px;
+  background-color: var(--docusaurus-tooltip-bg);
+  color: #fff;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  z-index: 100;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease-in-out;
+}
+
+[data-tooltip-trigger]:hover + [data-tooltip-content] {
+  opacity: 1;
+}
\ No newline at end of file

From 76620e766eaec84d6e03af19858a0d7d4b0e7b17 Mon Sep 17 00:00:00 2001
From: 1genierock <ogenie261105@gmail.com>
Date: Fri, 26 Jun 2026 20:58:29 +0500
Subject: [PATCH 2/8] Update index.tsx

---
 .../src/theme/ColorModeToggle/index.tsx       | 151 ++----------------
 1 file changed, 16 insertions(+), 135 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
index 92ffe74b11c5..26c8b06edf1b 100644
--- a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
@@ -1,145 +1,26 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, {type ReactNode} from 'react';
+import React from 'react';
 import clsx from 'clsx';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import {translate} from '@docusaurus/Translate';
-import IconLightMode from '@theme/Icon/LightMode';
-import IconDarkMode from '@theme/Icon/DarkMode';
-import IconSystemColorMode from '@theme/Icon/SystemColorMode';
-import type {Props} from '@theme/ColorModeToggle';
-import type {ColorMode} from '@docusaurus/theme-common';
-
+import ThemeClassNames from '@theme/ThemeClassNames';
 import styles from './styles.module.css';
 
-// The order of color modes is defined here, and can be customized with swizzle
-function getNextColorMode(
-  colorMode: ColorMode | null,
-  respectPrefersColorScheme: boolean,
-) {
-  // 2-value transition
-  if (!respectPrefersColorScheme) {
-    return colorMode === 'dark' ? 'light' : 'dark';
-  }
-
-  // 3-value transition
-  switch (colorMode) {
-    case null:
-      return 'light';
-    case 'light':
-      return 'dark';
-    case 'dark':
-      return null;
-    default:
-      throw new Error(`unexpected color mode ${colorMode}`);
-  }
-}
-
-function getColorModeLabel(colorMode: ColorMode | null): string {
-  switch (colorMode) {
-    case null:
-      return translate({
-        message: 'system mode',
-        id: 'theme.colorToggle.ariaLabel.mode.system',
-        description: 'The name for the system color mode',
-      });
-    case 'light':
-      return translate({
-        message: 'light mode',
-        id: 'theme.colorToggle.ariaLabel.mode.light',
-        description: 'The name for the light color mode',
-      });
-    case 'dark':
-      return translate({
-        message: 'dark mode',
-        id: 'theme.colorToggle.ariaLabel.mode.dark',
-        description: 'The name for the dark color mode',
-      });
-    default:
-      throw new Error(`unexpected color mode ${colorMode}`);
-  }
-}
-
-function getColorModeAriaLabel(colorMode: ColorMode | null) {
-  return translate(
-    {
-      message: 'Switch between dark and light mode (currently {mode})',
-      id: 'theme.colorToggle.ariaLabel',
-      description: 'The ARIA label for the color mode toggle',
-    },
-    {
-      mode: getColorModeLabel(colorMode),
-    },
-  );
-}
-
-function CurrentColorModeIcon(): ReactNode {
-  // 3 icons are always rendered for technical reasons
-  // We use "data-theme-choice" to render the correct one
-  // This must work even before React hydrates
-  return (
-    <>
-      <IconLightMode
-        // a18y is handled at the button level,
-        // not relying on button content (svg icons)
-        aria-hidden
-        className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
-      />
-      <IconDarkMode
-        aria-hidden
-        className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
-      />
-      <IconSystemColorMode
-        aria-hidden
-        className={clsx(styles.toggleIcon, styles.systemToggleIcon)}
-      />
-    </>
-  );
-}
+export default function ColorModeToggle({className, value, onChange}) {
+  const isDark = value === 'dark';
 
-function ColorModeToggle({
-  className,
-  buttonClassName,
-  respectPrefersColorScheme,
-  value,
-  onChange,
-}: Props): ReactNode {
-  const isBrowser = useIsBrowser();
   return (
-    <div className={clsx(styles.toggle, className)}>
+    <div className={clsx(styles.toggleContainer, className)}>
       <button
-        className={clsx(
-          'clean-btn',
-          styles.toggleButton,
-          !isBrowser && styles.toggleButtonDisabled,
-          buttonClassName,
-        )}
+        data-tooltip-trigger="true"
+        className={clsx('clean-btn', styles.toggleButton)}
         type="button"
-        onClick={() =>
-          onChange(getNextColorMode(value, respectPrefersColorScheme))
-        }
-        disabled={!isBrowser}
-        title={getColorModeLabel(value)}
-        aria-label={getColorModeAriaLabel(value)}
-
-        // For accessibility decisions
-        // See https://github.com/facebook/docusaurus/issues/7667#issuecomment-2724401796
-
-        // aria-live disabled on purpose - This is annoying because:
-        // - without this attribute, VoiceOver doesn't announce on button enter
-        // - with this attribute, VoiceOver announces twice on ctrl+opt+space
-        // - with this attribute, NVDA announces many times
-        // aria-live="polite"
-      >
-        <CurrentColorModeIcon />
+        onClick={() => onChange(isDark ? 'light' : 'dark')}
+        aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
+        <span className={clsx(styles.toggleIcon, isDark ? styles.toggleIconDark : styles.toggleIconLight)} />
       </button>
+      
+      {/* Dynamic Tooltip Content Using Native Anchor Positioning */}
+      <div data-tooltip-content="true" className={styles.tooltipContent}>
+        {isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      </div>
     </div>
   );
-}
-
-export default React.memo(ColorModeToggle);
+}
\ No newline at end of file

From f81488f326e9fa88535529e207b7a978aaaa30bd Mon Sep 17 00:00:00 2001
From: 1genierock <ogenie261105@gmail.com>
Date: Sat, 27 Jun 2026 11:07:00 +0500
Subject: [PATCH 3/8] Implement toggle button and tooltip styles

Added styles for toggle button and tooltip functionality.
---
 website/src/css/custom.css | 45 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 706d636e6be1..200e4e6d9156 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -275,4 +275,47 @@ html[data-red-border] div#__docusaurus {
 
 [data-tooltip-trigger]:hover + [data-tooltip-content] {
   opacity: 1;
-}
\ No newline at end of file
+}
+
+/* Existing repository styles remain untouched up here */
+
+.toggleContainer {
+  position: relative;
+  display: inline-flex;
+}
+.toggleButton {
+  anchor-name: --color-toggle-anchor;
+}
+.toggleTooltip {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+  padding: 6px 10px;
+  background-color: #1b1b1d;
+  color: #ffffff;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  z-index: 150;
+  opacity: 0;
+  pointer-events: none;
+  white-space: nowrap;
+  transition: opacity 0.15s ease-in-out;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+/* Modern Engine Positioning with safe fallback layer */
+@supports (anchor-name: --test) {
+  .toggleTooltip {
+    position: fixed;
+    position-anchor: --color-toggle-anchor;
+    top: anchor(bottom);
+    left: anchor(center);
+    transform: translateX(-50%);
+  }
+  }
+
+.toggleButton:hover + .toggleTooltip,
+.toggleButton:focus-visible + .toggleTooltip {
+  opacity: 1;
+}

From a32e12dcb0441475da495bce29194335cb62c44f Mon Sep 17 00:00:00 2001
From: 1genierock <ogenie261105@gmail.com>
Date: Sat, 27 Jun 2026 11:15:05 +0500
Subject: [PATCH 4/8] Refactor ColorModeToggle component for improved
 accessibility

---
 .../src/theme/ColorModeToggle/index.tsx       | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
index 26c8b06edf1b..0c103f6bea2b 100644
--- a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
@@ -1,11 +1,27 @@
-import React from 'react';
+ import React from 'react';
 import clsx from 'clsx';
-import ThemeClassNames from '@theme/ThemeClassNames';
+import {translate} from '@docusaurus/Translate';
+import IconLightMode from '@theme/IconLightMode';
+import IconDarkMode from '@theme/IconDarkMode';
+import type {Props} from '@theme/ColorModeToggle';
 import styles from './styles.module.css';
 
-export default function ColorModeToggle({className, value, onChange}) {
+export default function ColorModeToggle({
+  className,
+  value,
+  onChange,
+}: Props): React.JSX.Element {
   const isDark = value === 'dark';
 
+  const title = translate(
+    {
+      message: 'Switch between dark and light mode (current is {mode})',
+      id: 'theme.colorToggle.ariaLabel',
+      description: 'The ARIA label for the navbar color mode toggle button',
+    },
+    {mode: isDark ? 'dark mode' : 'light mode'},
+  );
+
   return (
     <div className={clsx(styles.toggleContainer, className)}>
       <button
@@ -13,14 +29,20 @@ export default function ColorModeToggle({className, value, onChange}) {
         className={clsx('clean-btn', styles.toggleButton)}
         type="button"
         onClick={() => onChange(isDark ? 'light' : 'dark')}
-        aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
-        <span className={clsx(styles.toggleIcon, isDark ? styles.toggleIconDark : styles.toggleIconLight)} />
+        disabled={!onChange}
+        title={title}
+        aria-label={title}>
+        <IconLightMode
+          className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
+        />
+        <IconDarkMode
+          className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
+        />
       </button>
       
-      {/* Dynamic Tooltip Content Using Native Anchor Positioning */}
-      <div data-tooltip-content="true" className={styles.tooltipContent}>
+      <div data-tooltip-content="true" className={styles.toggleTooltip}>
         {isDark ? 'Switch to light mode' : 'Switch to dark mode'}
       </div>
     </div>
   );
-}
\ No newline at end of file
+}

From 2223ac9e2a04e556866d077f2a1222ca13da3be4 Mon Sep 17 00:00:00 2001
From: 1genierock <ogenie261105@gmail.com>
Date: Sat, 27 Jun 2026 11:23:35 +0500
Subject: [PATCH 5/8] Fix formatting issues in ColorModeToggle component

---
 .../src/theme/ColorModeToggle/index.tsx                         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
index 0c103f6bea2b..6581cf5b8801 100644
--- a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
@@ -1,4 +1,4 @@
- import React from 'react';
+  import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
 import IconLightMode from '@theme/IconLightMode';

From bda4ff33157f2462aca4c6dbcaff6a2054565771 Mon Sep 17 00:00:00 2001
From: 1genierock <ogenie261105@gmail.com>
Date: Sat, 27 Jun 2026 12:32:48 +0500
Subject: [PATCH 6/8] Update import paths for light and dark mode icons

---
 .../src/theme/ColorModeToggle/index.tsx                       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
index 6581cf5b8801..5830068202e8 100644
--- a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
@@ -1,8 +1,8 @@
   import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
-import IconLightMode from '@theme/IconLightMode';
-import IconDarkMode from '@theme/IconDarkMode';
+import IconLightMode from '@theme-init/IconLightMode';
+import IconDarkMode from '@theme-init/IconDarkMode';
 import type {Props} from '@theme/ColorModeToggle';
 import styles from './styles.module.css';
 

From f7171b66dd50aee6f264ecfc74d4b89549cbe0f9 Mon Sep 17 00:00:00 2001
From: 1genierock <ogenie261105@gmail.com>
Date: Sat, 27 Jun 2026 14:46:50 +0500
Subject: [PATCH 7/8] Refactor ColorModeToggle to use a single Icon component

---
 .../src/theme/ColorModeToggle/index.tsx           | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
index 5830068202e8..f0154cbfe9ac 100644
--- a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
@@ -1,8 +1,7 @@
   import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
-import IconLightMode from '@theme-init/IconLightMode';
-import IconDarkMode from '@theme-init/IconDarkMode';
+import Icon from '@theme/Icon';
 import type {Props} from '@theme/ColorModeToggle';
 import styles from './styles.module.css';
 
@@ -16,7 +15,7 @@ export default function ColorModeToggle({
   const title = translate(
     {
       message: 'Switch between dark and light mode (current is {mode})',
-      id: 'theme.colorToggle.ariaLabel',
+      id: 'theme.colorModeToggle.ariaLabel',
       description: 'The ARIA label for the navbar color mode toggle button',
     },
     {mode: isDark ? 'dark mode' : 'light mode'},
@@ -32,14 +31,12 @@ export default function ColorModeToggle({
         disabled={!onChange}
         title={title}
         aria-label={title}>
-        <IconLightMode
-          className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
-        />
-        <IconDarkMode
-          className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
+        <Icon
+          name={isDark ? 'light-mode' : 'dark-mode'}
+          className={clsx(styles.toggleIcon, isDark ? styles.toggleIconDark : styles.toggleIconLight)}
         />
       </button>
-      
+
       <div data-tooltip-content="true" className={styles.toggleTooltip}>
         {isDark ? 'Switch to light mode' : 'Switch to dark mode'}
       </div>

From 222d9da9073d75b01603bfb88eda1dcbfd6d5666 Mon Sep 17 00:00:00 2001
From: 1genierock <ogenie261105@gmail.com>
Date: Sat, 27 Jun 2026 17:38:37 +0500
Subject: [PATCH 8/8] chore: trigger clean rebuild

---
 .../docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
index f0154cbfe9ac..667c7559d9d7 100644
--- a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
@@ -43,3 +43,4 @@ export default function ColorModeToggle({
     </div>
   );
 }
+