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

34
web/src/app.css
View File

@@ -413,9 +413,7 @@
0 0,
18px 0;
background-attachment: fixed;
transition:
background-color 500ms ease-in-out,
color 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
@layer base {
@@ -543,4 +541,34 @@
18px 0;
background-attachment: fixed;
}
.cursor-typing {
display: inline-block;
width: 2px;
background-color: var(--color-text-primary);
vertical-align: text-bottom;
margin-left: 2px;
position: absolute;
}
.cursor-block {
display: inline-block;
width: 1ch;
background-color: var(--color-text-primary);
vertical-align: text-bottom;
animation: typewriter-blink 1s infinite;
margin-left: 2px;
position: absolute;
}
}
@keyframes typewriter-blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}

5
web/src/app.tsx
View File

@@ -2,13 +2,13 @@ import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import { useTheme } from "./lib/theme";
import { ThemeProvider } from "./lib/theme";
import { AppShell } from "./components/layout";
import "./app.css";
export default function App() {
useTheme();
return (
<ThemeProvider>
<Router
root={(props) => (
<AppShell>
@@ -18,5 +18,6 @@ export default function App() {
>
<FileRoutes />
</Router>
</ThemeProvider>
);
}

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>
);

175
web/src/components/ui/Typewriter.tsx Normal file
View File

@@ -0,0 +1,175 @@
import { JSX, onMount, onCleanup, createSignal, children } from "solid-js";
export function Typewriter(props: {
children: JSX.Element;
speed?: number;
class?: string;
keepAlive?: boolean | number;
delay?: number;
}) {
const { keepAlive = true, delay = 0 } = props;
let containerRef: HTMLDivElement | undefined;
let cursorRef: HTMLDivElement | undefined;
const [isTyping, setIsTyping] = createSignal(false);
const [isDelaying, setIsDelaying] = createSignal(delay > 0);
const [shouldHide, setShouldHide] = createSignal(false);
const [animated, setAnimated] = createSignal(false);
const resolved = children(() => props.children);
onMount(() => {
if (!containerRef || !cursorRef) return;
containerRef.style.position = "relative";
let totalChars = 0;
const charElements: HTMLElement[] = [];
const walkDOM = (node: Node) => {
if (node.nodeType === Node.TEXT_NODE) {
const text = node.textContent || "";
if (text.trim().length > 0) {
totalChars += text.length;
const fragment = document.createDocumentFragment();
const span = document.createElement("span");
text.split("").forEach((char) => {
const charSpan = document.createElement("span");
charSpan.textContent = char;
charSpan.style.opacity = "0";
charElements.push(charSpan);
span.appendChild(charSpan);
});
fragment.appendChild(span);
node.parentNode?.replaceChild(fragment, node);
}
} else if (node.nodeType === Node.ELEMENT_NODE) {
Array.from(node.childNodes).forEach(walkDOM);
}
};
walkDOM(containerRef);
setAnimated(true);
containerRef.setAttribute("data-typewriter-ready", "true");
const handleAnimationEnd = () => {
setShouldHide(true);
cursorRef?.removeEventListener("animationend", handleAnimationEnd);
};
let cleanupAnimation: (() => void) | undefined;
const startReveal = () => {
setIsTyping(true);
let currentIndex = 0;
const speed = props.speed || 30;
const msPerChar = 1000 / speed;
let lastTime = performance.now();
let animationFrameId: number;
const revealNextChar = (currentTime: number) => {
const elapsed = currentTime - lastTime;
if (elapsed >= msPerChar) {
if (currentIndex < totalChars) {
const charSpan = charElements[currentIndex];
if (charSpan) {
const rect = charSpan.getBoundingClientRect();
const containerRect = containerRef?.getBoundingClientRect();
charSpan.style.opacity = "1";
if (cursorRef && containerRect) {
cursorRef.style.left = `${rect.right - containerRect.left}px`;
cursorRef.style.top = `${rect.top - containerRect.top}px`;
cursorRef.style.height = `${charSpan.offsetHeight}px`;
}
}
currentIndex++;
lastTime = currentTime;
} else {
setIsTyping(false);
if (typeof keepAlive === "number") {
cursorRef?.addEventListener("animationend", handleAnimationEnd);
const durationSeconds = keepAlive / 1000;
const iterations = Math.ceil(durationSeconds);
if (cursorRef) {
cursorRef.style.animation = `blink 1s ${iterations}`;
}
}
return;
}
}
animationFrameId = requestAnimationFrame(revealNextChar);
};
animationFrameId = requestAnimationFrame(revealNextChar);
return () => {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
}
};
};
if (delay > 0) {
setTimeout(() => {
setIsDelaying(false);
cleanupAnimation = startReveal();
}, delay);
} else {
cleanupAnimation = startReveal();
}
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting && cleanupAnimation) {
// Component is off-screen - could add pause logic here if needed
}
});
},
{
rootMargin: "50px",
threshold: 0.1,
},
);
observer.observe(containerRef);
onCleanup(() => {
observer.disconnect();
if (cleanupAnimation) {
cleanupAnimation();
}
});
});
const getCursorClass = () => {
if (isDelaying()) return "cursor-block";
if (isTyping()) return "cursor-typing";
if (shouldHide()) return "hidden";
return keepAlive ? "cursor-block" : "hidden";
};
return (
<div
ref={containerRef}
class={props.class}
style={{ opacity: animated() ? "1" : "0" }}
data-typewriter={!animated() ? "static" : "animated"}
>
{resolved()}
<span ref={cursorRef} class={getCursorClass()}></span>
</div>
);
}

24
web/src/lib/theme.test.ts
View File

