Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle Klaro to actually match the brand, not just its accent colors

Browse Source 
CSS-var overrides alone (colors, corner position) still left Klaro's
own border/shadow/spacing/typography, which read as an obviously
bolted-on library widget next to this site's hand-designed
components. New KlaroTheme component overrides Klaro's real DOM
classnames directly (confirmed against kiprotect/klaro's own scss
source) — kills the default border, adds this site's own soft-shadow
card look, restyles every button, uses the site's actual serif/sans
font pairing. Also warms up the notice/modal copy.

Updates both READMEs with the tracking-codes/Klaro/back-in-stock/
settings-search/DHL-shipment-label work from this session.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-08-01 21:20:28 +00:00
parent a8ab3e4f44
commit f6b001dd11
3 changed files with 153 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lib/klaroConfig.ts
+13 -17
View File
@@ -63,11 +63,16 @@ export function buildKlaroConfig(codes: TrackingCode[], onAccept: (code: Trackin
// Extra keys beyond `theme` override individual CSS custom properties
// (Klaro's injectStyles() applies any non-'theme' `styling` key as a
// `--<key>` var, see node_modules/klaro's own utils/styling.js) — this
// is the actual brand-color pass: dark1/light1 are (confusingly
// named) the notice's background/text colors, not a dark-mode toggle;
// green1 colors the accept button, red1 the decline button (set
// neutral gray, not alarming red — this site's own secondary buttons
// are plain-bordered, never red, see NotifyMeForm.tsx).
// is the color pass; the border/shadow/typography pass lives in
// KlaroConsentManager.tsx's <KlaroTheme> instead (a real CSS override,
// needed because Klaro's own default border/spacing/font still read as
// an obviously-bolted-on library widget even with the right colors).
// dark1/light1 are (confusingly named) the notice's background/text
// colors, not a dark-mode toggle. green1 colors the accept button.
// blue1/blue2 color the "Einstellungen" (.cm-btn-info) button and
// in-modal links — Klaro's default blue clashed with the brand just as
// much as its default green did, easy to miss since it only shows
// once the modal (not just the notice) is open.
styling: {
theme: ["light", "bottom", "left"],
dark1: "#fffdf8", // --color-bg-paper — notice/modal background
@@ -78,18 +83,9 @@ export function buildKlaroConfig(codes: TrackingCode[], onAccept: (code: Trackin
light3: "#1a1a18",
green1: "#f6a701", // --color-brand — accept button
green2: "#d99000",
red1: "#e5e0d8", // decline button — neutral bordered look, not red
red2: "#d1cabf",
// blue1/blue2 color the "Einstellungen" (.cm-btn-info) button and
// in-modal links — Klaro's default blue clashed with the brand just
// as much as its default green/red did, easy to miss since it only
// shows once the modal (not just the notice) is open.
blue1: "#e5e0d8",
blue2: "#6b6b69",
"button-text-color": "#1a1a18",
"border-radius": "10px",
"border-width": "1px",
"font-family": "inherit",
"notice-max-width": "380px",
},
storageMethod: "cookie",
@@ -103,11 +99,11 @@ export function buildKlaroConfig(codes: TrackingCode[], onAccept: (code: Trackin
translations: {
de: {
consentModal: {
title: "Cookie-Einstellungen",
description: "Hier kannst du einsehen und anpassen, welche Cookies/Skripte diese Seite verwendet.",
title: "Deine Cookie-Einstellungen",
description: "Hier siehst du genau, was wir einsetzen — und entscheidest frei, was du erlaubst. Nichts davon läuft, bevor du zustimmst.",
},
consentNotice: {
description: "Wir nutzen Cookies, um diese Seite zu betreiben und ihre Nutzung zu verstehen.",
description: "Wir verwenden ein paar Cookies, damit diese Seite reibungslos läuft und wir sehen, was bei euch gut ankommt.",
learnMore: "Einstellungen",
},
purposes: {