add simple dark mode switch toggle

docusaurus.config.js

@@ -72,6 +72,7 @@ const config = {
       // TODO: Do we want to support light mode?
       colorMode: {
         defaultMode: "dark",
+        disableSwitch: false,
         respectPrefersColorScheme: false,
       },
       docs: {

src/theme/ColorModeToggle/Icon/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import clsx from "clsx";
+
+const iconMap = {
+  dark: "M6.81174 0.31475C6.94476 0.433666 7.00433 0.614454 6.96806 0.789151C6.86598 1.28081 6.8125 1.78975 6.8125 2.31251C6.8125 6.45437 10.1706 9.81251 14.3125 9.81251C14.8353 9.81251 15.3442 9.75903 15.8359 9.65695C16.0106 9.62068 16.1913 9.68025 16.3103 9.81327C16.4292 9.94628 16.4682 10.1326 16.4127 10.3021C15.3655 13.4989 12.3616 15.8125 8.8125 15.8125C4.39436 15.8125 0.8125 12.2307 0.8125 7.81251C0.8125 4.26343 3.12607 1.25946 6.32286 0.21235C6.49242 0.15681 6.67873 0.195834 6.81174 0.31475ZM5.85376 1.4715C3.46675 2.58671 1.8125 5.00621 1.8125 7.81251C1.8125 11.6784 4.94664 14.8125 8.8125 14.8125C11.6188 14.8125 14.0383 13.1583 15.1535 10.7713C14.8768 10.7986 14.5963 10.8125 14.3125 10.8125C9.61836 10.8125 5.8125 7.00665 5.8125 2.31251C5.8125 2.02874 5.82644 1.74823 5.85376 1.4715Z",
+  light:
+    "M8.3125 0.5C8.58864 0.5 8.8125 0.723858 8.8125 1V2C8.8125 2.27614 8.58864 2.5 8.3125 2.5C8.03636 2.5 7.8125 2.27614 7.8125 2V1C7.8125 0.723858 8.03636 0.5 8.3125 0.5ZM3.00895 2.69645C3.20421 2.50118 3.52079 2.50118 3.71605 2.69645L4.42305 3.40345C4.61832 3.59871 4.61832 3.91529 4.42305 4.11055C4.22779 4.30582 3.91121 4.30582 3.71595 4.11055L3.00895 3.40355C2.81368 3.20829 2.81368 2.89171 3.00895 2.69645ZM13.6161 2.69645C13.8113 2.89171 13.8113 3.20829 13.6161 3.40355L12.9091 4.11055C12.7138 4.30582 12.3972 4.30582 12.2019 4.11055C12.0067 3.91529 12.0067 3.59871 12.2019 3.40345L12.9089 2.69645C13.1042 2.50118 13.4208 2.50118 13.6161 2.69645ZM8.3125 5.5C6.93179 5.5 5.8125 6.61929 5.8125 8C5.8125 9.38071 6.93179 10.5 8.3125 10.5C9.69321 10.5 10.8125 9.38071 10.8125 8C10.8125 6.61929 9.69321 5.5 8.3125 5.5ZM4.8125 8C4.8125 6.067 6.3795 4.5 8.3125 4.5C10.2455 4.5 11.8125 6.067 11.8125 8C11.8125 9.933 10.2455 11.5 8.3125 11.5C6.3795 11.5 4.8125 9.933 4.8125 8ZM0.8125 8C0.8125 7.72386 1.03636 7.5 1.3125 7.5H2.3125C2.58864 7.5 2.8125 7.72386 2.8125 8C2.8125 8.27614 2.58864 8.5 2.3125 8.5H1.3125C1.03636 8.5 0.8125 8.27614 0.8125 8ZM13.8125 8C13.8125 7.72386 14.0364 7.5 14.3125 7.5H15.3125C15.5886 7.5 15.8125 7.72386 15.8125 8C15.8125 8.27614 15.5886 8.5 15.3125 8.5H14.3125C14.0364 8.5 13.8125 8.27614 13.8125 8ZM4.42305 11.8894C4.61832 12.0847 4.61832 12.4013 4.42305 12.5966L3.71605 13.3036C3.52079 13.4988 3.20421 13.4988 3.00895 13.3036C2.81368 13.1083 2.81368 12.7917 3.00895 12.5964L3.71595 11.8894C3.91121 11.6942 4.22779 11.6942 4.42305 11.8894ZM12.2019 11.8894C12.3972 11.6942 12.7138 11.6942 12.9091 11.8894L13.6161 12.5964C13.8113 12.7917 13.8113 13.1083 13.6161 13.3036C13.4208 13.4988 13.1042 13.4988 12.9089 13.3036L12.2019 12.5966C12.0067 12.4013 12.0067 12.0847 12.2019 11.8894ZM8.3125 13.5C8.58864 13.5 8.8125 13.7239 8.8125 14V15C8.8125 15.2761 8.58864 15.5 8.3125 15.5C8.03636 15.5 7.8125 15.2761 7.8125 15V14C7.8125 13.7239 8.03636 13.5 8.3125 13.5Z",
+};
+
+type ColorModeToggleIconProps = {
+  mode: keyof typeof iconMap;
+};
+
+export default function ColorModeToggleIcon({
+  mode,
+}: ColorModeToggleIconProps) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      className={clsx(
+        "w-4 h-4 shrink-0",
+        mode === "light" && "text-gray-900 dark:text-gray-600",
+        mode === "dark" && "text-gray-600 dark:text-light2"
+      )}
+    >
+      <path fill="currentColor" d={iconMap[mode]} />
+    </svg>
+  );
+}

src/theme/ColorModeToggle/index.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import clsx from "clsx";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import { translate } from "@docusaurus/Translate";
+import ColorModeToggleIcon from "./Icon";
+function ColorModeToggle({ className, buttonClassName, value, onChange }) {
+  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={className}>
+      <button
+        className={clsx(
+          !isBrowser && "cursor-not-allowed",
+          "flex gap-2 items-center"
+        )}
+        type="button"
+        onClick={() => onChange(value === "dark" ? "light" : "dark")}
+        disabled={!isBrowser}
+        title={title}
+        aria-label={title}
+        aria-live="polite"
+      >
+        <ColorModeToggleIcon mode="light" />
+        <div
+          className={clsx(
+            "relative p-1 h-4 w-7",
+            "transition-all duration-200",
+            "ring-1 ring-inset rounded-3xl ring-gray-900 dark:ring-light2",
+            "bg-gray-100 dark:bg-dark2",
+            buttonClassName
+          )}
+        >
+          <div className="transition-all duration-200 absolute left-1 dark:left-4 rounded w-2 h-2 bg-gray-900 dark:bg-light2"></div>
+        </div>
+        <ColorModeToggleIcon mode="dark" />
+      </button>
+    </div>
+  );
+}
+export default React.memo(ColorModeToggle);

src/theme/Navbar/Content/index.tsx

@@ -36,14 +36,14 @@ export default function NavbarContent() {
         <div className="hidden md:flex items-center gap-6">
           <NavbarItems items={leftItems} />
         </div>
+        <NavbarColorModeToggle />
       </div>
 
       <div className="flex items-center gap-6">
         <SearchBar />
 
         <div className="items-center gap-6 hidden xl:flex">
           <NavbarItems items={rightItems} />
-          <NavbarColorModeToggle />
         </div>
       </div>
     </div>