@@ -1,7 +1,7 @@
import { describe, it, expect, beforeEach, vi } from "vitest";
import { createRoot } from "solid-js";
import {
useTheme,
createThemeState,
getSystemTheme,
getStoredTheme,
getResolvedTheme,
@@ -168,7 +168,7 @@ describe("persistTheme", () => {
});
});
describe("useTheme", () => {
describe("createThemeState", () => {
beforeEach(() => {
setupDOM();
});
@@ -177,7 +177,7 @@ describe("useTheme", () => {
it("returns 'system' when no theme is stored", () => {
vi.stubGlobal("matchMedia", createMatchMediaMock(false));
runWithRoot(() => {
const { theme } = useTheme();
const { theme } = createThemeState();
expect(theme()).toBe("system");
});
});
@@ -186,7 +186,7 @@ describe("useTheme", () => {
vi.stubGlobal("matchMedia", createMatchMediaMock(false));
localStorage.setItem("shieldai-theme", "light");
runWithRoot(() => {
const { theme } = useTheme();
const { theme } = createThemeState();
expect(theme()).toBe("light");
});
});
@@ -195,7 +195,7 @@ describe("useTheme", () => {
vi.stubGlobal("matchMedia", createMatchMediaMock(false));
localStorage.setItem("shieldai-theme", "dark");
runWithRoot(() => {
const { theme } = useTheme();
const { theme } = createThemeState();
expect(theme()).toBe("dark");
});
});
@@ -205,7 +205,7 @@ describe("useTheme", () => {
it("resolves 'system' to 'light' with light OS preference", () => {
vi.stubGlobal("matchMedia", createMatchMediaMock(false));
runWithRoot(() => {
const { resolved } = useTheme();
const { resolved } = createThemeState();
expect(resolved()).toBe("light");
});
});
@@ -213,7 +213,7 @@ describe("useTheme", () => {
it("resolves 'system' to 'dark' with dark OS preference", () => {
vi.stubGlobal("matchMedia", createMatchMediaMock(true));
runWithRoot(() => {
const { resolved } = useTheme();
const { resolved } = createThemeState();
expect(resolved()).toBe("dark");
});
});
@@ -223,7 +223,7 @@ describe("useTheme", () => {
it("sets theme signal and persists to localStorage", () => {
vi.stubGlobal("matchMedia", createMatchMediaMock(false));
runWithRoot(() => {
const { setTheme, theme } = useTheme();
const { setTheme, theme } = createThemeState();
setTheme("dark");
expect(theme()).toBe("dark");
expect(localStorage.getItem("shieldai-theme")).toBe("dark");
@@ -233,7 +233,7 @@ describe("useTheme", () => {
it("persists 'system' to localStorage", () => {
vi.stubGlobal("matchMedia", createMatchMediaMock(false));
runWithRoot(() => {
const { setTheme } = useTheme();
const { setTheme } = createThemeState();
setTheme("system");
expect(localStorage.getItem("shieldai-theme")).toBe("system");
});
@@ -245,7 +245,7 @@ describe("useTheme", () => {
vi.stubGlobal("matchMedia", createMatchMediaMock(false));
localStorage.setItem("shieldai-theme", "light");
runWithRoot(() => {
const { toggle, resolved, theme } = useTheme();
const { toggle, resolved, theme } = createThemeState();
toggle();
expect(resolved()).toBe("dark");
expect(theme()).toBe("dark");
@@ -256,7 +256,7 @@ describe("useTheme", () => {
vi.stubGlobal("matchMedia", createMatchMediaMock(true));
localStorage.setItem("shieldai-theme", "dark");
runWithRoot(() => {
const { toggle, resolved, theme } = useTheme();
const { toggle, resolved, theme } = createThemeState();
toggle();
expect(resolved()).toBe("light");
expect(theme()).toBe("light");
@@ -277,7 +277,7 @@ describe("useTheme", () => {
}),
);
runWithRoot(() => {
useTheme();
createThemeState();
expect(addEventListener).toHaveBeenCalledWith(
"change",
expect.any(Function),

45
web/src/lib/theme.ts → web/src/lib/theme.tsx
View File

@@ -1,10 +1,35 @@
import { createSignal, createEffect, createRoot, onCleanup } from "solid-js";
import {
createSignal,
createEffect,
onCleanup,
createContext,
useContext,
Accessor,
ParentComponent,
} from "solid-js";
type Theme = "light" | "dark" | "system";
type ResolvedTheme = "light" | "dark";
const STORAGE_KEY = "shieldai-theme";
interface ThemeContextType {
theme: Accessor<Theme>;
resolved: Accessor<ResolvedTheme>;
setTheme: (theme: Theme) => void;
toggle: () => void;
}
const ThemeContext = createContext<ThemeContextType>();
export function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error("useTheme must be used within a ThemeProvider");
}
return context;
}
export function getSystemTheme(): ResolvedTheme {
if (typeof window === "undefined") return "light";
return window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -55,9 +80,9 @@ export function persistTheme(theme: Theme) {
}
}
export function useTheme() {
export function createThemeState() {
const initial = getStoredTheme();
const [theme, setTheme] = createSignal<Theme>(initial);
const [theme, setThemeSignal] = createSignal<Theme>(initial);
const resolved = () => getResolvedTheme(theme());
@@ -81,7 +106,7 @@ export function useTheme() {
}
const setAndPersist = (newTheme: Theme) => {
setTheme(newTheme);
setThemeSignal(newTheme);
persistTheme(newTheme);
};
@@ -92,3 +117,15 @@ export function useTheme() {
return { theme, resolved, setTheme: setAndPersist, toggle };
}
export const ThemeProvider: ParentComponent = (props) => {
const state = createThemeState();
return (
<ThemeContext.Provider
value={state}
>
{props.children}
</ThemeContext.Provider>
);
};