From 39e20e77db173ca50a76f2bccc8f2f6688c44859 Mon Sep 17 00:00:00 2001
From: Ethan Graf <ethan@Beacon.local>
Date: Thu, 7 May 2026 23:50:33 -0400
Subject: [PATCH] Add theme transition

---
 src/components/AppSidebar.tsx    |  9 ++++++-
 src/components/SettingsModal.tsx | 40 ++++++++++++++++++--------------
 src/index.css                    | 17 ++++++++++++++
 3 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index 512e4c4..1c71c36 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -6,9 +6,16 @@ export function AppSidebar({ open }: AppSidebarProps) {
   return (
     <aside
       id="app-sidebar"
-      className={`border-border bg-background/95 shrink-0 overflow-hidden border-r transition-[width] duration-200 ease-out ${
+      className={`border-border bg-background/95 shrink-0 overflow-hidden border-r ${
         open ? 'w-56' : 'w-0 border-r-0'
       }`}
+      style={{
+        // Keep width animation independent from theme color animation timings.
+        // `width` controls open/close speed; color props follow global theme fade speed.
+        transitionProperty: 'width, background-color, border-color, color',
+        transitionDuration: '200ms, 320ms, 320ms, 320ms',
+        transitionTimingFunction: 'ease-out, ease-in-out, ease-in-out, ease-in-out',
+      }}
       aria-hidden={!open}
     >
       <div className="flex h-full w-56 flex-col gap-3 p-3">
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index 04b161e..b447a50 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -141,24 +141,30 @@ export function SettingsModal({
             Connect your Atmoshpere account to unlock sync and profile settings.
           </p>
         ) : (
-          <SettingsPaneSection title="Theme">
-            <button
-              type="button"
-              onClick={onToggleTheme}
-              role="switch"
-              aria-checked={theme === 'dark'}
-              aria-label="Toggle dark mode"
-              className="border-border bg-background hover:bg-border/20 inline-flex h-8 w-16 items-center rounded-full border px-1 transition-colors"
-            >
-              <span
-                className={`bg-foreground text-background inline-flex size-6 items-center justify-center rounded-full transition-transform duration-500 ease-in-out ${
-                  theme === 'dark' ? 'translate-x-8' : 'translate-x-0'
-                }`}
+          <div className="space-y-2">
+            <SettingsPaneSection title="Theme">
+              <button
+                type="button"
+                onClick={onToggleTheme}
+                role="switch"
+                aria-checked={theme === 'dark'}
+                aria-label="Toggle dark mode"
+                className="border-border bg-background hover:bg-border/20 inline-flex h-8 w-16 items-center rounded-full border px-1 transition-colors"
               >
-                {theme === 'dark' ? <MoonIcon /> : <SunIcon />}
-              </span>
-            </button>
-          </SettingsPaneSection>
+                <span
+                  className={`bg-foreground text-background inline-flex size-6 items-center justify-center rounded-full transition-transform duration-500 ease-in-out ${
+                    theme === 'dark' ? 'translate-x-8' : 'translate-x-0'
+                  }`}
+                >
+                  {theme === 'dark' ? <MoonIcon /> : <SunIcon />}
+                </span>
+              </button>
+            </SettingsPaneSection>
+            {/* TODO: Add configurable theme transition controls with richer theme presets. */}
+            <p className="text-foreground/60 text-xs">
+              TODO: Add transition controls when expanding themes.
+            </p>
+          </div>
         )}
       </SettingsPaneLayout>
     </Modal>
diff --git a/src/index.css b/src/index.css
index 4a0b1fe..1f9ac9e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -23,6 +23,23 @@
 }
 
 @layer base {
+  *,
+  *::before,
+  *::after {
+    transition-property:
+      background-color, color, border-color, fill, stroke, box-shadow;
+    transition-duration: 320ms;
+    transition-timing-function: ease-in-out;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      transition-duration: 0ms;
+    }
+  }
+
   html,
   body,
   #root {
-- 
2.51.2