@docusaurus/theme-classic 0.0.0-4655 → 0.0.0-4656

package/lib/getSwizzleConfig.js

@@ -11,91 +11,114 @@ exports.default = getSwizzleConfig;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+/* eslint sort-keys: "error" */
 function getSwizzleConfig() {
   return {
     components: {
       CodeBlock: {
         actions: {
-          wrap: 'safe',
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
         description: 'The component used to render multi-line code blocks, generally used in Markdown files.'
       },
+      ColorModeToggle: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The color mode toggle to switch between light and dark mode.'
+      },
       DocSidebar: {
         actions: {
-          wrap: 'safe',
-          eject: 'unsafe' // too much technical code in sidebar, not very safe atm
-
+          eject: 'unsafe',
+          // too much technical code in sidebar, not very safe atm
+          wrap: 'safe'
         },
         description: 'The sidebar component on docs pages'
       },
       Footer: {
         actions: {
-          wrap: 'safe',
-          eject: 'unsafe' // TODO split footer into smaller parts
-
+          eject: 'unsafe',
+          // TODO split footer into smaller parts
+          wrap: 'safe'
         },
         description: "The footer component of you site's layout"
       },
-      NotFound: {
-        actions: {
-          wrap: 'safe',
-          eject: 'safe'
-        },
-        description: 'The global 404 page of your site, meant to be ejected and customized'
-      },
-      SearchBar: {
+      IconArrow: {
         actions: {
-          wrap: 'safe',
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
-        // TODO how to describe this one properly?
-        // By default it's an empty placeholder for the user to fill
-        description: 'The search bar component of your site, appearing in the navbar.'
+        description: 'The arrow icon component'
       },
-      IconArrow: {
+      IconDarkMode: {
         actions: {
-          wrap: 'safe',
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
-        description: 'The arrow icon component'
+        description: 'The dark mode icon component.'
       },
       IconEdit: {
         actions: {
-          wrap: 'safe',
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
         description: 'The edit icon component'
       },
-      IconMenu: {
+      IconLightMode: {
         actions: {
-          wrap: 'safe',
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
-        description: 'The menu icon component'
+        description: 'The light mode icon component.'
       },
-      'prism-include-languages': {
+      IconMenu: {
         actions: {
-          wrap: 'forbidden',
-          // not a component!
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'safe'
         },
-        description: 'The Prism languages to include for code block syntax highlighting. Meant to be ejected.'
+        description: 'The menu icon component'
       },
       MDXComponents: {
         actions: {
-          wrap: 'forbidden',
-          /// TODO allow wrapping objects???
-          eject: 'safe'
+          eject: 'safe',
+          wrap: 'forbidden' /// TODO allow wrapping objects???
+
         },
         description: 'The MDX components to use for rendering MDX files. Meant to be ejected.'
       },
       // TODO should probably not even appear here
       'NavbarItem/utils': {
         actions: {
-          wrap: 'forbidden',
-          eject: 'forbidden'
+          eject: 'forbidden',
+          wrap: 'forbidden'
         }
+      },
+      NotFound: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The global 404 page of your site, meant to be ejected and customized'
+      },
+      SearchBar: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        // TODO how to describe this one properly?
+        // By default it's an empty placeholder for the user to fill
+        description: 'The search bar component of your site, appearing in the navbar.'
+      },
+      'prism-include-languages': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden' // not a component!
+
+        },
+        description: 'The Prism languages to include for code block syntax highlighting. Meant to be ejected.'
       }
     }
   };

package/lib/theme-classic.d.ts

@@ -632,7 +632,7 @@ declare module '@theme/TOCCollapsible' {
   export default function TOCCollapsible(props: Props): JSX.Element;
 }
 
-declare module '@theme/Toggle' {
+declare module '@theme/ColorModeToggle' {
   import type {SyntheticEvent} from 'react';
 
   export interface Props {
@@ -663,6 +663,14 @@ declare module '@theme/IconArrow' {
   export default function IconArrow(props: Props): JSX.Element;
 }
 
+declare module '@theme/IconDarkMode' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function IconDarkMode(props: Props): JSX.Element;
+}
+
 declare module '@theme/IconEdit' {
   import type {ComponentProps} from 'react';
 
@@ -671,6 +679,14 @@ declare module '@theme/IconEdit' {
   export default function IconEdit(props: Props): JSX.Element;
 }
 
+declare module '@theme/IconLightMode' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function IconLightMode(props: Props): JSX.Element;
+}
+
 declare module '@theme/IconMenu' {
   import type {ComponentProps} from 'react';
 

package/lib/validateThemeConfig.js

@@ -25,13 +25,7 @@ const DocsSchema = _utilsValidation.Joi.object({
 const DEFAULT_COLOR_MODE_CONFIG = {
   defaultMode: 'light',
   disableSwitch: false,
-  respectPrefersColorScheme: false,
-  switchConfig: {
-    darkIcon: '🌜',
-    darkIconStyle: {},
-    lightIcon: '🌞',
-    lightIconStyle: {}
-  }
+  respectPrefersColorScheme: false
 };
 const DEFAULT_CONFIG = {
   colorMode: DEFAULT_COLOR_MODE_CONFIG,
@@ -189,12 +183,9 @@ const ColorModeSchema = _utilsValidation.Joi.object({
   defaultMode: _utilsValidation.Joi.string().equal('dark', 'light').default(DEFAULT_COLOR_MODE_CONFIG.defaultMode),
   disableSwitch: _utilsValidation.Joi.bool().default(DEFAULT_COLOR_MODE_CONFIG.disableSwitch),
   respectPrefersColorScheme: _utilsValidation.Joi.bool().default(DEFAULT_COLOR_MODE_CONFIG.respectPrefersColorScheme),
-  switchConfig: _utilsValidation.Joi.object({
-    darkIcon: _utilsValidation.Joi.string().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIcon),
-    darkIconStyle: _utilsValidation.Joi.object().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIconStyle),
-    lightIcon: _utilsValidation.Joi.string().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIcon),
-    lightIconStyle: _utilsValidation.Joi.object().default(DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIconStyle)
-  }).default(DEFAULT_COLOR_MODE_CONFIG.switchConfig)
+  switchConfig: _utilsValidation.Joi.any().forbidden().messages({
+    'any.unknown': 'colorMode.switchConfig is deprecated. If you want to customize the icons for light and dark mode, swizzle IconLightMode, IconDarkMode, or ColorModeToggle instead.'
+  })
 }).default(DEFAULT_COLOR_MODE_CONFIG); // schema can probably be improved
 
 

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

@@ -0,0 +1,83 @@
+/**
+ * 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, {useState, useRef, useEffect} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {translate} from '@docusaurus/Translate';
+import IconLightMode from '@theme/IconLightMode';
+import IconDarkMode from '@theme/IconDarkMode';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+function ColorModeToggle({className, checked: defaultChecked, onChange}) {
+  const isBrowser = useIsBrowser();
+  const [checked, setChecked] = useState(defaultChecked);
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    setChecked(defaultChecked);
+  }, [defaultChecked]);
+  return (
+    <div
+      className={clsx(styles.toggle, className, {
+        [styles.toggleChecked]: checked,
+        [styles.toggleFocused]: focused,
+        [styles.toggleDisabled]: !isBrowser,
+      })}>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <div
+        className={styles.toggleButton}
+        role="button"
+        tabIndex={-1}
+        onClick={() => inputRef.current?.click()}>
+        <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();
+          }
+        }}
+      />
+    </div>
+  );
+}
+
+export default React.memo(ColorModeToggle);

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

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ */
+
+.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;
+}
+
+.toggleButton {
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.toggleButton:hover {
+  background-color: #00000010;
+}
+
+[data-theme='dark'] .toggleButton:hover {
+  background-color: #ffffff20;
+}
+
+[data-theme='light'] .darkToggleIcon,
+[data-theme='dark'] .lightToggleIcon {
+  display: none;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * 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 from 'react';
+export default function IconDarkMode(props) {
+  return (
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+      <path
+        fill="currentColor"
+        d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,17 @@
+/**
+ * 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 from 'react';
+export default function IconLightMode(props) {
+  return (
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+      <path
+        fill="currentColor"
+        d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
+      />
+    </svg>
+  );
+}

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

@@ -8,7 +8,7 @@ import React, {useCallback, useState, useEffect} from 'react';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import SearchBar from '@theme/SearchBar';
-import Toggle from '@theme/Toggle';
+import ColorModeToggle from '@theme/ColorModeToggle';
 import {
   useThemeConfig,
   useMobileSecondaryMenuRenderer,
@@ -157,7 +157,7 @@ function NavbarMobileSidebar({sidebarShown, toggleSidebar}) {
           titleClassName="navbar__title"
         />
         {!colorModeToggle.disabled && (
-          <Toggle
+          <ColorModeToggle
             className={styles.navbarSidebarToggle}
             checked={colorModeToggle.isDarkTheme}
             onChange={colorModeToggle.toggle}
@@ -254,7 +254,7 @@ export default function Navbar() {
             <NavbarItem {...item} key={i} />
           ))}
           {!colorModeToggle.disabled && (
-            <Toggle
+            <ColorModeToggle
               className={styles.toggle}
               checked={colorModeToggle.isDarkTheme}
               onChange={colorModeToggle.toggle}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4655",
+  "version": "0.0.0-4656",
   "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-4655",
-    "@docusaurus/plugin-content-blog": "0.0.0-4655",
-    "@docusaurus/plugin-content-docs": "0.0.0-4655",
-    "@docusaurus/plugin-content-pages": "0.0.0-4655",
-    "@docusaurus/theme-common": "0.0.0-4655",
-    "@docusaurus/theme-translations": "0.0.0-4655",
-    "@docusaurus/utils": "0.0.0-4655",
-    "@docusaurus/utils-common": "0.0.0-4655",
-    "@docusaurus/utils-validation": "0.0.0-4655",
+    "@docusaurus/core": "0.0.0-4656",
+    "@docusaurus/plugin-content-blog": "0.0.0-4656",
+    "@docusaurus/plugin-content-docs": "0.0.0-4656",
+    "@docusaurus/plugin-content-pages": "0.0.0-4656",
+    "@docusaurus/theme-common": "0.0.0-4656",
+    "@docusaurus/theme-translations": "0.0.0-4656",
+    "@docusaurus/utils": "0.0.0-4656",
+    "@docusaurus/utils-common": "0.0.0-4656",
+    "@docusaurus/utils-validation": "0.0.0-4656",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -42,8 +42,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4655",
-    "@docusaurus/types": "0.0.0-4655",
+    "@docusaurus/module-type-aliases": "0.0.0-4656",
+    "@docusaurus/types": "0.0.0-4656",
     "@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": "9f0edee4694adaf8c8a6e11ef83991519e1f4b90"
+  "gitHead": "9d3c7ee0e8413fe481c1f1be202fd3ec76efb087"
 }

package/src/getSwizzleConfig.ts

@@ -7,94 +7,116 @@
 
 import type {SwizzleConfig} from '@docusaurus/types';
 
+/* eslint sort-keys: "error" */
+
 export default function getSwizzleConfig(): SwizzleConfig {
   return {
     components: {
       CodeBlock: {
         actions: {
-          wrap: 'safe',
           eject: 'safe',
+          wrap: 'safe',
         },
         description:
           'The component used to render multi-line code blocks, generally used in Markdown files.',
       },
-      DocSidebar: {
+      ColorModeToggle: {
         actions: {
+          eject: 'safe',
           wrap: 'safe',
+        },
+        description:
+          'The color mode toggle to switch between light and dark mode.',
+      },
+      DocSidebar: {
+        actions: {
           eject: 'unsafe', // too much technical code in sidebar, not very safe atm
+          wrap: 'safe',
         },
         description: 'The sidebar component on docs pages',
       },
       Footer: {
         actions: {
-          wrap: 'safe',
           eject: 'unsafe', // TODO split footer into smaller parts
+          wrap: 'safe',
         },
         description: "The footer component of you site's layout",
       },
-      NotFound: {
+      IconArrow: {
         actions: {
-          wrap: 'safe',
           eject: 'safe',
-        },
-        description:
-          'The global 404 page of your site, meant to be ejected and customized',
-      },
-      SearchBar: {
-        actions: {
           wrap: 'safe',
-          eject: 'safe',
         },
-        // TODO how to describe this one properly?
-        // By default it's an empty placeholder for the user to fill
-        description:
-          'The search bar component of your site, appearing in the navbar.',
+        description: 'The arrow icon component',
       },
-      IconArrow: {
+      IconDarkMode: {
         actions: {
-          wrap: 'safe',
           eject: 'safe',
+          wrap: 'safe',
         },
-        description: 'The arrow icon component',
+        description: 'The dark mode icon component.',
       },
       IconEdit: {
         actions: {
-          wrap: 'safe',
           eject: 'safe',
+          wrap: 'safe',
         },
         description: 'The edit icon component',
       },
-      IconMenu: {
+      IconLightMode: {
         actions: {
-          wrap: 'safe',
           eject: 'safe',
+          wrap: 'safe',
         },
-        description: 'The menu icon component',
+        description: 'The light mode icon component.',
       },
-
-      'prism-include-languages': {
+      IconMenu: {
         actions: {
-          wrap: 'forbidden', // not a component!
           eject: 'safe',
+          wrap: 'safe',
         },
-        description:
-          'The Prism languages to include for code block syntax highlighting. Meant to be ejected.',
+        description: 'The menu icon component',
       },
       MDXComponents: {
         actions: {
-          wrap: 'forbidden', /// TODO allow wrapping objects???
           eject: 'safe',
+          wrap: 'forbidden', /// TODO allow wrapping objects???
         },
         description:
           'The MDX components to use for rendering MDX files. Meant to be ejected.',
       },
-
       // TODO should probably not even appear here
       'NavbarItem/utils': {
         actions: {
-          wrap: 'forbidden',
           eject: 'forbidden',
+          wrap: 'forbidden',
+        },
+      },
+      NotFound: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The global 404 page of your site, meant to be ejected and customized',
+      },
+      SearchBar: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
         },
+        // TODO how to describe this one properly?
+        // By default it's an empty placeholder for the user to fill
+        description:
+          'The search bar component of your site, appearing in the navbar.',
+      },
+      'prism-include-languages': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden', // not a component!
+        },
+        description:
+          'The Prism languages to include for code block syntax highlighting. Meant to be ejected.',
       },
     },
   };

package/src/theme/ColorModeToggle/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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, {useState, useRef, useEffect} from 'react';
+import type {Props} from '@theme/ColorModeToggle';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {translate} from '@docusaurus/Translate';
+import IconLightMode from '@theme/IconLightMode';
+import IconDarkMode from '@theme/IconDarkMode';
+
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+function ColorModeToggle({
+  className,
+  checked: defaultChecked,
+  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]);
+
+  return (
+    <div
+      className={clsx(styles.toggle, className, {
+        [styles.toggleChecked]: checked,
+        [styles.toggleFocused]: focused,
+        [styles.toggleDisabled]: !isBrowser,
+      })}>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <div
+        className={styles.toggleButton}
+        role="button"
+        tabIndex={-1}
+        onClick={() => inputRef.current?.click()}>
+        <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();
+          }
+        }}
+      />
+    </div>
+  );
+}
+
+export default React.memo(ColorModeToggle);

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

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ */
+
+.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;
+}
+
+.toggleButton {
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.toggleButton:hover {
+  background-color: #00000010;
+}
+
+[data-theme='dark'] .toggleButton:hover {
+  background-color: #ffffff20;
+}
+
+[data-theme='light'] .darkToggleIcon,
+[data-theme='dark'] .lightToggleIcon {
+  display: none;
+}

package/src/theme/IconDarkMode/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * 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 from 'react';
+import type {Props} from '@theme/IconDarkMode';
+
+export default function IconDarkMode(props: Props): JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+      <path
+        fill="currentColor"
+        d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
+      />
+    </svg>
+  );
+}

package/src/theme/IconLightMode/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * 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 from 'react';
+import type {Props} from '@theme/IconLightMode';
+
+export default function IconLightMode(props: Props): JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+      <path
+        fill="currentColor"
+        d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
+      />
+    </svg>
+  );
+}

package/src/theme/Navbar/index.tsx

@@ -9,7 +9,7 @@ import React, {useCallback, useState, useEffect} from 'react';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import SearchBar from '@theme/SearchBar';
-import Toggle from '@theme/Toggle';
+import ColorModeToggle from '@theme/ColorModeToggle';
 import {
   useThemeConfig,
   useMobileSecondaryMenuRenderer,
@@ -171,7 +171,7 @@ function NavbarMobileSidebar({
           titleClassName="navbar__title"
         />
         {!colorModeToggle.disabled && (
-          <Toggle
+          <ColorModeToggle
             className={styles.navbarSidebarToggle}
             checked={colorModeToggle.isDarkTheme}
             onChange={colorModeToggle.toggle}
@@ -271,7 +271,7 @@ export default function Navbar(): JSX.Element {
             <NavbarItem {...item} key={i} />
           ))}
           {!colorModeToggle.disabled && (
-            <Toggle
+            <ColorModeToggle
               className={styles.toggle}
               checked={colorModeToggle.isDarkTheme}
               onChange={colorModeToggle.toggle}

package/src/theme-classic.d.ts

@@ -632,7 +632,7 @@ declare module '@theme/TOCCollapsible' {
   export default function TOCCollapsible(props: Props): JSX.Element;
 }
 
-declare module '@theme/Toggle' {
+declare module '@theme/ColorModeToggle' {
   import type {SyntheticEvent} from 'react';
 
   export interface Props {
@@ -663,6 +663,14 @@ declare module '@theme/IconArrow' {
   export default function IconArrow(props: Props): JSX.Element;
 }
 
+declare module '@theme/IconDarkMode' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function IconDarkMode(props: Props): JSX.Element;
+}
+
 declare module '@theme/IconEdit' {
   import type {ComponentProps} from 'react';
 
@@ -671,6 +679,14 @@ declare module '@theme/IconEdit' {
   export default function IconEdit(props: Props): JSX.Element;
 }
 
+declare module '@theme/IconLightMode' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function IconLightMode(props: Props): JSX.Element;
+}
+
 declare module '@theme/IconMenu' {
   import type {ComponentProps} from 'react';
 

package/src/validateThemeConfig.ts

@@ -21,12 +21,6 @@ const DEFAULT_COLOR_MODE_CONFIG = {
   defaultMode: 'light',
   disableSwitch: false,
   respectPrefersColorScheme: false,
-  switchConfig: {
-    darkIcon: '🌜',
-    darkIconStyle: {},
-    lightIcon: '🌞',
-    lightIconStyle: {},
-  },
 };
 
 export const DEFAULT_CONFIG = {
@@ -220,20 +214,10 @@ const ColorModeSchema = Joi.object({
   respectPrefersColorScheme: Joi.bool().default(
     DEFAULT_COLOR_MODE_CONFIG.respectPrefersColorScheme,
   ),
-  switchConfig: Joi.object({
-    darkIcon: Joi.string().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIcon,
-    ),
-    darkIconStyle: Joi.object().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIconStyle,
-    ),
-    lightIcon: Joi.string().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIcon,
-    ),
-    lightIconStyle: Joi.object().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIconStyle,
-    ),
-  }).default(DEFAULT_COLOR_MODE_CONFIG.switchConfig),
+  switchConfig: Joi.any().forbidden().messages({
+    'any.unknown':
+      'colorMode.switchConfig is deprecated. If you want to customize the icons for light and dark mode, swizzle IconLightMode, IconDarkMode, or ColorModeToggle instead.',
+  }),
 }).default(DEFAULT_COLOR_MODE_CONFIG);
 
 // schema can probably be improved

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

@@ -1,100 +0,0 @@
-/**
- * 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, {useState, useRef, useEffect, memo} from 'react';
-import {useThemeConfig} from '@docusaurus/theme-common';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import {translate} from '@docusaurus/Translate';
-import clsx from 'clsx';
-import styles from './styles.module.css'; // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-
-const ToggleComponent = memo(
-  ({className, switchConfig, checked: defaultChecked, disabled, onChange}) => {
-    const {darkIcon, darkIconStyle, lightIcon, lightIconStyle} = switchConfig;
-    const [checked, setChecked] = useState(defaultChecked);
-    const [focused, setFocused] = useState(false);
-    const inputRef = useRef(null);
-    useEffect(() => {
-      setChecked(defaultChecked);
-    }, [defaultChecked]);
-    return (
-      <div
-        className={clsx(styles.toggle, className, {
-          [styles.toggleChecked]: checked,
-          [styles.toggleFocused]: focused,
-          [styles.toggleDisabled]: disabled,
-        })}>
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-        <div
-          className={styles.toggleTrack}
-          role="button"
-          tabIndex={-1}
-          onClick={() => inputRef.current?.click()}>
-          <div className={styles.toggleTrackCheck}>
-            <span className={styles.toggleIcon} style={darkIconStyle}>
-              {darkIcon}
-            </span>
-          </div>
-          <div className={styles.toggleTrackX}>
-            <span className={styles.toggleIcon} style={lightIconStyle}>
-              {lightIcon}
-            </span>
-          </div>
-          <div className={styles.toggleTrackThumb} />
-        </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();
-            }
-          }}
-        />
-      </div>
-    );
-  },
-);
-export default function Toggle(props) {
-  const {
-    colorMode: {switchConfig},
-  } = useThemeConfig();
-  const isBrowser = useIsBrowser();
-  return (
-    <ToggleComponent
-      switchConfig={switchConfig}
-      disabled={!isBrowser}
-      {...props}
-    />
-  );
-}

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

@@ -1,106 +0,0 @@
-/**
- * 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.
- */
-
-.toggle {
-  touch-action: pan-x;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.toggleScreenReader {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
-
-.toggleDisabled {
-  cursor: not-allowed;
-}
-
-.toggleTrack {
-  width: 50px;
-  height: 24px;
-  border-radius: 30px;
-  background-color: #4d4d4d;
-  transition: all 0.2s ease;
-}
-
-.toggleTrackCheck {
-  position: absolute;
-  width: 14px;
-  height: 10px;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  left: 8px;
-  opacity: 0;
-  transition: opacity 0.25s ease;
-}
-
-.toggleChecked .toggleTrackCheck,
-[data-theme='dark'] .toggle .toggleTrackCheck {
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-.toggleTrackX {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  right: 10px;
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-.toggleChecked .toggleTrackX,
-[data-theme='dark'] .toggle .toggleTrackX {
-  opacity: 0;
-}
-
-.toggleTrackThumb {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 22px;
-  height: 22px;
-  border: 1px solid #4d4d4d;
-  border-radius: 50%;
-  background-color: #fafafa;
-  transition: all 0.25s ease;
-}
-
-.toggleFocused .toggleTrackThumb,
-.toggle:hover .toggleTrackThumb {
-  box-shadow: 0 0 2px 3px var(--ifm-color-primary);
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.toggleChecked .toggleTrackThumb,
-[data-theme='dark'] .toggle .toggleTrackThumb {
-  left: 27px;
-}
-
-.toggle:active:not(.toggleDisabled) .toggleTrackThumb {
-  box-shadow: 0 0 5px 5px var(--ifm-color-primary);
-}
-
-.toggleIcon {
-  align-items: center;
-  display: flex;
-  height: 10px;
-  justify-content: center;
-  width: 10px;
-}

package/src/theme/Toggle/index.tsx

@@ -1,117 +0,0 @@
-/**
- * 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, {useState, useRef, useEffect, memo} from 'react';
-import type {Props} from '@theme/Toggle';
-import {useThemeConfig, type ColorModeConfig} from '@docusaurus/theme-common';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import {translate} from '@docusaurus/Translate';
-
-import clsx from 'clsx';
-import styles from './styles.module.css';
-
-// Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-const ToggleComponent = memo(
-  ({
-    className,
-    switchConfig,
-    checked: defaultChecked,
-    disabled,
-    onChange,
-  }: Props & {
-    switchConfig: ColorModeConfig['switchConfig'];
-    disabled: boolean;
-  }): JSX.Element => {
-    const {darkIcon, darkIconStyle, lightIcon, lightIconStyle} = switchConfig;
-    const [checked, setChecked] = useState(defaultChecked);
-    const [focused, setFocused] = useState(false);
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    useEffect(() => {
-      setChecked(defaultChecked);
-    }, [defaultChecked]);
-
-    return (
-      <div
-        className={clsx(styles.toggle, className, {
-          [styles.toggleChecked]: checked,
-          [styles.toggleFocused]: focused,
-          [styles.toggleDisabled]: disabled,
-        })}>
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-        <div
-          className={styles.toggleTrack}
-          role="button"
-          tabIndex={-1}
-          onClick={() => inputRef.current?.click()}>
-          <div className={styles.toggleTrackCheck}>
-            <span className={styles.toggleIcon} style={darkIconStyle}>
-              {darkIcon}
-            </span>
-          </div>
-          <div className={styles.toggleTrackX}>
-            <span className={styles.toggleIcon} style={lightIconStyle}>
-              {lightIcon}
-            </span>
-          </div>
-          <div className={styles.toggleTrackThumb} />
-        </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();
-            }
-          }}
-        />
-      </div>
-    );
-  },
-);
-
-export default function Toggle(props: Props): JSX.Element {
-  const {
-    colorMode: {switchConfig},
-  } = useThemeConfig();
-  const isBrowser = useIsBrowser();
-
-  return (
-    <ToggleComponent
-      switchConfig={switchConfig}
-      disabled={!isBrowser}
-      {...props}
-    />
-  );
-}

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

@@ -1,106 +0,0 @@
-/**
- * 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.
- */
-
-.toggle {
-  touch-action: pan-x;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.toggleScreenReader {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
-
-.toggleDisabled {
-  cursor: not-allowed;
-}
-
-.toggleTrack {
-  width: 50px;
-  height: 24px;
-  border-radius: 30px;
-  background-color: #4d4d4d;
-  transition: all 0.2s ease;
-}
-
-.toggleTrackCheck {
-  position: absolute;
-  width: 14px;
-  height: 10px;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  left: 8px;
-  opacity: 0;
-  transition: opacity 0.25s ease;
-}
-
-.toggleChecked .toggleTrackCheck,
-[data-theme='dark'] .toggle .toggleTrackCheck {
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-.toggleTrackX {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  right: 10px;
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-.toggleChecked .toggleTrackX,
-[data-theme='dark'] .toggle .toggleTrackX {
-  opacity: 0;
-}
-
-.toggleTrackThumb {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 22px;
-  height: 22px;
-  border: 1px solid #4d4d4d;
-  border-radius: 50%;
-  background-color: #fafafa;
-  transition: all 0.25s ease;
-}
-
-.toggleFocused .toggleTrackThumb,
-.toggle:hover .toggleTrackThumb {
-  box-shadow: 0 0 2px 3px var(--ifm-color-primary);
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.toggleChecked .toggleTrackThumb,
-[data-theme='dark'] .toggle .toggleTrackThumb {
-  left: 27px;
-}
-
-.toggle:active:not(.toggleDisabled) .toggleTrackThumb {
-  box-shadow: 0 0 5px 5px var(--ifm-color-primary);
-}
-
-.toggleIcon {
-  align-items: center;
-  display: flex;
-  height: 10px;
-  justify-content: center;
-  width: 10px;
-}