diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index dfbe818..a7415be 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -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 ) 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%;
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 9c8ad77..7669e6d 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -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 (
-
+
+
+
+
{children}
);
diff --git a/frontend/app/trees/[id]/tree/chart.css b/frontend/app/trees/[id]/tree/chart.css
index 64e9c33..27ed84c 100644
--- a/frontend/app/trees/[id]/tree/chart.css
+++ b/frontend/app/trees/[id]/tree/chart.css
@@ -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 {
diff --git a/frontend/components/app-sidebar.tsx b/frontend/components/app-sidebar.tsx
index 07cb9e6..b799634 100644
--- a/frontend/components/app-sidebar.tsx
+++ b/frontend/components/app-sidebar.tsx
@@ -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 }) {
)}
-
+
+
+
+
+
{menuOpen && (
{id && (
("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 (
+
+ );
+}