From 68af48bb37dea6572f35c8989c57b8b543f51230 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Fri, 8 May 2026 10:48:03 -0400 Subject: [PATCH] refactor(web/theme): read meta-theme hex from tokens.json (B1) --- web/src/lib/theme/applyMetaThemeColor.svelte.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/web/src/lib/theme/applyMetaThemeColor.svelte.ts b/web/src/lib/theme/applyMetaThemeColor.svelte.ts index acc66895..c32caadf 100644 --- a/web/src/lib/theme/applyMetaThemeColor.svelte.ts +++ b/web/src/lib/theme/applyMetaThemeColor.svelte.ts @@ -1,10 +1,13 @@ +import tokens from '$lib/styles/tokens.json'; import { resolvedTheme } from '$lib/stores/theme.svelte'; -// TODO(#375): keep these hex values in sync with tokens.json -// colors.dark.obsidian / colors.light.obsidian. The duplication is a known -// drift hazard from #363; consume from the generated CSS layer instead. -const DARK = '#14171A'; -const LIGHT = '#F8F5EE'; +// Browser address-bar tint matches the page background — colors..obsidian +// is the canonical background token, the same value the runtime CSS variables +// resolve to for each mode. Reading from tokens.json (not the generated CSS) +// avoids a getComputedStyle round-trip and keeps the source of truth in one +// place; if a designer rotates the palette, both surfaces move together. +const DARK = tokens.colors.dark.obsidian; +const LIGHT = tokens.colors.light.obsidian; // applyMetaThemeColor wires a Svelte 5 $effect that keeps a single // (without a media query) in sync with the