A local-first note taking app
Add theme transition
Ethan Graf
(May 7, 2026, 11:50 PM EDT)
39e20e77
4c6adcf8
+48
-18
+8
-1
src/components/AppSidebar.tsx
+8
-1
src/components/AppSidebar.tsx
···
6
6
return (
7
7
<aside
8
8
id="app-sidebar"
9
-
className={`border-border bg-background/95 shrink-0 overflow-hidden border-r transition-[width] duration-200 ease-out ${
9
+
className={`border-border bg-background/95 shrink-0 overflow-hidden border-r ${
10
10
open ? 'w-56' : 'w-0 border-r-0'
11
11
}`}
12
+
style={{
13
+
// Keep width animation independent from theme color animation timings.
14
+
// `width` controls open/close speed; color props follow global theme fade speed.
15
+
transitionProperty: 'width, background-color, border-color, color',
16
+
transitionDuration: '200ms, 320ms, 320ms, 320ms',
17
+
transitionTimingFunction: 'ease-out, ease-in-out, ease-in-out, ease-in-out',
18
+
}}
12
19
aria-hidden={!open}
13
20
>
14
21
<div className="flex h-full w-56 flex-col gap-3 p-3">
+23
-17
src/components/SettingsModal.tsx
+23
-17
src/components/SettingsModal.tsx
···
141
141
Connect your Atmoshpere account to unlock sync and profile settings.
142
142
</p>
143
143
) : (
144
-
<SettingsPaneSection title="Theme">
145
-
<button
146
-
type="button"
147
-
onClick={onToggleTheme}
148
-
role="switch"
149
-
aria-checked={theme === 'dark'}
150
-
aria-label="Toggle dark mode"
151
-
className="border-border bg-background hover:bg-border/20 inline-flex h-8 w-16 items-center rounded-full border px-1 transition-colors"
152
-
>
153
-
<span
154
-
className={`bg-foreground text-background inline-flex size-6 items-center justify-center rounded-full transition-transform duration-500 ease-in-out ${
155
-
theme === 'dark' ? 'translate-x-8' : 'translate-x-0'
156
-
}`}
144
+
<div className="space-y-2">
145
+
<SettingsPaneSection title="Theme">
146
+
<button
147
+
type="button"
148
+
onClick={onToggleTheme}
149
+
role="switch"
150
+
aria-checked={theme === 'dark'}
151
+
aria-label="Toggle dark mode"
152
+
className="border-border bg-background hover:bg-border/20 inline-flex h-8 w-16 items-center rounded-full border px-1 transition-colors"
157
153
>
158
-
{theme === 'dark' ? <MoonIcon /> : <SunIcon />}
159
-
</span>
160
-
</button>
161
-
</SettingsPaneSection>
154
+
<span
155
+
className={`bg-foreground text-background inline-flex size-6 items-center justify-center rounded-full transition-transform duration-500 ease-in-out ${
156
+
theme === 'dark' ? 'translate-x-8' : 'translate-x-0'
157
+
}`}
158
+
>
159
+
{theme === 'dark' ? <MoonIcon /> : <SunIcon />}
160
+
</span>
161
+
</button>
162
+
</SettingsPaneSection>
163
+
{/* TODO: Add configurable theme transition controls with richer theme presets. */}
164
+
<p className="text-foreground/60 text-xs">
165
+
TODO: Add transition controls when expanding themes.
166
+
</p>
167
+
</div>
162
168
)}
163
169
</SettingsPaneLayout>
164
170
</Modal>
+17
src/index.css
+17
src/index.css
···
23
23
}
24
24
25
25
@layer base {
26
+
*,
27
+
*::before,
28
+
*::after {
29
+
transition-property:
30
+
background-color, color, border-color, fill, stroke, box-shadow;
31
+
transition-duration: 320ms;
32
+
transition-timing-function: ease-in-out;
33
+
}
34
+
35
+
@media (prefers-reduced-motion: reduce) {
36
+
*,
37
+
*::before,
38
+
*::after {
39
+
transition-duration: 0ms;
40
+
}
41
+
}
42
+
26
43
html,
27
44
body,
28
45
#root {