feat(theme): add system color mode to the theme toggle

.prettierignore

@@ -3,7 +3,9 @@
 # Wrapped components are our own code, so they follow the repo's formatting.
 src/theme/DocItem/Layout/index.tsx
 src/theme/EditMetaRow/index.tsx
+src/theme/Icon/DarkMode/index.tsx
 src/theme/Icon/Edit/index.tsx
+src/theme/Icon/LightMode/index.tsx
 src/theme/Icon/Language/index.tsx
 src/theme/Layout/index.tsx
 src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

docusaurus.config.js

@@ -162,6 +162,7 @@ module.exports = {
     ],
     colorMode: {
       defaultMode: 'light',
+      respectPrefersColorScheme: true,
     },
     navbar: {
       hideOnScroll: true,

src/styles/custom.scss

@@ -21,7 +21,6 @@
 @use './components/search';
 @use './components/table';
 @use './components/tabs';
-@use './components/theme-toggle';
 @use './components/toc';
 
 :root {

src/theme/Icon/DarkMode/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * Original source:
+ * @link https://github.com/facebook/docusaurus/blob/v3.10.2/packages/docusaurus-theme-classic/src/theme/Icon/DarkMode/index.tsx
+ *
+ * Reason for overriding:
+ * - Changed the icon to Ionic's moon mark. The artwork is drawn on a 16x16
+ * grid, so only the `viewBox` differs from upstream; the rendered size still
+ * matches the light and system icons.
+ * - `currentColor` is kept from upstream so the icon inherits `--navbar-icon-link-c`.
+ */
+
+import React, {type ReactNode} from 'react';
+import type {Props} from '@theme/Icon/DarkMode';
+
+export default function IconDarkMode(props: Props): ReactNode {
+  return (
+    <svg viewBox="0 0 16 16" width={24} height={24} fill="none" {...props}>
+      <path
+        fill="currentColor"
+        d="M4.30769 3.38462C4.30769 2.20692 4.48115 1.015 4.92308 0C1.98346 1.27962 0 4.28154 0 7.69231C0 12.2804 3.71962 16 8.30769 16C11.7185 16 14.7204 14.0165 16 11.0769C14.985 11.5188 13.7931 11.6923 12.6154 11.6923C8.02731 11.6923 4.30769 7.97269 4.30769 3.38462Z"
+      />
+    </svg>
+  );
+}

src/theme/Icon/LightMode/index.tsx

@@ -0,0 +1,24 @@
+/**
+ * Original source:
+ * @link https://github.com/facebook/docusaurus/blob/v3.10.2/packages/docusaurus-theme-classic/src/theme/Icon/LightMode/index.tsx
+ *
+ * Reason for overriding:
+ * - Changed the icon to Ionic's sun mark. The artwork is drawn on a 16x16
+ * grid, so only the `viewBox` differs from upstream; the rendered size still
+ * matches the dark and system icons.
+ * - `currentColor` is kept from upstream so the icon inherits `--navbar-icon-link-c`.
+ */
+
+import React, {type ReactNode} from 'react';
+import type {Props} from '@theme/Icon/LightMode';
+
+export default function IconLightMode(props: Props): ReactNode {
+  return (
+    <svg viewBox="0 0 16 16" width={24} height={24} fill="none" {...props}>
+      <path
+        fill="currentColor"
+        d="M8 3.2a.77.77 0 0 1-.77-.77V.77a.77.77 0 1 1 1.54 0v1.66A.77.77 0 0 1 8 3.2ZM8 16a.77.77 0 0 1-.77-.77v-1.67a.77.77 0 0 1 1.54 0v1.67A.77.77 0 0 1 8 16ZM11.94 4.83a.77.77 0 0 1-.55-1.3l1.18-1.19a.77.77 0 0 1 1.09 1.09L12.48 4.6a.76.76 0 0 1-.54.22ZM2.88 13.88a.77.77 0 0 1-.54-1.3l1.18-1.19a.77.77 0 1 1 1.09 1.09l-1.18 1.18a.76.76 0 0 1-.55.22ZM15.23 8.77h-1.66a.77.77 0 0 1 0-1.54h1.66a.77.77 0 0 1 0 1.54ZM2.43 8.77H.77a.77.77 0 1 1 0-1.54h1.66a.77.77 0 1 1 0 1.54ZM13.12 13.88a.76.76 0 0 1-.55-.22l-1.18-1.18a.77.77 0 0 1 1.09-1.09l1.18 1.18a.76.76 0 0 1-.54 1.31ZM4.06 4.83a.76.76 0 0 1-.54-.22L2.34 3.43a.77.77 0 0 1 1.09-1.09L4.6 3.52a.77.77 0 0 1-.55 1.31ZM8 11.55a3.55 3.55 0 1 1 0-7.1 3.55 3.55 0 0 1 0 7.1Z"
+      />
+    </svg>
+  );
+}