@docusaurus/theme-classic 0.0.0-4732 → 0.0.0-4735

package/lib/theme-classic.d.ts

@@ -746,12 +746,16 @@ declare module '@theme/TOCCollapsible' {
 }
 
 declare module '@theme/ColorModeToggle' {
-  import type {SyntheticEvent} from 'react';
+  import type {ColorMode} from '@docusaurus/theme-common';
 
   export interface Props {
     readonly className?: string;
-    readonly checked: boolean;
-    readonly onChange: (e: SyntheticEvent) => void;
+    readonly value: ColorMode;
+    /**
+     * The parameter represents the "to-be" value. For example, if currently in
+     * dark mode, clicking the button should call `onChange("light")`
+     */
+    readonly onChange: (colorMode: ColorMode) => void;
   }
 
   export default function Toggle(props: Props): JSX.Element;

package/lib-next/theme/ColorModeToggle/index.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useState, useRef, useEffect} from 'react';
+import React from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {translate} from '@docusaurus/Translate';
 import IconLightMode from '@theme/IconLightMode';
@@ -12,72 +12,49 @@ import IconDarkMode from '@theme/IconDarkMode';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
-function ColorModeToggle({className, checked: defaultChecked, onChange}) {
+function ColorModeToggle({className, value, onChange}) {
   const isBrowser = useIsBrowser();
-  const [checked, setChecked] = useState(defaultChecked);
-  const [focused, setFocused] = useState(false);
-  const inputRef = useRef(null);
-  useEffect(() => {
-    setChecked(defaultChecked);
-  }, [defaultChecked]);
+  const title = translate(
+    {
+      message: 'Switch between dark and light mode (currently {mode})',
+      id: 'theme.colorToggle.ariaLabel',
+      description: 'The ARIA label for the navbar color mode toggle',
+    },
+    {
+      mode:
+        value === 'dark'
+          ? translate({
+              message: 'dark mode',
+              id: 'theme.colorToggle.ariaLabel.mode.dark',
+              description: 'The name for the dark color mode',
+            })
+          : translate({
+              message: 'light mode',
+              id: 'theme.colorToggle.ariaLabel.mode.light',
+              description: 'The name for the light color mode',
+            }),
+    },
+  );
   return (
-    <div
-      className={clsx(
-        styles.toggle,
-        className,
-        checked && styles.toggleChecked,
-        focused && styles.toggleFocused,
-        !isBrowser && styles.toggleDisabled,
-      )}>
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-      <div
-        className={styles.toggleButton}
-        role="button"
-        tabIndex={-1}
-        onClick={() => inputRef.current?.click()}>
+    <div className={clsx(styles.toggle, className)}>
+      <button
+        className={clsx(
+          'clean-btn',
+          styles.toggleButton,
+          !isBrowser && styles.toggleButtonDisabled,
+        )}
+        type="button"
+        onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
+        disabled={!isBrowser}
+        title={title}
+        aria-label={title}>
         <IconLightMode
           className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
         />
         <IconDarkMode
           className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
         />
-      </div>
-
-      <input
-        ref={inputRef}
-        checked={checked}
-        type="checkbox"
-        className={styles.toggleScreenReader}
-        aria-label={translate(
-          {
-            message: 'Switch between dark and light mode (currently {mode})',
-            id: 'theme.colorToggle.ariaLabel',
-            description: 'The ARIA label for the navbar color mode toggle',
-          },
-          {
-            mode: checked
-              ? translate({
-                  message: 'dark mode',
-                  id: 'theme.colorToggle.ariaLabel.mode.dark',
-                  description: 'The name for the dark color mode',
-                })
-              : translate({
-                  message: 'light mode',
-                  id: 'theme.colorToggle.ariaLabel.mode.light',
-                  description: 'The name for the light color mode',
-                }),
-          },
-        )}
-        onChange={onChange}
-        onClick={() => setChecked(!checked)}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            inputRef.current?.click();
-          }
-        }}
-      />
+      </button>
     </div>
   );
 }

package/lib-next/theme/ColorModeToggle/styles.module.css

