Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): configure colors via global css variables

Browse Source
This commit is contained in:
DanielS
2026-08-18 15:30:24 +02:00
parent f6760d30a4
commit 03087f4fbb
2 changed files with 46 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
shop/app/globals.css
View File

@@ -151,11 +151,33 @@ html {
border-color: color-mix(in srgb, var(--destructive-custom) 35%, transparent) !important; border-color: color-mix(in srgb, var(--destructive-custom) 35%, transparent) !important;
} }
/* Background Glowing Orbs */ /* Background Glowing Orbs & Dynamic Surfaces */
.blur-\[120px\] { .blur-\[120px\] {
background-color: var(--bg-glow-1) !important; background-color: var(--bg-glow-1) !important;
} }
.bg-\[\#020617\] {
background-color: oklch(var(--oklch-background)) !important;
}
/* Dynamische Buttons & Badges über globale CSS Variablen */
.btn-primary-theme, .bg-primary-theme {
background-color: var(--button-bg, var(--primary-custom)) !important;
color: #ffffff !important;
}
.text-highlight-theme {
color: var(--text-highlight, var(--accent-custom)) !important;
}
.border-glow-theme {
border-color: var(--card-border-glow, color-mix(in srgb, var(--accent-custom) 35%, transparent)) !important;
}
.ring-theme {
--tw-ring-color: var(--ring-color, var(--primary-custom)) !important;
}
input, select, textarea, option { input, select, textarea, option {
background-color: oklch(var(--oklch-surface)) !important; background-color: oklch(var(--oklch-surface)) !important;
color: oklch(var(--oklch-text-main)) !important; color: oklch(var(--oklch-text-main)) !important;

46
shop/components/admin/ColorThemePicker.tsx
View File

@@ -58,16 +58,16 @@ export function ColorThemePicker({
const isSelected = colorScheme === preset.id const isSelected = colorScheme === preset.id
const tokenSwatches = [ const tokenSwatches = [
preset.primary, { name: 'Primary', color: preset.primary, desc: 'Helle/edle Hauptfarbe für Navigation/Texte' },
preset.accent, { name: 'Accent', color: preset.accent, desc: 'Scharfe Highlight-Farbe für Badges/Meldungen' },
preset.bgGlow1, { name: 'bgGlow1', color: preset.bgGlow1, desc: 'Atmosphärischer Lichtnebel von oben' },
preset.bgGlow2, { name: 'bgGlow2', color: preset.bgGlow2, desc: 'Subtiles Gegenlicht von unten' },
preset.gradientFrom, { name: 'gradientFrom', color: preset.gradientFrom, desc: 'Startfarbe für Core-Verläufe' },
preset.gradientTo, { name: 'gradientTo', color: preset.gradientTo, desc: 'Endfarbe für Core-Verläufe' },
preset.textHighlight, { name: 'textHighlight', color: preset.textHighlight, desc: 'Soft-Pastell Text-Empfehlung' },
preset.buttonBg, { name: 'buttonBg', color: preset.buttonBg, desc: 'Satte Basisfarbe Hauptbuttons' },
preset.ringColor, { name: 'ringColor', color: preset.ringColor, desc: 'Präzise Fokus-Rand-Farbe' },
preset.cardBorder, { name: 'cardBorder', color: preset.cardBorder, desc: 'Subtiler Rahmen-Ton Karten' },
] ]
return ( return (
@@ -99,12 +99,12 @@ export function ColorThemePicker({
{/* 10 Color Token Swatches Bar */} {/* 10 Color Token Swatches Bar */}
<div className="space-y-1 pt-1 border-t border-slate-800/60"> <div className="space-y-1 pt-1 border-t border-slate-800/60">
<div className="flex items-center gap-1 justify-between"> <div className="flex items-center gap-1 justify-between">
{tokenSwatches.map((color, i) => ( {tokenSwatches.map((item, i) => (
<span <span
key={i} key={i}
className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0" className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0 transition-transform hover:scale-125"
style={{ backgroundColor: color }} style={{ backgroundColor: item.color }}
title={`Token ${i + 1}: ${color}`} title={`${item.name}: ${item.desc} (${item.color})`}
/> />
))} ))}
</div> </div>
@@ -199,11 +199,11 @@ export function ColorThemePicker({
{/* Animated Background Orbs Preview */} {/* Animated Background Orbs Preview */}
<div <div
className="absolute -top-10 -left-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500" className="absolute -top-10 -left-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500"
style={{ backgroundColor: activePreset.bgGlow1 || primaryColor }} style={{ backgroundColor: 'var(--bg-glow-1, ' + (activePreset.bgGlow1 || primaryColor) + ')' }}
/> />
<div <div
className="absolute -bottom-10 -right-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500" className="absolute -bottom-10 -right-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500"
style={{ backgroundColor: activePreset.bgGlow2 || accentColor }} style={{ backgroundColor: 'var(--bg-glow-2, ' + (activePreset.bgGlow2 || accentColor) + ')' }}
/> />
{/* Header Preview */} {/* Header Preview */}
@@ -211,7 +211,7 @@ export function ColorThemePicker({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div <div
className="w-6 h-6 rounded-md flex items-center justify-center text-white text-xs font-bold shadow-md" className="w-6 h-6 rounded-md flex items-center justify-center text-white text-xs font-bold shadow-md"
style={{ backgroundColor: primaryColor }} style={{ backgroundColor: 'var(--primary-custom, ' + primaryColor + ')' }}
> >
<Building2 className="w-3.5 h-3.5" /> <Building2 className="w-3.5 h-3.5" />
</div> </div>
@@ -221,7 +221,7 @@ export function ColorThemePicker({
</div> </div>
<span <span
className="text-[10px] font-semibold px-2 py-0.5 rounded-full text-slate-950 font-bold" className="text-[10px] font-semibold px-2 py-0.5 rounded-full text-slate-950 font-bold"
style={{ backgroundColor: accentColor }} style={{ backgroundColor: 'var(--accent-custom, ' + accentColor + ')' }}
> >
Aktiv Aktiv
</span> </span>
@@ -233,7 +233,7 @@ export function ColorThemePicker({
type="button" type="button"
className="px-4 py-2 rounded-lg text-xs font-bold text-white shadow-md flex items-center gap-1.5 transition-all" className="px-4 py-2 rounded-lg text-xs font-bold text-white shadow-md flex items-center gap-1.5 transition-all"
style={{ style={{
background: `linear-gradient(135deg, ${primaryColor} 0%, ${activePreset.gradientTo || primaryColor} 100%)`, background: `linear-gradient(135deg, var(--gradient-from, ${primaryColor}) 0%, var(--gradient-to, ${activePreset.gradientTo || primaryColor}) 100%)`,
}} }}
> >
<ShoppingCart className="w-3.5 h-3.5" /> <ShoppingCart className="w-3.5 h-3.5" />
@@ -243,7 +243,7 @@ export function ColorThemePicker({
<button <button
type="button" type="button"
className="px-3.5 py-2 rounded-lg text-xs font-semibold bg-slate-800/90 text-slate-200 border" className="px-3.5 py-2 rounded-lg text-xs font-semibold bg-slate-800/90 text-slate-200 border"
style={{ borderColor: accentColor }} style={{ borderColor: 'var(--accent-custom, ' + accentColor + ')' }}
> >
Details anzeigen Details anzeigen
</button> </button>
@@ -251,9 +251,9 @@ export function ColorThemePicker({
<span <span
className="text-[10px] font-bold px-2.5 py-1 rounded-full border flex items-center gap-1" className="text-[10px] font-bold px-2.5 py-1 rounded-full border flex items-center gap-1"
style={{ style={{
borderColor: `${accentColor}40`, borderColor: 'var(--card-border-glow, ' + accentColor + '40)',
backgroundColor: `${accentColor}15`, backgroundColor: 'color-mix(in srgb, var(--accent-custom, ' + accentColor + ') 15%, transparent)',
color: activePreset.textHighlight || accentColor, color: 'var(--text-highlight, ' + (activePreset.textHighlight || accentColor) + ')',
}} }}
> >
<Tag className="w-3 h-3" /> <Tag className="w-3 h-3" />