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