refactor(theme-classic): replace color mode toggle with button; remove switchConfig

packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts

@@ -509,34 +509,24 @@ describe('themeConfig', () => {
     const withDefaultValues = (colorMode) =>
       _.merge({}, DEFAULT_CONFIG.colorMode, colorMode);
 
-    test('minimal config', () => {
+    test('switch config', () => {
       const colorMode = {
         switchConfig: {
           darkIcon: '🌙',
         },
       };
-      expect(testValidateThemeConfig({colorMode})).toEqual({
-        ...DEFAULT_CONFIG,
-        colorMode: withDefaultValues(colorMode),
-      });
+      expect(() =>
+        testValidateThemeConfig({colorMode}),
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"colorMode.switchConfig is deprecated. If you want to customize the icons for light and dark mode, swizzle IconLightMode, IconDarkMode, or Toggle instead."`,
+      );
     });
 
     test('max config', () => {
       const colorMode = {
         defaultMode: 'dark',
         disableSwitch: false,
         respectPrefersColorScheme: true,
-        switchConfig: {
-          darkIcon: '🌙',
-          darkIconStyle: {
-            marginTop: '1px',
-            marginLeft: '2px',
-          },
-          lightIcon: '☀️',
-          lightIconStyle: {
-            marginLeft: '1px',
-          },
-        },
       };
       expect(testValidateThemeConfig({colorMode})).toEqual({
         ...DEFAULT_CONFIG,
@@ -562,16 +552,6 @@ describe('themeConfig', () => {
         },
       });
     });
-
-    test('empty switch config', () => {
-      const colorMode = {
-        switchConfig: {},
-      };
-      expect(testValidateThemeConfig({colorMode})).toEqual({
-        ...DEFAULT_CONFIG,
-        colorMode: withDefaultValues(colorMode),
-      });
-    });
   });
 });
 

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -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';
 

packages/docusaurus-theme-classic/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>
+  );
+}

packages/docusaurus-theme-classic/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>
+  );
+}

packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx

@@ -5,113 +5,88 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState, useRef, useEffect, memo} from 'react';
+import React, {useState, useRef, useEffect} 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 IconLightMode from '@theme/IconLightMode';
+import IconDarkMode from '@theme/IconDarkMode';
 
 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);
+function Toggle({
+  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]);
+  useEffect(() => {
+    setChecked(defaultChecked);
+  }, [defaultChecked]);
 
-    return (
+  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={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();
-            }
-          }}
+        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>
-    );
-  },
-);
 
-export default function Toggle(props: Props): JSX.Element {
-  const {
-    colorMode: {switchConfig},
-  } = useThemeConfig();
-  const isBrowser = useIsBrowser();
-
-  return (
-    <ToggleComponent
-      switchConfig={switchConfig}
-      disabled={!isBrowser}
-      {...props}
-    />
+      <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(Toggle);