add IconButton component (taken from theme-classic/ColorModeToggle).

src/components/IconButton/IconButton.module.scss

@@ -0,0 +1,17 @@
+.root {
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
+
+  width: 2rem;
+  height: 2rem;
+}
+
+.root:hover {
+  background: var(--ifm-color-emphasis-200);
+}

src/components/IconButton/IconButton.tsx

@@ -0,0 +1,20 @@
+import clsx from 'clsx'
+import React from 'react'
+import styles from './IconButton.module.scss'
+
+export const IconButton: React.FC<
+  React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > & {}
+> = ({ children, className, ...props }) => {
+  return (
+    <button
+      type="button"
+      className={clsx('clean-btn', styles.root, className)}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

src/components/IconButton/index.ts

@@ -0,0 +1 @@
+export * from './IconButton'

src/theme/ColorModeToggle/index.tsx

@@ -0,0 +1,56 @@
+import { translate } from '@docusaurus/Translate'
+import useIsBrowser from '@docusaurus/useIsBrowser'
+import { IconButton } from '@site/src/components/IconButton'
+import type { Props } from '@theme/ColorModeToggle'
+import IconDarkMode from '@theme/Icon/DarkMode'
+import IconLightMode from '@theme/Icon/LightMode'
+import clsx from 'clsx'
+import React from 'react'
+import styles from './styles.module.css'
+
+function ColorModeToggle({ className, value, onChange }: Props): JSX.Element {
+  const isBrowser = useIsBrowser()
+
+  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)}>
+      <IconButton
+        title={title}
+        aria-label={title}
+        disabled={!isBrowser}
+        className={clsx(!isBrowser && styles.toggleButtonDisabled)}
+        onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
+      >
+        <IconLightMode
+          className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
+        />
+        <IconDarkMode
+          className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
+        />
+      </IconButton>
+    </div>
+  )
+}
+
+export default React.memo(ColorModeToggle)

src/theme/ColorModeToggle/styles.module.css

@@ -0,0 +1,8 @@
+[data-theme='light'] .darkToggleIcon,
+[data-theme='dark'] .lightToggleIcon {
+  display: none;
+}
+
+.toggleButtonDisabled {
+  cursor: not-allowed;
+}