@@ -6,28 +6,11 @@
  */
 
 .toggle {
-  position: relative;
-  width: 32px;
-  height: 32px;
-}
-
-.toggleScreenReader {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
-
-.toggleDisabled {
-  cursor: not-allowed;
+  width: 2rem;
+  height: 2rem;
 }
 
 .toggleButton {
-  cursor: pointer;
-  user-select: none;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   display: flex;
@@ -35,17 +18,18 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
 }
 
 .toggleButton:hover {
-  background-color: #00000010;
-}
-
-[data-theme='dark'] .toggleButton:hover {
-  background-color: #ffffff20;
+  background: var(--ifm-color-emphasis-200);
 }
 
 [data-theme='light'] .darkToggleIcon,
 [data-theme='dark'] .lightToggleIcon {
   display: none;
 }
+
+.toggleButtonDisabled {
+  cursor: not-allowed;
+}

package/lib-next/theme/DocBreadcrumbs/index.js

@@ -16,7 +16,7 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl'; // TODO move to design system folder
 
 function BreadcrumbsItemLink({children, href}) {
-  const className = clsx('breadcrumbs__link', styles.breadcrumbsItemLink);
+  const className = 'breadcrumbs__link';
   return href ? (
     <Link className={className} href={href} itemProp="item">
       <span itemProp="name">{children}</span>
@@ -81,7 +81,8 @@ export default function DocBreadcrumbs() {
             key={idx}
             active={idx === breadcrumbs.length - 1}
             index={idx}>
-            <BreadcrumbsItemLink href={item.href}>
+            <BreadcrumbsItemLink
+              href={idx < breadcrumbs.length - 1 ? item.href : undefined}>
               {item.label}
             </BreadcrumbsItemLink>
           </BreadcrumbsItem>

package/lib-next/theme/DocBreadcrumbs/styles.module.css

@@ -6,21 +6,6 @@
  */
 
 .breadcrumbsContainer {
-  margin-bottom: 0.4rem;
-}
-
-.breadcrumbsItemLink {
-  --ifm-breadcrumb-size-multiplier: 0.7 !important;
-  margin-bottom: 0.4rem;
-  background: var(--ifm-color-gray-100);
-}
-
-html[data-theme='dark'] .breadcrumbsItemLink {
-  background-color: var(--ifm-color-gray-900);
-}
-
-@media (min-width: 997px) {
-  .breadcrumbsItemLink {
-    --ifm-breadcrumb-size-multiplier: 0.8;
-  }
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
 }

package/lib-next/theme/DocItem/index.js

@@ -15,7 +15,11 @@ import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
-import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
+import {
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  useWindowSize,
+} from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import MDXContent from '@theme/MDXContent';
 export default function DocItem(props) {
@@ -41,7 +45,7 @@ export default function DocItem(props) {
   const renderTocDesktop =
     canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
   return (
-    <>
+    <HtmlClassNameProvider className={`docs-doc-id-${metadata.unversionedId}`}>
       <Seo
         {...{
           title,
@@ -106,6 +110,6 @@ export default function DocItem(props) {
           </div>
         )}
       </div>
-    </>
+    </HtmlClassNameProvider>
   );
 }

package/lib-next/theme/DocPage/index.js

@@ -16,13 +16,13 @@ import {translate} from '@docusaurus/Translate';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import {
+  HtmlClassNameProvider,
   ThemeClassNames,
   docVersionSearchTag,
   DocsSidebarProvider,
   useDocsSidebar,
   DocsVersionProvider,
 } from '@docusaurus/theme-common';
-import Head from '@docusaurus/Head';
 
 function DocPageContent({
   currentDocRoute,
@@ -145,11 +145,7 @@ export default function DocPage(props) {
     ? versionMetadata.docsSidebars[sidebarName]
     : null;
   return (
-    <>
-      <Head>
-        {/* TODO we should add a core addRoute({htmlClassName}) action */}
-        <html className={versionMetadata.className} />
-      </Head>
+    <HtmlClassNameProvider className={versionMetadata.className}>
       <DocsVersionProvider version={versionMetadata}>
         <DocsSidebarProvider sidebar={sidebar ?? null}>
           <DocPageContent
@@ -162,6 +158,6 @@ export default function DocPage(props) {
           </DocPageContent>
         </DocsSidebarProvider>
       </DocsVersionProvider>
-    </>
+    </HtmlClassNameProvider>
   );
 }

package/lib-next/theme/LayoutProviders/index.js

@@ -12,6 +12,7 @@ import {
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
   ScrollControllerProvider,
+  PluginHtmlClassNameProvider,
 } from '@docusaurus/theme-common';
 export default function LayoutProviders({children}) {
   return (
@@ -21,7 +22,9 @@ export default function LayoutProviders({children}) {
           <ScrollControllerProvider>
             <DocsPreferredVersionContextProvider>
               <MobileSecondaryMenuProvider>
-                {children}
+                <PluginHtmlClassNameProvider>
+                  {children}
+                </PluginHtmlClassNameProvider>
               </MobileSecondaryMenuProvider>
             </DocsPreferredVersionContextProvider>
           </ScrollControllerProvider>

package/lib-next/theme/Navbar/index.js

@@ -84,14 +84,10 @@ function useColorModeToggle() {
   const {
     colorMode: {disableSwitch},
   } = useThemeConfig();
-  const {isDarkTheme, setLightTheme, setDarkTheme} = useColorMode();
-  const toggle = useCallback(
-    (e) => (e.target.checked ? setDarkTheme() : setLightTheme()),
-    [setLightTheme, setDarkTheme],
-  );
+  const {colorMode, setColorMode} = useColorMode();
   return {
-    isDarkTheme,
-    toggle,
+    value: colorMode,
+    onChange: setColorMode,
     disabled: disableSwitch,
   };
 }
@@ -159,8 +155,8 @@ function NavbarMobileSidebar({sidebarShown, toggleSidebar}) {
         {!colorModeToggle.disabled && (
           <ColorModeToggle
             className={styles.navbarSidebarToggle}
-            checked={colorModeToggle.isDarkTheme}
-            onChange={colorModeToggle.toggle}
+            value={colorModeToggle.value}
+            onChange={colorModeToggle.onChange}
           />
         )}
         <button
@@ -262,8 +258,8 @@ export default function Navbar() {
           {!colorModeToggle.disabled && (
             <ColorModeToggle
               className={styles.toggle}
-              checked={colorModeToggle.isDarkTheme}
-              onChange={colorModeToggle.toggle}
+              value={colorModeToggle.value}
+              onChange={colorModeToggle.onChange}
             />
           )}
           {!hasSearchNavbarItem && <SearchBar />}

package/lib-next/theme/ThemedImage/index.js

@@ -11,9 +11,9 @@ import {useColorMode} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 export default function ThemedImage(props) {
   const isBrowser = useIsBrowser();
-  const {isDarkTheme} = useColorMode();
+  const {colorMode} = useColorMode();
   const {sources, className, alt, ...propsRest} = props;
-  const clientThemes = isDarkTheme ? ['dark'] : ['light'];
+  const clientThemes = colorMode === 'dark' ? ['dark'] : ['light'];
   const renderedSourceNames = isBrowser
     ? clientThemes // We need to render both images on the server to avoid flash
     : // See https://github.com/facebook/docusaurus/pull/3730

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4732",
+  "version": "0.0.0-4735",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4732",
-    "@docusaurus/plugin-content-blog": "0.0.0-4732",
-    "@docusaurus/plugin-content-docs": "0.0.0-4732",
-    "@docusaurus/plugin-content-pages": "0.0.0-4732",
-    "@docusaurus/theme-common": "0.0.0-4732",
-    "@docusaurus/theme-translations": "0.0.0-4732",
-    "@docusaurus/utils": "0.0.0-4732",
-    "@docusaurus/utils-common": "0.0.0-4732",
-    "@docusaurus/utils-validation": "0.0.0-4732",
+    "@docusaurus/core": "0.0.0-4735",
+    "@docusaurus/plugin-content-blog": "0.0.0-4735",
+    "@docusaurus/plugin-content-docs": "0.0.0-4735",
+    "@docusaurus/plugin-content-pages": "0.0.0-4735",
+    "@docusaurus/theme-common": "0.0.0-4735",
+    "@docusaurus/theme-translations": "0.0.0-4735",
+    "@docusaurus/utils": "0.0.0-4735",
+    "@docusaurus/utils-common": "0.0.0-4735",
+    "@docusaurus/utils-validation": "0.0.0-4735",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -42,8 +42,8 @@
     "rtlcss": "^3.5.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4732",
-    "@docusaurus/types": "0.0.0-4732",
+    "@docusaurus/module-type-aliases": "0.0.0-4735",
+    "@docusaurus/types": "0.0.0-4735",
     "@types/mdx-js__react": "^1.5.5",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.1.2",
@@ -59,5 +59,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "da1dfdadc386a446278acd3922f327b291b7b7f1"
+  "gitHead": "0f869a8574293be34dcba878680b8adb519887dd"
 }

package/src/theme/ColorModeToggle/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState, useRef, useEffect} from 'react';
+import React from 'react';
 import type {Props} from '@theme/ColorModeToggle';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {translate} from '@docusaurus/Translate';
@@ -15,78 +15,51 @@ import IconDarkMode from '@theme/IconDarkMode';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
-function ColorModeToggle({
-  className,
-  checked: defaultChecked,
-  onChange,
-}: Props): JSX.Element {
+function ColorModeToggle({className, value, onChange}: Props): JSX.Element {
   const isBrowser = useIsBrowser();
-  const [checked, setChecked] = useState(defaultChecked);
-  const [focused, setFocused] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    setChecked(defaultChecked);
-  }, [defaultChecked]);
+  const title = translate(
+    {
+      message: 'Switch between dark and light mode (currently {mode})',
+      id: 'theme.colorToggle.ariaLabel',
+      description: 'The ARIA label for the navbar color mode toggle',
+    },
+    {
+      mode:
+        value === 'dark'
+          ? translate({
+              message: 'dark mode',
+              id: 'theme.colorToggle.ariaLabel.mode.dark',
+              description: 'The name for the dark color mode',
+            })
+          : translate({
+              message: 'light mode',
+              id: 'theme.colorToggle.ariaLabel.mode.light',
+              description: 'The name for the light color mode',
+            }),
+    },
+  );
 
   return (
-    <div
-      className={clsx(
-        styles.toggle,
-        className,
-        checked && styles.toggleChecked,
-        focused && styles.toggleFocused,
-        !isBrowser && styles.toggleDisabled,
-      )}>
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-      <div
-        className={styles.toggleButton}
-        role="button"
-        tabIndex={-1}
-        onClick={() => inputRef.current?.click()}>
+    <div className={clsx(styles.toggle, className)}>
+      <button
+        className={clsx(
+          'clean-btn',
+          styles.toggleButton,
+          !isBrowser && styles.toggleButtonDisabled,
+        )}
+        type="button"
+        onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
+        disabled={!isBrowser}
+        title={title}
+        aria-label={title}>
         <IconLightMode
           className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
         />
         <IconDarkMode
           className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
         />
-      </div>
-
-      <input
-        ref={inputRef}
-        checked={checked}
-        type="checkbox"
-        className={styles.toggleScreenReader}
-        aria-label={translate(
-          {
-            message: 'Switch between dark and light mode (currently {mode})',
-            id: 'theme.colorToggle.ariaLabel',
-            description: 'The ARIA label for the navbar color mode toggle',
-          },
-          {
-            mode: checked
-              ? translate({
-                  message: 'dark mode',
-                  id: 'theme.colorToggle.ariaLabel.mode.dark',
-                  description: 'The name for the dark color mode',
-                })
-              : translate({
-                  message: 'light mode',
-                  id: 'theme.colorToggle.ariaLabel.mode.light',
-                  description: 'The name for the light color mode',
-                }),
-          },
-        )}
-        onChange={onChange}
-        onClick={() => setChecked(!checked)}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            inputRef.current?.click();
-          }
-        }}
-      />
+      </button>
     </div>
   );
 }

package/src/theme/ColorModeToggle/styles.module.css

@@ -6,28 +6,11 @@
  */
 
 .toggle {
-  position: relative;
-  width: 32px;
-  height: 32px;
-}
-
-.toggleScreenReader {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
-
-.toggleDisabled {
-  cursor: not-allowed;
+  width: 2rem;
+  height: 2rem;
 }
 
 .toggleButton {
-  cursor: pointer;
-  user-select: none;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   display: flex;
@@ -35,17 +18,18 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
 }
 
 .toggleButton:hover {
-  background-color: #00000010;
-}
-
-[data-theme='dark'] .toggleButton:hover {
-  background-color: #ffffff20;
+  background: var(--ifm-color-emphasis-200);
 }
 
 [data-theme='light'] .darkToggleIcon,
 [data-theme='dark'] .lightToggleIcon {
   display: none;
 }
+
+.toggleButtonDisabled {
+  cursor: not-allowed;
+}

package/src/theme/DocBreadcrumbs/index.tsx

@@ -24,7 +24,7 @@ function BreadcrumbsItemLink({
   children: ReactNode;
   href?: string;
 }): JSX.Element {
-  const className = clsx('breadcrumbs__link', styles.breadcrumbsItemLink);
+  const className = 'breadcrumbs__link';
   return href ? (
     <Link className={className} href={href} itemProp="item">
       <span itemProp="name">{children}</span>
@@ -98,7 +98,8 @@ export default function DocBreadcrumbs(): JSX.Element | null {
             key={idx}
             active={idx === breadcrumbs.length - 1}
             index={idx}>
-            <BreadcrumbsItemLink href={item.href}>
+            <BreadcrumbsItemLink
+              href={idx < breadcrumbs.length - 1 ? item.href : undefined}>
               {item.label}
             </BreadcrumbsItemLink>
           </BreadcrumbsItem>

package/src/theme/DocBreadcrumbs/styles.module.css

@@ -6,21 +6,6 @@
  */
 
 .breadcrumbsContainer {
-  margin-bottom: 0.4rem;
-}
-
-.breadcrumbsItemLink {
-  --ifm-breadcrumb-size-multiplier: 0.7 !important;
-  margin-bottom: 0.4rem;
-  background: var(--ifm-color-gray-100);
-}
-
-html[data-theme='dark'] .breadcrumbsItemLink {
-  background-color: var(--ifm-color-gray-900);
-}
-
-@media (min-width: 997px) {
-  .breadcrumbsItemLink {
-    --ifm-breadcrumb-size-multiplier: 0.8;
-  }
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
 }

package/src/theme/DocItem/index.tsx

@@ -17,7 +17,11 @@ import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
-import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
+import {
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  useWindowSize,
+} from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import MDXContent from '@theme/MDXContent';
 
@@ -49,7 +53,7 @@ export default function DocItem(props: Props): JSX.Element {
     canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
 
   return (
-    <>
+    <HtmlClassNameProvider className={`docs-doc-id-${metadata.unversionedId}`}>
       <Seo {...{title, description, keywords, image}} />
 
       <div className="row">
@@ -107,6 +111,6 @@ export default function DocItem(props: Props): JSX.Element {
           </div>
         )}
       </div>
-    </>
+    </HtmlClassNameProvider>
   );
 }

package/src/theme/DocPage/index.tsx

@@ -20,14 +20,15 @@ import {translate} from '@docusaurus/Translate';
 
 import clsx from 'clsx';
 import styles from './styles.module.css';
+
 import {
+  HtmlClassNameProvider,
   ThemeClassNames,
   docVersionSearchTag,
   DocsSidebarProvider,
   useDocsSidebar,
   DocsVersionProvider,
 } from '@docusaurus/theme-common';
-import Head from '@docusaurus/Head';
 
 type DocPageContentProps = {
   readonly currentDocRoute: DocumentRoute;
@@ -160,11 +161,7 @@ export default function DocPage(props: Props): JSX.Element {
     : null;
 
   return (
-    <>
-      <Head>
-        {/* TODO we should add a core addRoute({htmlClassName}) action */}
-        <html className={versionMetadata.className} />
-      </Head>
+    <HtmlClassNameProvider className={versionMetadata.className}>
       <DocsVersionProvider version={versionMetadata}>
         <DocsSidebarProvider sidebar={sidebar ?? null}>
           <DocPageContent
@@ -175,6 +172,6 @@ export default function DocPage(props: Props): JSX.Element {
           </DocPageContent>
         </DocsSidebarProvider>
       </DocsVersionProvider>
-    </>
+    </HtmlClassNameProvider>
   );
 }

package/src/theme/LayoutProviders/index.tsx

@@ -13,6 +13,7 @@ import {
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
   ScrollControllerProvider,
+  PluginHtmlClassNameProvider,
 } from '@docusaurus/theme-common';
 import type {Props} from '@theme/LayoutProviders';
 
@@ -24,7 +25,9 @@ export default function LayoutProviders({children}: Props): JSX.Element {
           <ScrollControllerProvider>
             <DocsPreferredVersionContextProvider>
               <MobileSecondaryMenuProvider>
-                {children}
+                <PluginHtmlClassNameProvider>
+                  {children}
+                </PluginHtmlClassNameProvider>
               </MobileSecondaryMenuProvider>
             </DocsPreferredVersionContextProvider>
           </ScrollControllerProvider>

package/src/theme/Navbar/index.tsx

@@ -88,12 +88,12 @@ function useColorModeToggle() {
   const {
     colorMode: {disableSwitch},
   } = useThemeConfig();
-  const {isDarkTheme, setLightTheme, setDarkTheme} = useColorMode();
-  const toggle = useCallback(
-    (e) => (e.target.checked ? setDarkTheme() : setLightTheme()),
-    [setLightTheme, setDarkTheme],
-  );
-  return {isDarkTheme, toggle, disabled: disableSwitch};
+  const {colorMode, setColorMode} = useColorMode();
+  return {
+    value: colorMode,
+    onChange: setColorMode,
+    disabled: disableSwitch,
+  };
 }
 
 function useSecondaryMenu({
@@ -173,8 +173,8 @@ function NavbarMobileSidebar({
         {!colorModeToggle.disabled && (
           <ColorModeToggle
             className={styles.navbarSidebarToggle}
-            checked={colorModeToggle.isDarkTheme}
-            onChange={colorModeToggle.toggle}
+            value={colorModeToggle.value}
+            onChange={colorModeToggle.onChange}
           />
         )}
         <button
@@ -279,8 +279,8 @@ export default function Navbar(): JSX.Element {
           {!colorModeToggle.disabled && (
             <ColorModeToggle
               className={styles.toggle}
-              checked={colorModeToggle.isDarkTheme}
-              onChange={colorModeToggle.toggle}
+              value={colorModeToggle.value}
+              onChange={colorModeToggle.onChange}
             />
           )}
           {!hasSearchNavbarItem && <SearchBar />}

package/src/theme/ThemedImage/index.tsx

@@ -16,12 +16,13 @@ import styles from './styles.module.css';
 
 export default function ThemedImage(props: Props): JSX.Element {
   const isBrowser = useIsBrowser();
-  const {isDarkTheme} = useColorMode();
+  const {colorMode} = useColorMode();
   const {sources, className, alt, ...propsRest} = props;
 
   type SourceName = keyof Props['sources'];
 
-  const clientThemes: SourceName[] = isDarkTheme ? ['dark'] : ['light'];
+  const clientThemes: SourceName[] =
+    colorMode === 'dark' ? ['dark'] : ['light'];
 
   const renderedSourceNames: SourceName[] = isBrowser
     ? clientThemes

package/src/theme-classic.d.ts

@@ -746,12 +746,16 @@ declare module '@theme/TOCCollapsible' {
 }
 
 declare module '@theme/ColorModeToggle' {
-  import type {SyntheticEvent} from 'react';
+  import type {ColorMode} from '@docusaurus/theme-common';
 
   export interface Props {
     readonly className?: string;
-    readonly checked: boolean;
-    readonly onChange: (e: SyntheticEvent) => void;
+    readonly value: ColorMode;
+    /**
+     * The parameter represents the "to-be" value. For example, if currently in
+     * dark mode, clicking the button should call `onChange("light")`
+     */
+    readonly onChange: (colorMode: ColorMode) => void;
   }
 
   export default function Toggle(props: Props): JSX.Element;