diff --git a/.prettierignore b/.prettierignore
index aeedd95d45f..8b0126b66ef 100644
--- a/.prettierignore
+++ b/.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
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 0b3061a8f7b..150fdc3b38e 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -162,6 +162,7 @@ module.exports = {
     ],
     colorMode: {
       defaultMode: 'light',
+      respectPrefersColorScheme: true,
     },
     navbar: {
       hideOnScroll: true,
diff --git a/src/styles/components/_theme-toggle.scss b/src/styles/components/_theme-toggle.scss
deleted file mode 100644
index 850ad8d9216..00000000000
--- a/src/styles/components/_theme-toggle.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-[class^='toggle_'] {
-  position: relative;
-  padding: 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  [class^='toggleTrack'] {
-    display: none;
-  }
-
-  input[type='checkbox'] {
-    display: block;
-    position: relative;
-    height: 1.25rem;
-    width: 1.25rem;
-    clip: unset;
-    cursor: pointer;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    z-index: 1;
-    pointer-events: none;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    background: var(--token-primary-bg-c);
-  }
-
-  &::after {
-    content: '';
-    width: 1rem;
-    height: 1rem;
-    display: block;
-    pointer-events: none;
-
-    position: absolute;
-    z-index: 2;
-  }
-}
-
-html[data-theme='light'] [class^='toggle_']::after {
-  content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuMzA3NjkgMy4zODQ2MkM0LjMwNzY5IDIuMjA2OTIgNC40ODExNSAxLjAxNSA0LjkyMzA4IDBDMS45ODM0NiAxLjI3OTYyIDAgNC4yODE1NCAwIDcuNjkyMzFDMCAxMi4yODA0IDMuNzE5NjIgMTYgOC4zMDc2OSAxNkMxMS43MTg1IDE2IDE0LjcyMDQgMTQuMDE2NSAxNiAxMS4wNzY5QzE0Ljk4NSAxMS41MTg4IDEzLjc5MzEgMTEuNjkyMyAxMi42MTU0IDExLjY5MjNDOC4wMjczMSAxMS42OTIzIDQuMzA3NjkgNy45NzI2OSA0LjMwNzY5IDMuMzg0NjJaIiBmaWxsPSIjOTJBMEIzIi8+Cjwvc3ZnPgo=');
-}
-html[data-theme='dark'] [class^='toggle_']::after {
-  content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04IDMuMmEuNzcuNzcgMCAwIDEtLjc3LS43N1YuNzdhLjc3Ljc3IDAgMSAxIDEuNTQgMHYxLjY2QS43Ny43NyAwIDAgMSA4IDMuMlpNOCAxNmEuNzcuNzcgMCAwIDEtLjc3LS43N3YtMS42N2EuNzcuNzcgMCAwIDEgMS41NCAwdjEuNjdBLjc3Ljc3IDAgMCAxIDggMTZaTTExLjk0IDQuODNhLjc3Ljc3IDAgMCAxLS41NS0xLjNsMS4xOC0xLjE5YS43Ny43NyAwIDAgMSAxLjA5IDEuMDlMMTIuNDggNC42YS43Ni43NiAwIDAgMS0uNTQuMjJaTTIuODggMTMuODhhLjc3Ljc3IDAgMCAxLS41NC0xLjNsMS4xOC0xLjE5YS43Ny43NyAwIDEgMSAxLjA5IDEuMDlsLTEuMTggMS4xOGEuNzYuNzYgMCAwIDEtLjU1LjIyWk0xNS4yMyA4Ljc3aC0xLjY2YS43Ny43NyAwIDAgMSAwLTEuNTRoMS42NmEuNzcuNzcgMCAwIDEgMCAxLjU0Wk0yLjQzIDguNzdILjc3YS43Ny43NyAwIDEgMSAwLTEuNTRoMS42NmEuNzcuNzcgMCAxIDEgMCAxLjU0Wk0xMy4xMiAxMy44OGEuNzYuNzYgMCAwIDEtLjU1LS4yMmwtMS4xOC0xLjE4YS43Ny43NyAwIDAgMSAxLjA5LTEuMDlsMS4xOCAxLjE4YS43Ni43NiAwIDAgMS0uNTQgMS4zMVpNNC4wNiA0LjgzYS43Ni43NiAwIDAgMS0uNTQtLjIyTDIuMzQgMy40M2EuNzcuNzcgMCAwIDEgMS4wOS0xLjA5TDQuNiAzLjUyYS43Ny43NyAwIDAgMS0uNTUgMS4zMVpNOCAxMS41NWEzLjU1IDMuNTUgMCAxIDEgMC03LjEgMy41NSAzLjU1IDAgMCAxIDAgNy4xWiIKICAgIGZpbGw9IiNmZmZmZmYiIC8+Cjwvc3ZnPg==');
-}
diff --git a/src/styles/custom.scss b/src/styles/custom.scss
index b518dd5de32..f1133013798 100644
--- a/src/styles/custom.scss
+++ b/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 {
diff --git a/src/theme/Icon/DarkMode/index.tsx b/src/theme/Icon/DarkMode/index.tsx
new file mode 100644
index 00000000000..149f654cb33
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/theme/Icon/LightMode/index.tsx b/src/theme/Icon/LightMode/index.tsx
new file mode 100644
index 00000000000..8ea848270d0
--- /dev/null
+++ b/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>
+  );
+}