Changeset dd7e2a2 in Klonkt

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@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• middleware/render.js (modified) (1 diff)
• middleware/site.js (modified) (2 diffs)
• routes/admin-sites.js (modified) (4 diffs)
• routes/auth.js (modified) (1 diff)
• server.js (modified) (1 diff)
• services/ThemeService.js (modified) (4 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -107 +107 @@
     --ink: #f4ede0; --ink-soft: #d4ccb8; --ink-muted: #a8a29e; --ink-faint: #6b6560;
     --rule: #3d3833; --rule-2: #4d4740;
+}
+
+/* ── KLONKT ── merk-standaard: off-white → donkerblauw (klonkt.com) ── */
+[data-palette="klonkt"] {
+    --paper: #f3f1ea; --paper-2: #e7e4d9;
+    --ink: #11141c; --ink-soft: #2b3040; --ink-muted: #5b6473; --ink-faint: #9aa3b2;
+    --rule: #d8d4c6; --rule-2: #c5c0af;
+}
+@media (prefers-color-scheme: dark) {
+    [data-palette="klonkt"]:not([data-theme="light"]) {
+        --paper: #0b0d12; --paper-2: #11141c;
+        --ink: #f3f1ea; --ink-soft: #c8cdd6; --ink-muted: #9aa3b2; --ink-faint: #6b7280;
+        --rule: #232a38; --rule-2: #2b3040;
+    }
+}
+[data-theme="dark"][data-palette="klonkt"] {
+    --paper: #0b0d12; --paper-2: #11141c;
+    --ink: #f3f1ea; --ink-soft: #c8cdd6; --ink-muted: #9aa3b2; --ink-faint: #6b7280;
+    --rule: #232a38; --rule-2: #2b3040;
 }
 

src/middleware/render.js

@@ -143 +143 @@
       const _navAccent = (_site && _site.accent && /^#[0-9a-fA-F]{6}$/.test(_site.accent))
         ? _site.accent : '#c2410c';
-      const _navPalette = (_site && _site.palette) ? _site.palette : 'sage';
+      const _navPalette = (_site && _site.palette) ? _site.palette : 'klonkt';
       const triggerJson = JSON.stringify({
         pcmsNav: { bodyClass: locals.bodyClass, accent: _navAccent, palette: _navPalette },

src/middleware/site.js

@@ -103 +103 @@
  */
 export function loadTheme(req, res, next) {
-  const PALETTES = ['sage','paper','ocean','forest','stone','midnight','sunset','cream'];
+  const PALETTES = ['klonkt','sage','paper','ocean','forest','stone','midnight','sunset','cream','rose','slate','mint','lilac'];
   
   const user = req.session?.user;
@@ -111 +111 @@
   const palette = (user && PALETTES.includes(user.palette) ? user.palette : null)
                 || (site && PALETTES.includes(site.palette) ? site.palette : null)
-                || 'sage';
+                || 'klonkt';
   
   res.locals.palette = palette;

src/routes/admin-sites.js

@@ -109 +109 @@
     tagline: '',
     language: 'nl',
-    palette: 'sage',
-    accent: '#c2410c',
+    palette: 'klonkt',
+    accent: '#e8b04b',
     profile_photo: '',
     profile_enabled: 1,
@@ -232 +232 @@
     ownerId,
     f.language || 'nl',
-    f.palette || 'sage',
-    ThemeService.validateAccent(f.accent) || '#c2410c',
+    f.palette || 'klonkt',
+    ThemeService.validateAccent(f.accent) || '#e8b04b',
     f.profile_photo || null,
     f.is_public ? 1 : 0,
@@ -291 +291 @@
   // accent: only accept colors from the curated ACCENTS list. Falls back to
   // the orange default if the submitted value isn't recognised.
-  const accent = ThemeService.validateAccent(f.accent) || '#c2410c';
+  const accent = ThemeService.validateAccent(f.accent) || '#e8b04b';
 
   db.prepare(`
@@ -312 +312 @@
     (f.tagline || '').slice(0, 200),
     f.language || 'nl',
-    f.palette || 'sage',
+    f.palette || 'klonkt',
     accent,
     themeOverride,

src/routes/auth.js

@@ -164 +164 @@
   }
 
-  req.session.user = { id: userId, username, email, role: 'god', palette: 'sage', theme: 'dark' };
+  req.session.user = { id: userId, username, email, role: 'god', palette: 'klonkt', theme: 'dark' };
   res.redirect(next || '/');
 });

src/server.js

@@ -329 +329 @@
     orientation: 'any',
     background_color: '#1a1a17',
-    theme_color: site?.accent || '#c2410c',
+    theme_color: site?.accent || '#e8b04b',
     lang: site?.language || 'nl',
     icons: [

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;

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=30">
+<link rel="stylesheet" href="/assets/css/style.css?v=31">
 
 <!-- Audio player styles: loaded on every page so the mini-player works