Karten im hellen Modus lesbar: Kartenfarbe nach Theme

Die BorderGlow-Karten in Values, Kontaktabschnitt und Über uns hatten
dunkle Hintergründe fest verdrahtet, ihr Text nutzt aber Theme-Farben
(Kontrast 1,07:1 im hellen Modus). BorderGlow kennt jetzt
lightBackgroundColor und wählt die Kartenfarbe per CSS nach Theme
(--card-bg-dark / --card-bg-light, html:not(.dark)), ohne Flackern beim
Laden. Dunkel behält exakt die bisherigen Farben (hsl(0 0% 6%), #120F17,
hsl(0 0% 4%)); hell nutzt hsl(0 0% 96%) mit sichtbarem Rand. Der
Kantenschein wird im hellen Modus normal statt mit plus-lighter gemischt
und in Violett gezeichnet, sonst wäre er auf Weiß unsichtbar.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Sonnet 5.5 committed 2026-10-01 10:48:36 +00:00
1 parent 194301c6af
commit 897d594dde
6 files changed
+83 -1

No files matched your search

+22
View File
@@ -6,6 +6,8 @@
--border-radius: 28px;
--glow-padding: 40px;
--cone-spread: 25;
/* Kartenfarbe nach Theme: --card-bg-dark / --card-bg-light kommen aus BorderGlow.tsx */
--card-bg: var(--card-bg-dark, #000);
position: relative;
border-radius: var(--border-radius);
isolation: isolate;
@@ -25,6 +27,12 @@
rgba(0, 0, 0, 0.1) 0px 32px 64px;
}
/* Heller Modus: helle Kartenfarbe und ein sichtbarer Rand (weiß mit 8 % Deckkraft wäre auf Weiß unsichtbar) */
html:not(.dark) .border-glow-card {
--card-bg: var(--card-bg-light, var(--card-bg-dark, #000));
border-color: hsl(var(--border));
}
.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
@@ -147,6 +155,20 @@
0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}
/* Heller Modus: "plus-lighter" ginge auf einer hellen Karte im Weiß unter, und die blasse Glow-Farbe wäre kaum sichtbar.
Der Kantenschein wird deshalb normal gemischt und in einem kräftigeren Violett gezeichnet. */
html:not(.dark) .border-glow-card > .edge-light {
mix-blend-mode: normal;
}
html:not(.dark) .border-glow-card > .edge-light::before {
box-shadow:
inset 0 0 0 1px hsl(268deg 83% 62% / 70%),
inset 0 0 3px 0 hsl(268deg 83% 62% / 45%),
inset 0 0 12px 0 hsl(268deg 83% 62% / 30%),
inset 0 0 25px 2px hsl(268deg 83% 62% / 15%);
}
.border-glow-inner {
display: flex;
flex-direction: column;