Restyle Klaro banner to brand + add persistent reopen button
Was full-width ('wide' theme) with Klaro's default green/dark
palette, neither matching the brand. Now: compact bottom-left corner
notice (~380px), brand colors via Klaro's CSS-var overrides
(dark1/light1 etc. — confusingly named, they're background/text, not
a dark-mode switch), neutral gray decline button instead of red.
Also adds a persistent bottom-left cookie icon (KlaroConsentManager.tsx)
so a visitor can reopen the consent manager any time via Klaro.show(),
not just on first visit.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+25
-10
@@ -56,20 +56,35 @@ export function buildKlaroConfig(codes: TrackingCode[], onAccept: (code: Trackin
|
||||
return {
|
||||
version: 1,
|
||||
elementID: "klaro",
|
||||
// 'light' (not 'dark'), 'bottom' (matches the previous custom
|
||||
// CookieBanner.tsx's own position), 'wide' (roomier than Klaro's
|
||||
// narrow default notice, closer to the old banner's proportions).
|
||||
// 'light' + 'bottom' + 'left' — a compact corner notice (Klaro's own
|
||||
// default max-width, ~400px), not a full-width bar. 'wide' (tried
|
||||
// first) stretched it across nearly the whole viewport, which read as
|
||||
// too dominant compared to a typical bottom-left corner CMP.
|
||||
// Extra keys beyond `theme` override individual CSS custom properties
|
||||
// (Klaro's injectStyles() applies any non-'theme' `styling` key as a
|
||||
// `--<key>` var) — green1 is what colors the "Alle akzeptieren"
|
||||
// button (.cm-btn-success), so this is how the accept button gets the
|
||||
// site's actual brand color instead of Klaro's default green.
|
||||
// `--<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).
|
||||
styling: {
|
||||
theme: ["light", "bottom", "wide"],
|
||||
green1: "#f6a701", // --color-brand
|
||||
"button-text-color": "#1a1a18", // --color-text-primary — dark text reads better on the brand orange than Klaro's default white
|
||||
"border-radius": "6px",
|
||||
theme: ["light", "bottom", "left"],
|
||||
dark1: "#fffdf8", // --color-bg-paper — notice/modal background
|
||||
dark2: "#e5e0d8", // --color-border
|
||||
dark3: "#f3efe9",
|
||||
light1: "#1a1a18", // --color-text-primary — notice/modal text
|
||||
light2: "#6b6b69", // --color-text-muted
|
||||
light3: "#1a1a18",
|
||||
green1: "#f6a701", // --color-brand — accept button
|
||||
green2: "#d99000",
|
||||
red1: "#e5e0d8", // decline button — neutral bordered look, not red
|
||||
red2: "#d1cabf",
|
||||
"button-text-color": "#1a1a18",
|
||||
"border-radius": "10px",
|
||||
"border-width": "1px",
|
||||
"font-family": "inherit",
|
||||
"notice-max-width": "380px",
|
||||
},
|
||||
storageMethod: "cookie",
|
||||
cookieName: "klaro-consent",
|
||||
|
||||
Reference in New Issue
Block a user