diff --git a/web/vite.config.ts b/web/vite.config.ts
index e589e3f2..38dd8300 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,6 +1,10 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import { execSync } from 'node:child_process';
+import tokens from './src/lib/styles/tokens.json' with { type: 'json' };
+
+const THEME_DARK = tokens.colors.dark.obsidian;
+const THEME_LIGHT = tokens.colors.light.obsidian;
 
 const tokensPlugin = {
   name: 'minstrel-tokens',
@@ -29,9 +33,8 @@ const injectGoTokensPlugin = {
     <meta property="og:image" content="/brand/og-image.png">
     <meta property="og:type" content="website">
     <meta name="twitter:card" content="summary_large_image">
-    <!-- TODO(#375): keep theme-color hex in sync with tokens.json colors.dark.obsidian / colors.light.obsidian -->
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#14171A">
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#F8F5EE">
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="${THEME_DARK}">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="${THEME_LIGHT}">
     <script>window.__MINSTREL__ = { appName: "{{ .AppName }}" };</script>`;
 
     // Fail loudly if either anchor drifts. A silent .replace() no-op