diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 29b07f6b62..20b9fd0c12 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -54,12 +54,13 @@ const id = useId()
       {{ label }}
     </span>
     <input
-      role="switch"
+      switch
       type="checkbox"
+      role="switch"
       :id="id"
       v-model="checked"
-      class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg/50 transition-colors duration-200 ease-in-out checked:bg-fg [@media(hover:hover)]:hover:bg-fg/60 [@media(hover:hover)]:checked:hover:(bg-fg/80 after:opacity-50) focus-visible:(outline-2 outline-accent outline-offset-2) before:(content-[''] absolute h-5 w-5 top-px start-px rounded-full bg-bg transition-transform duration-200 ease-in-out) checked:before:translate-x-[20px] rtl:checked:before:-translate-x-[20px] after:(content-[''] absolute h-3.5 w-3.5 top-[4px] start-[4px] i-lucide:check bg-fg opacity-0 transition-all duration-200 ease-in-out) checked:after:opacity-100 checked:after:translate-x-[20px] rtl:checked:after:-translate-x-[20px]"
-      style="grid-area: toggle; justify-self: end"
+      class="shrink-0 focus-visible:(outline-2 outline-accent outline-offset-2)"
+      style="grid-area: toggle; justify-self: end; accent-color: var(--accent)"
     />
   </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
@@ -68,37 +69,10 @@ const id = useId()
 </template>
 
 <style scoped>
-/* Support forced colors */
-@media (forced-colors: active) {
-  .toggle {
-    background: Canvas;
-    border-color: CanvasText;
-  }
-
-  .toggle:checked {
-    background: Highlight;
-    border-color: CanvasText;
-  }
-
-  .toggle::before {
-    background-color: CanvasText;
-  }
-
-  .toggle:checked::before {
-    background-color: Canvas;
-  }
-
-  .toggle::after {
-    background-color: Highlight;
-  }
-}
-
+/* The switch polyfill animates its thumb without honouring reduced motion. */
 @media (prefers-reduced-motion: reduce) {
-  .toggle,
-  .toggle::before,
-  .toggle::after {
-    transition: none !important;
-    animation: none !important;
+  input.switch:is(:hover, :active, :focus) {
+    transition: none;
   }
 }
 </style>
diff --git a/app/plugins/input-switch-polyfill.client.ts b/app/plugins/input-switch-polyfill.client.ts
new file mode 100644
index 0000000000..1cb57ccc92
--- /dev/null
+++ b/app/plugins/input-switch-polyfill.client.ts
@@ -0,0 +1,30 @@
+export default defineNuxtPlugin({
+  // Don't hold up hydration for a polyfill that only the settings page needs.
+  parallel: true,
+  async setup() {
+    if (!('switch' in HTMLInputElement.prototype)) {
+      // @ts-expect-error input-switch-polyfill ships no types; imported for its side effect only
+      await import('input-switch-polyfill')
+
+      // The polyfill reads `accent-color` once at upgrade time and freezes the
+      // resolved color as `--switch-accent` in each element's inline style.
+      // Re-sync whenever the accent or color-mode changes so switches react live.
+      const syncSwitchAccent = () => {
+        const switches = document.querySelectorAll<HTMLInputElement>('input.switch')
+        const [first] = switches
+        if (!first) return
+        // All switches share the same cascade; read from the first one.
+        const color = getComputedStyle(first).getPropertyValue('accent-color').trim()
+        if (!color || color === 'auto') return
+        for (const el of switches) {
+          el.style.setProperty('--switch-accent', color)
+        }
+      }
+
+      new MutationObserver(syncSwitchAccent).observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['style', 'class'],
+      })
+    }
+  },
+})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5c7f2fec77..4f96c35513 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -32,7 +32,7 @@ export default defineNuxtConfig({
     storageKey: 'npmx-color-mode',
   },
 
-  css: ['~/assets/main.css'],
+  css: ['~/assets/main.css', 'input-switch-polyfill/input-switch-polyfill.css'],
 
   runtimeConfig: {
     sessionPassword: '',
diff --git a/package.json b/package.json
index d4d7c45d72..3bbece17cc 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "forges": "^0.3.2",
     "gray-matter": "4.0.3",
     "hls.js": "1.7.0",
+    "input-switch-polyfill": "1.12.0",
     "ipaddr.js": "2.5.0",
     "marked": "18.0.9",
     "module-replacements": "3.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5808e48986..d80ed5a0f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -207,6 +207,9 @@ importers:
       hls.js:
         specifier: 1.7.0
         version: 1.7.0
+      input-switch-polyfill:
+        specifier: 1.12.0
+        version: 1.12.0
       ipaddr.js:
         specifier: 2.5.0
         version: 2.5.0
@@ -7489,6 +7492,9 @@ packages:
     resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  input-switch-polyfill@1.12.0:
+    resolution: {integrity: sha512-4IF+lwC4jjInFPWWjHDcVJWvWiTHm1RnGa+P9uLhOleal69NPbUnrcPHJJhuexyUqOnyA0QenXhtZNuZX4gqWA==}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
@@ -19379,6 +19385,8 @@ snapshots:
 
   ini@4.1.1: {}
 
+  input-switch-polyfill@1.12.0: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0