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;
}
/* Background Glowing Orbs */
/* Background Glowing Orbs & Dynamic Surfaces */
.blur-\[120px\] {
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 {
background-color: oklch(var(--oklch-surface)) !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 tokenSwatches = [
preset.primary,
preset.accent,
preset.bgGlow1,
preset.bgGlow2,
preset.gradientFrom,
preset.gradientTo,
preset.textHighlight,
preset.buttonBg,
preset.ringColor,
preset.cardBorder,
{ name: 'Primary', color: preset.primary, desc: 'Helle/edle Hauptfarbe für Navigation/Texte' },
{ name: 'Accent', color: preset.accent, desc: 'Scharfe Highlight-Farbe für Badges/Meldungen' },
{ name: 'bgGlow1', color: preset.bgGlow1, desc: 'Atmosphärischer Lichtnebel von oben' },
{ name: 'bgGlow2', color: preset.bgGlow2, desc: 'Subtiles Gegenlicht von unten' },
{ name: 'gradientFrom', color: preset.gradientFrom, desc: 'Startfarbe für Core-Verläufe' },
{ name: 'gradientTo', color: preset.gradientTo, desc: 'Endfarbe für Core-Verläufe' },
{ name: 'textHighlight', color: preset.textHighlight, desc: 'Soft-Pastell Text-Empfehlung' },
{ name: 'buttonBg', color: preset.buttonBg, desc: 'Satte Basisfarbe Hauptbuttons' },
{ name: 'ringColor', color: preset.ringColor, desc: 'Präzise Fokus-Rand-Farbe' },
{ name: 'cardBorder', color: preset.cardBorder, desc: 'Subtiler Rahmen-Ton Karten' },
]
return (
@@ -99,12 +99,12 @@ export function ColorThemePicker({
{/* 10 Color Token Swatches Bar */}
<div className="space-y-1 pt-1 border-t border-slate-800/60">
<div className="flex items-center gap-1 justify-between">
{tokenSwatches.map((color, i) => (
{tokenSwatches.map((item, i) => (
<span
key={i}
className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0"
style={{ backgroundColor: color }}
title={`Token ${i + 1}: ${color}`}
className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0 transition-transform hover:scale-125"
style={{ backgroundColor: item.color }}
title={`${item.name}: ${item.desc} (${item.color})`}
/>
))}
</div>
@@ -199,11 +199,11 @@ export function ColorThemePicker({
{/* Animated Background Orbs Preview */}
<div
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
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 */}
@@ -211,7 +211,7 @@ export function ColorThemePicker({
<div className="flex items-center gap-2">
<div
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" />
</div>
@@ -221,7 +221,7 @@ export function ColorThemePicker({
</div>
<span
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
</span>
@@ -233,7 +233,7 @@ export function ColorThemePicker({
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"
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" />
@@ -243,7 +243,7 @@ export function ColorThemePicker({
<button
type="button"
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
</button>
@@ -251,9 +251,9 @@ export function ColorThemePicker({
<span
className="text-[10px] font-bold px-2.5 py-1 rounded-full border flex items-center gap-1"
style={{
borderColor: `${accentColor}40`,
backgroundColor: `${accentColor}15`,
color: activePreset.textHighlight || accentColor,
borderColor: 'var(--card-border-glow, ' + accentColor + '40)',
backgroundColor: 'color-mix(in srgb, var(--accent-custom, ' + accentColor + ') 15%, transparent)',
color: 'var(--text-highlight, ' + (activePreset.textHighlight || accentColor) + ')',
}}
>
<Tag className="w-3 h-3" />