@docusaurus/theme-classic 0.0.0-4734 → 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/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-4734",
+  "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-4734",
-    "@docusaurus/plugin-content-blog": "0.0.0-4734",
-    "@docusaurus/plugin-content-docs": "0.0.0-4734",
-    "@docusaurus/plugin-content-pages": "0.0.0-4734",
-    "@docusaurus/theme-common": "0.0.0-4734",
-    "@docusaurus/theme-translations": "0.0.0-4734",
-    "@docusaurus/utils": "0.0.0-4734",
-    "@docusaurus/utils-common": "0.0.0-4734",
-    "@docusaurus/utils-validation": "0.0.0-4734",
+    "@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-4734",
-    "@docusaurus/types": "0.0.0-4734",
+    "@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": "0ca49e19e1c96a7d4a0f2bb72ccfca4b7a3eb9bb"
+  "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/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;