Mike/Kordant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Context-based theme provider with animated Typewriter toggle

Browse Source 
- Convert theme to SolidJS Context/Provider pattern (ThemeProvider)
- Extract createThemeState() for testability without context
- Add Typewriter component with character-by-character reveal
- Animate ThemeToggle with Typewriter label and hover scale
- Add cursor CSS animations (typewriter-blink, cursor-typing, cursor-block)
- Fix background color transition by using 'all' on :root
- Rename theme.ts -> theme.tsx for JSX support
- All 26 theme tests passing
This commit is contained in:
Michael Freno
2026-05-25 15:10:52 -04:00
parent c9a82fc6de
commit d4c1b62a97
6 changed files with 311 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
web/src/components/layout/Navbar.tsx
View File

@@ -2,6 +2,7 @@ import { createSignal, onMount, onCleanup, Show, Suspense } from "solid-js";
import { A } from "@solidjs/router";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui";
import { Typewriter } from "~/components/ui/Typewriter";
import { useTheme } from "~/lib/theme";
import { useAuth } from "./useAuth";
@@ -44,17 +45,48 @@ function ShieldLogo() {
function ThemeToggle() {
const { toggle, resolved } = useTheme();
const [mounted, setMounted] = createSignal(false);
onMount(() => {
setMounted(true);
});
return (
<button
type="button"
aria-label="Toggle theme"
class="p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors"
class="flex items-center gap-1.5 p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-all duration-200 ease-in-out hover:scale-105"
onClick={toggle}
>
<Show
when={resolved() === "dark"}
fallback={
when={mounted()}
fallback={<div style={{ width: "20px", height: "20px" }} />}
>
<Show
when={resolved() === "dark"}
fallback={
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
}
>
<svg
width="20"
height="20"
@@ -65,30 +97,22 @@ function ThemeToggle() {
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg>
}
</Show>
</Show>
<Show
when={mounted()}
fallback={<span style={{ visibility: "hidden" }}>Light</span>}
>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg>
<span class="text-sm font-medium hidden sm:inline">
<Show
when={resolved() === "dark"}
fallback={<Typewriter keepAlive={false}>Light</Typewriter>}
>
<Typewriter keepAlive={false}>Dark</Typewriter>
</Show>
</span>
</Show>
</button>
);