diff --git a/app/assets/stylesheets/nav.css b/app/assets/stylesheets/nav.css
index 57d1803bd..c48a78034 100644
--- a/app/assets/stylesheets/nav.css
+++ b/app/assets/stylesheets/nav.css
@@ -3,7 +3,7 @@
   /* ------------------------------------------------------------------------ */
 
   .nav__trigger {
-    --input-background: var(--color-canvas);
+    --input-background: transparent;
     --input-border-color: transparent;
     --input-padding: 0.3em 2em 0.3em 0.75em;
 
@@ -17,21 +17,11 @@
 
     @media (any-hover: hover) {
       &:hover {
-        filter: brightness(0.9);
+        --input-background: var(--color-ink-lighter);
 
         span {
           background: var(--color-ink-lighter);
         }
-
-        html[data-theme="dark"] & {
-          --input-background: var(--color-ink-lighter);
-        }
-
-        @media (prefers-color-scheme: dark) {
-          html:not([data-theme]) & {
-            --input-background: var(--color-ink-lighter);
-          }
-        }
       }
     }
 
diff --git a/app/javascript/controllers/theme_controller.js b/app/javascript/controllers/theme_controller.js
index 154bf4fc0..cf64df579 100644
--- a/app/javascript/controllers/theme_controller.js
+++ b/app/javascript/controllers/theme_controller.js
@@ -26,13 +26,27 @@ export default class extends Controller {
   set #theme(theme) {
     localStorage.setItem("theme", theme)
 
-    if (theme === "auto") {
-      document.documentElement.removeAttribute("data-theme")
-    } else {
-      document.documentElement.setAttribute("data-theme", theme)
+    const currentTheme = document.documentElement.getAttribute("data-theme") || "auto"
+    const hasChanged = currentTheme !== theme
+
+    const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches
+    const animate = hasChanged && !prefersReducedMotion
+
+    const applyTheme = () => {
+      if (theme === "auto") {
+        document.documentElement.removeAttribute("data-theme")
+      } else {
+        document.documentElement.setAttribute("data-theme", theme)
+      }
+
+      this.#updateButtons()
     }
 
-    this.#updateButtons()
+    if (animate && document.startViewTransition) {
+      document.startViewTransition(applyTheme)
+    } else {
+      applyTheme()
+    }
   }
 
   #applyStoredTheme() {