Changeset dd7e2a2 in Klonkt for src/services/ThemeService.js

Timestamp:

06/22/2026 02:52:43 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

b20460e

Parents:

5eff581

Message:

feat(theme): default = Klonkt brand (dark navy + yellow, matches klonkt.com)

New 'klonkt' palette (navy #0b0d12 / off-white #f3f1ea) + accent Klonkt yellow
#e8b04b, set as default for new sites + all fallbacks (ThemeService,
admin-sites, site.js, render, auth, server theme_color). site.js palette list
was stale (8) -> now complete (13). style.css [data-palette=klonkt] + buster v31.

Co-Authored-By: Claude <noreply@…>

File:

• src/services/ThemeService.js (modified) (4 diffs)

src/services/ThemeService.js

@@ -19 +19 @@
   // wordt toegepast); de accent-stip is een representatieve kleur per palet.
   static PALETTES = {
+    // Merk-standaard — komt overeen met klonkt.com (donkerblauw + geel).
+    klonkt: {
+      name: 'Klonkt',
+      light: { paper: '#f3f1ea', ink: '#11141c', accent: '#c98a2a' },
+      dark: { paper: '#0b0d12', ink: '#f3f1ea', accent: '#e8b04b' }
+    },
     sage: {
       name: 'Sage',
@@ -91 +97 @@
   // meer warme + paars/roze variatie. Allemaal leesbaar op licht én donker.
   static ACCENTS = [
+    { key: 'klonkt',  name: 'Klonkt-geel', color: '#e8b04b' },
     { key: 'red',     name: 'Rood',      color: '#dc2626' },
     { key: 'orange',  name: 'Oranje',    color: '#ea580c' },
@@ -125 +132 @@
    */
   static getPalette(paletteKey) {
-    return this.PALETTES[paletteKey] || this.PALETTES.sage;
+    return this.PALETTES[paletteKey] || this.PALETTES.klonkt;
   }
 
@@ -197 +204 @@
   static generateThemeMeta(userTheme, userPalette, siteTheme, siteAccent) {
     const theme = userTheme || siteTheme || 'dark';
-    const palette = userPalette || 'sage';
-    const accent = siteAccent || '#c2410c';
+    const palette = userPalette || 'klonkt';
+    const accent = siteAccent || '#e8b04b';
     const paletteData = this.getPalette(palette);
     const colors = theme === 'dark' ? paletteData.dark : paletteData.light;