Introduce env-driven accent color system and apply to links, icons, and tags

2025-11-17 22:46:55 +08:00
parent e7a9d89cfc
commit 4cb3e7627b
10 changed files with 83 additions and 80 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -32,9 +32,24 @@ export default function RootLayout({
 }: {
  children: React.ReactNode;
 }) {
+  const theme = siteConfig.theme;
+
  return (
    <html lang={siteConfig.defaultLocale} suppressHydrationWarning>
      <body>
+        <style
+          // Set CSS variables for accent colors (light + dark variants)
+          dangerouslySetInnerHTML={{
+            __html: `
+              :root {
+                --color-accent: ${theme.accent};
+                --color-accent-soft: ${theme.accentSoft};
+                --color-accent-text-light: ${theme.accentTextLight};
+                --color-accent-text-dark: ${theme.accentTextDark};
+              }
+            `
+          }}
+        />
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          <LayoutShell>{children}</LayoutShell>
        </ThemeProvider>