From 4355bb8406f00bc5350a7610f41af7496ae958d3 Mon Sep 17 00:00:00 2001
From: Daniel S <daniel.schumacher@caspos.de>
Date: Sun, 9 Aug 2026 23:02:21 +0200
Subject: [PATCH] feat(theme): dynamic CSS custom properties for presets,
 light/dark mode and individual color overrides

---
 src/layouts/Layout.astro    |  8 ++++++--
 src/pages/admin/index.astro | 36 +++++++++++++++++++++++++++++++++---
 src/utils/configLoader.ts   |  4 ++++
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 1f8dca4..7fe1663 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -20,7 +20,10 @@ interface Props {
 
 const { siteConfig, themeConfig } = loadWaasConfigs(Astro.request.headers.get('user-agent') ?? '');
 const activePreset = THEME_PRESETS[themeConfig.activePreset] || THEME_PRESETS.corporateDark;
-const colors = activePreset.colors;
+const colors = {
+  ...activePreset.colors,
+  ...(themeConfig.customColors || {})
+};
 
 const { title, description = "Professionelles Webdesign & moderne Websites.", ogImage } = Astro.props;
 
@@ -54,10 +57,11 @@ const { title, description = "Professionelles Webdesign & moderne Websites.", og
 
 			html.light {
 				--theme-bg: #F8FAFC;
-				--theme-card-bg: rgba(255, 255, 255, 0.7);
+				--theme-card-bg: rgba(255, 255, 255, 0.85);
 				--theme-text: #0F172A;
 				--theme-border: rgba(0, 0, 0, 0.1);
 			}
+
 		</style>
 		
 		<!-- Inline theme initialization to prevent FOUC -->
diff --git a/src/pages/admin/index.astro b/src/pages/admin/index.astro
index 6203775..5248c58 100644
--- a/src/pages/admin/index.astro
+++ b/src/pages/admin/index.astro
@@ -154,12 +154,12 @@ const presets = Object.values(THEME_PRESETS);
         <!-- Sidebar Column -->
         <div class="space-y-8">
           
-          <!-- Theme Preset Picker -->
+          <!-- Theme Preset Picker & Custom Colors -->
           <div class="glass-panel rounded-2xl p-6 space-y-4">
             <h2 class="text-lg font-bold text-sky-400 uppercase tracking-wider flex items-center gap-2">
               Theme Preset (10 Styles)
             </h2>
-            <div class="space-y-2 max-h-[320px] overflow-y-auto pr-1">
+            <div class="space-y-2 max-h-[220px] overflow-y-auto pr-1">
               {presets.map((p) => (
                 <label class={`flex items-center justify-between p-3 rounded-xl border transition-all cursor-pointer ${themeConfig.activePreset === p.id ? 'border-sky-400 bg-sky-400/10' : 'border-white/5 hover:border-white/20 bg-slate-950/40'}`}>
                   <div class="flex items-center gap-3">
@@ -173,8 +173,31 @@ const presets = Object.values(THEME_PRESETS);
                 </label>
               ))}
             </div>
+
+            <!-- Custom Colors Section -->
+            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider pt-3 border-t border-white/10">Individuelle Farbvergabe (Overrides)</h3>
+            <p class="text-[10px] text-slate-400">Überschreibe hier gezielt einzelne Preset-Farben:</p>
+            <div class="grid grid-cols-2 gap-2 text-xs">
+              <div>
+                <label class="block text-[10px] text-slate-400 mb-1">Hintergrund (Bg)</label>
+                <input type="color" id="customColorBg" value={themeConfig.customColors?.bg || (THEME_PRESETS[themeConfig.activePreset] || THEME_PRESETS.corporateDark).colors.bg} class="w-full h-8 rounded bg-slate-900 border border-white/10 cursor-pointer p-0.5" />
+              </div>
+              <div>
+                <label class="block text-[10px] text-slate-400 mb-1">Akzentfarbe</label>
+                <input type="color" id="customColorAccent" value={themeConfig.customColors?.accent || (THEME_PRESETS[themeConfig.activePreset] || THEME_PRESETS.corporateDark).colors.accent} class="w-full h-8 rounded bg-slate-900 border border-white/10 cursor-pointer p-0.5" />
+              </div>
+              <div>
+                <label class="block text-[10px] text-slate-400 mb-1">Textfarbe</label>
+                <input type="color" id="customColorText" value={themeConfig.customColors?.text || (THEME_PRESETS[themeConfig.activePreset] || THEME_PRESETS.corporateDark).colors.text} class="w-full h-8 rounded bg-slate-900 border border-white/10 cursor-pointer p-0.5" />
+              </div>
+              <div>
+                <label class="block text-[10px] text-slate-400 mb-1">Rahmenfarbe (Border)</label>
+                <input type="text" id="customColorBorder" value={themeConfig.customColors?.border || ''} placeholder="rgba(255,255,255,0.1)" class="w-full h-8 rounded bg-slate-900 border border-white/10 text-[10px] px-2 text-white" />
+              </div>
+            </div>
           </div>
 
+
           <!-- SMTP Config -->
           <div class="glass-panel rounded-3xl p-6 space-y-4">
             <h2 class="text-lg font-bold text-sky-400 uppercase tracking-wider flex items-center gap-2">
@@ -258,8 +281,15 @@ const presets = Object.values(THEME_PRESETS);
 
 
         themeConfig: {
-          activePreset: selectedPreset
+          activePreset: selectedPreset,
+          customColors: {
+            bg: getVal('customColorBg'),
+            accent: getVal('customColorAccent'),
+            text: getVal('customColorText'),
+            border: getVal('customColorBorder')
+          }
         },
+
         smtpConfig: {
           host: getVal('smtpHost'),
           port: getNum('smtpPort'),
diff --git a/src/utils/configLoader.ts b/src/utils/configLoader.ts
index 66a7081..4eb1a8d 100644
--- a/src/utils/configLoader.ts
+++ b/src/utils/configLoader.ts
@@ -100,10 +100,14 @@ export interface ThemeConfig {
   glassBorderRadius?: string; // 'rounded-lg' | 'rounded-xl' | 'rounded-2xl'
   customColors?: {
     bg?: string;
+    cardBg?: string;
+    text?: string;
     accent?: string;
+    border?: string;
   };
 }
 
+
 export interface SmtpConfig {
   host: string;
   port: number;