x

apps/website/src/app/[lang]/layout.tsx

@@ -8,6 +8,7 @@ import { API_BASE } from '@/lib/api';
 import type { MegaMenuPayload } from '@/components/navigation/menuTypes';
 import type { MenuItem, StoreSettings } from '@homaroma/types';
 import { isSupportedLocale } from '@/lib/locales';
+import type { CSSProperties } from 'react';
 
 export const metadata: Metadata = {
   title: 'HomAroma',
@@ -75,6 +76,41 @@ async function getStoreSettings(lang: string): Promise<StoreSettings | null> {
   }
 }
 
+function buildThemeStyle(settings: StoreSettings | null): CSSProperties | undefined {
+  const tokens = settings?.themeTokens
+  if (!tokens || typeof tokens !== 'object') return undefined
+
+  const style: Record<string, string> = {}
+  const vars: Array<[string, string | undefined]> = [
+    ['--color-brand-primary', tokens.brandPrimary],
+    ['--color-brand-primary-hover', tokens.brandPrimaryHover],
+    ['--color-brand-accent', tokens.brandAccent],
+    ['--color-brand-warm', tokens.brandWarm],
+    ['--color-brand-cool', tokens.brandCool],
+    ['--color-brand-success', tokens.brandSuccess],
+    ['--color-brand-soft', tokens.brandSoft],
+    ['--color-surface-page', tokens.surfacePage],
+    ['--color-surface-nav-rest', tokens.surfaceNavRest],
+    ['--color-surface-card', tokens.surfaceCard],
+    ['--color-text-main', tokens.textMain],
+    ['--color-muted-text', tokens.mutedText],
+    ['--color-line-primary', tokens.linePrimary],
+    ['--color-line-primary-hover', tokens.linePrimaryHover],
+    ['--font-body', tokens.fontBody],
+    ['--font-display', tokens.fontDisplay],
+    ['--shadow-card', tokens.shadowCard],
+    ['--shadow-card-hover', tokens.shadowCardHover],
+  ]
+
+  for (const [key, value] of vars) {
+    if (typeof value === 'string' && value.trim()) {
+      style[key] = value
+    }
+  }
+
+  return Object.keys(style).length > 0 ? (style as CSSProperties) : undefined
+}
+
 export default async function RootLayout({
   children,
   params,
@@ -95,9 +131,11 @@ export default async function RootLayout({
     getStoreSettings(lang),
   ]);
 
+  const themeStyle = buildThemeStyle(settings)
+
   return (
     <html lang={lang} className="scroll-smooth">
-      <body className="min-h-screen bg-surface-page text-text-main font-sans antialiased">
+      <body className="min-h-screen bg-surface-page text-text-main font-sans antialiased" style={themeStyle}>
         <ClientProviders>
           <Navbar categories={categories} initialMenu={initialMenu} settings={settings} />
           <main className="global-main">