justin/provenance
1
0
Fork 0
Code Issues 173 Pull Requests Actions Packages Projects Releases Wiki Activity

Full light/dark theme toggle; brand-aware connector lines

Browse Source 
- Theme is now class-based (.dark on <html>) with a System/Light/Dark toggle in
  the sidebar, persisted to localStorage and applied pre-paint by an inline
  script (no flash). Replaces the prefers-color-scheme-only behavior, so a phone
  on a light OS theme can still choose dark and vice versa.
- New brand-derived --line token (Ink at 55%): a dark line on the light paper,
  light on dark. The family-chart tree connectors had the library's default
  white stroke and were invisible in light mode — now they use --line, as do
  the pedigree brackets and the fan-chart sectors.
- Light/dark tokens use the exact brand palette (Ink/Muted flip; Bronze/Paper
  constant).

Frontend only — no migration.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Justin Paul
2026-06-07 11:48:59 -04:00
parent 548e883d82
commit e8839b15a0
6 changed files with 91 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/globals.css
+17 -12
View File
@@ -11,23 +11,28 @@
--font-serif: var(--font-fraunces), Georgia, "Times New Roman", ui-serif, serif;
}
/* Adaptive tokens — ink/paper flip for light/dark; bronze + paper are constant. */
/* Adaptive tokens — ink/paper flip for light/dark; bronze + paper are constant.
Theme is class-based (.dark on <html>) so it can be toggled manually; an inline
script in the root layout sets it pre-paint from the saved choice or the OS. */
:root {
--background: #f7f3ec;
--foreground: #1a1a17;
--muted: #6b6862;
--surface: #fffdf9;
--border: #e6ddcc;
/* Connector "lines between people" (pedigree + tree chart). Derived from Ink
(the brand mark color): a dark line on light, light on dark. */
--line: color-mix(in srgb, var(--foreground) 55%, transparent);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #161410;
--foreground: #f2eee6;
--muted: #9a968e;
--surface: #211d17;
--border: #353029;
}
.dark {
--background: #161410;
--foreground: #f2eee6;
--muted: #9a968e;
--surface: #211d17;
--border: #353029;
color-scheme: dark;
}
body {
@@ -78,7 +83,7 @@ h3,
left: -2.5rem;
top: 50%;
width: 2.5rem;
border-top: 1px solid var(--border);
border-top: 1px solid var(--line);
}
.ped-leaf {
position: relative;
@@ -90,7 +95,7 @@ h3,
left: 0;
top: 50%;
width: 1.5rem;
border-top: 1px solid var(--border);
border-top: 1px solid var(--line);
}
.ped-leaf::after {
content: "";
@@ -98,7 +103,7 @@ h3,
left: 0;
top: 0;
bottom: 0;
border-left: 1px solid var(--border);
border-left: 1px solid var(--line);
}
.ped-leaf:first-child::after {
top: 50%;
frontend/app/layout.tsx
+8 -1
View File
@@ -18,9 +18,16 @@ export const metadata: Metadata = {
icons: { icon: "/favicon.svg" },
};
// Sets the theme class before first paint to avoid a flash; reads the saved
// choice ("light"/"dark"/"system") or falls back to the OS preference.
const themeScript = `(function(){try{var t=localStorage.getItem("theme");var d=t==="dark"||((!t||t==="system")&&window.matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.toggle("dark",d);}catch(e){}})();`;
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${serif.variable} ${sans.variable}`}>
<html lang="en" className={`${serif.variable} ${sans.variable}`} suppressHydrationWarning>
<head>
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
</head>
<body className="min-h-screen antialiased">{children}</body>
</html>
);
frontend/app/trees/[id]/tree/chart.css
+5
View File
@@ -530,6 +530,11 @@
.f3 .link {
transition: stroke-width 0.2s ease-in-out;
/* Brand-aware connector lines: dark on the light paper, light on dark. The
library's default white stroke is invisible on the light theme. */
fill: none;
stroke: var(--line);
stroke-width: 1.5px;
}
.f3 .link.f3-path-to-main {
frontend/components/app-sidebar.tsx
+6 -1
View File
@@ -17,6 +17,7 @@ import { useEffect, useRef, useState } from "react";
import { api } from "@/lib/api/client";
import { cn } from "@/lib/utils";
import { ThemeToggle } from "@/components/theme-toggle";
export function AppSidebar({ onNavigate }: { onNavigate?: () => void }) {
const pathname = usePathname();
@@ -136,7 +137,11 @@ export function AppSidebar({ onNavigate }: { onNavigate?: () => void }) {
</div>
)}
<div ref={menuRef} className="relative mt-auto">
<div className="mt-auto">
<ThemeToggle />
</div>
<div ref={menuRef} className="relative">
{menuOpen && (
<div className="absolute bottom-full left-0 mb-2 w-full overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-lg">
<Link
frontend/components/fan-chart.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ export function FanChart({
<path
d={sector(r0 + 1, r1 - 1, a0 + 0.004, a1 - 0.004)}
fill={id ? "var(--surface)" : "transparent"}
stroke="var(--border)"
stroke="var(--line)"
/>
{id && (
<text
frontend/components/theme-toggle.tsx
+54
View File
@@ -0,0 +1,54 @@
"use client";
import { Monitor, Moon, Sun } from "lucide-react";
import { useEffect, useState } from "react";
type Theme = "light" | "dark" | "system";
const ORDER: Theme[] = ["system", "light", "dark"];
const ICON = { system: Monitor, light: Sun, dark: Moon };
const LABEL = { system: "System", light: "Light", dark: "Dark" };
function apply(theme: Theme) {
const dark =
theme === "dark" ||
(theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
document.documentElement.classList.toggle("dark", dark);
}
/** Cycles theme System → Light → Dark, persisting the choice in localStorage. */
export function ThemeToggle() {
const [theme, setTheme] = useState<Theme>("system");
useEffect(() => {
const saved = (localStorage.getItem("theme") as Theme) || "system";
setTheme(saved);
}, []);
// Keep "system" in sync if the OS preference changes while selected.
useEffect(() => {
if (theme !== "system") return;
const mq = window.matchMedia("(prefers-color-scheme: dark)");
const onChange = () => apply("system");
mq.addEventListener("change", onChange);
return () => mq.removeEventListener("change", onChange);
}, [theme]);
function cycle() {
const next = ORDER[(ORDER.indexOf(theme) + 1) % ORDER.length];
localStorage.setItem("theme", next);
setTheme(next);
apply(next);
}
const Icon = ICON[theme];
return (
<button
onClick={cycle}
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-[var(--muted)] transition-colors hover:bg-bronze/[0.07] hover:text-[var(--foreground)]"
title={`Theme: ${LABEL[theme]} (click to change)`}
>
<Icon className="h-4 w-4 shrink-0" />
Theme: {LABEL[theme]}
</button>
);
}