Changeset c9c70cc in Klonkt

Timestamp:

06/24/2026 05:07:53 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

34076d7

Parents:

19fbe03

Message:

Palettes overhaul: neutral 'Klonkt' default + 7 real-colour themes

• Default is now the clean neutral (white/black + gold accent), renamed 'Klonkt' (the old navy Klonkt is gone; former 'Paper' merged into it).
• 7 real-colour palettes (tinted like forest/lilac, not navy-with-accent): Forest, Ocean (blue), Teal, Lilac, Sunset, Candy (red), Amber.
• Dropped Sand/cream + Paper from the picker. style.css?v=46.

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

Location:

src

Files:

• assets/css/style.css (modified) (2 diffs)
• middleware/site.js (modified) (1 diff)
• services/ThemeService.js (modified) (4 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -109 +109 @@
 }
 
-/* ── KLONKT ── merk-standaard: off-white → donkerblauw (klonkt.com) ── */
+/* ── KLONKT ── merk-standaard: clean wit → bijna-zwart (neutraal, gouden accent) ── */
 [data-palette="klonkt"] {
-    --paper: #f3f1ea; --paper-2: #e7e4d9;
-    --ink: #11141c; --ink-soft: #2b3040; --ink-muted: #5b6473; --ink-faint: #9aa3b2;
-    --rule: #d8d4c6; --rule-2: #c5c0af;
+    --paper: #ffffff; --paper-2: #f4f4f5;
+    --ink: #09090b; --ink-soft: #27272a; --ink-muted: #52525b; --ink-faint: #a1a1aa;
+    --rule: #e4e4e7; --rule-2: #d4d4d8;
 }
 @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;
+        --paper: #0a0a0a; --paper-2: #18181b;
+        --ink: #fafafa; --ink-soft: #d4d4d8; --ink-muted: #a1a1aa; --ink-faint: #71717a;
+        --rule: #27272a; --rule-2: #3f3f46;
     }
 }
 [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;
+    --paper: #0a0a0a; --paper-2: #18181b;
+    --ink: #fafafa; --ink-soft: #d4d4d8; --ink-muted: #a1a1aa; --ink-faint: #71717a;
+    --rule: #27272a; --rule-2: #3f3f46;
 }
 
@@ -243 +243 @@
 }
 
-/* ── OCEAN ── klonkt-structuur (navy → off-white), blauw accent ── */
+/* ── OCEAN ── helder blauw → diep oceaanblauw ── */
 [data-palette="ocean"] {
-    --paper: #f3f1ea; --paper-2: #e7e4d9;
-    --ink: #11141c; --ink-soft: #2b3040; --ink-muted: #5b6473; --ink-faint: #9aa3b2;
-    --rule: #d8d4c6; --rule-2: #c5c0af;
+    --paper: #eef4fb; --paper-2: #d8e6f7;
+    --ink: #0f2942; --ink-soft: #1d4368; --ink-muted: #4a6e90; --ink-faint: #87a3c0;
+    --rule: #c2d8ee; --rule-2: #a3c2e0;
 }
 @media (prefers-color-scheme: dark) {
     [data-palette="ocean"]: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;
+        --paper: #081726; --paper-2: #102a42;
+        --ink: #d6e8fb; --ink-soft: #aecbe8; --ink-muted: #7e9fc0; --ink-faint: #547390;
+        --rule: #1d3a56; --rule-2: #2a4d6e;
     }
 }
 [data-theme="dark"][data-palette="ocean"] {
-    --paper: #0b0d12; --paper-2: #11141c;
-    --ink: #f3f1ea; --ink-soft: #c8cdd6; --ink-muted: #9aa3b2; --ink-faint: #6b7280;
-    --rule: #232a38; --rule-2: #2b3040;
-}
-
-/* ── CANDY ── klonkt-structuur (navy → off-white), candy-rood accent ── */
+    --paper: #081726; --paper-2: #102a42;
+    --ink: #d6e8fb; --ink-soft: #aecbe8; --ink-muted: #7e9fc0; --ink-faint: #547390;
+    --rule: #1d3a56; --rule-2: #2a4d6e;
+}
+
+/* ── TEAL ── mint-turquoise → diep teal ── */
+[data-palette="teal"] {
+    --paper: #ecf7f5; --paper-2: #cfe9e4;
+    --ink: #0c2e2a; --ink-soft: #194a44; --ink-muted: #467168; --ink-faint: #84aaa2;
+    --rule: #bce0d9; --rule-2: #9bcbc1;
+}
+@media (prefers-color-scheme: dark) {
+    [data-palette="teal"]:not([data-theme="light"]) {
+        --paper: #06201d; --paper-2: #0e332e;
+        --ink: #d4f2ec; --ink-soft: #aad9d0; --ink-muted: #7aaaa0; --ink-faint: #517a72;
+        --rule: #1a4a42; --rule-2: #275e54;
+    }
+}
+[data-theme="dark"][data-palette="teal"] {
+    --paper: #06201d; --paper-2: #0e332e;
+    --ink: #d4f2ec; --ink-soft: #aad9d0; --ink-muted: #7aaaa0; --ink-faint: #517a72;
+    --rule: #1a4a42; --rule-2: #275e54;
+}
+
+/* ── CANDY ── zacht roze-rood → diep kersenrood ── */
 [data-palette="candy"] {
-    --paper: #f3f1ea; --paper-2: #e7e4d9;
-    --ink: #11141c; --ink-soft: #2b3040; --ink-muted: #5b6473; --ink-faint: #9aa3b2;
-    --rule: #d8d4c6; --rule-2: #c5c0af;
+    --paper: #fdf1f3; --paper-2: #f8d8de;
+    --ink: #3a1018; --ink-soft: #5e1f2a; --ink-muted: #8e4450; --ink-faint: #c2868f;
+    --rule: #f0c5cd; --rule-2: #e3a0ab;
 }
 @media (prefers-color-scheme: dark) {
     [data-palette="candy"]: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;
+        --paper: #220810; --paper-2: #3a121d;
+        --ink: #fde0e6; --ink-soft: #f5b8c4; --ink-muted: #cd8b98; --ink-faint: #8e5f6a;
+        --rule: #4d1a28; --rule-2: #632536;
     }
 }
 [data-theme="dark"][data-palette="candy"] {
-    --paper: #0b0d12; --paper-2: #11141c;
-    --ink: #f3f1ea; --ink-soft: #c8cdd6; --ink-muted: #9aa3b2; --ink-faint: #6b7280;
-    --rule: #232a38; --rule-2: #2b3040;
+    --paper: #220810; --paper-2: #3a121d;
+    --ink: #fde0e6; --ink-soft: #f5b8c4; --ink-muted: #cd8b98; --ink-faint: #8e5f6a;
+    --rule: #4d1a28; --rule-2: #632536;
+}
+
+/* ── AMBER ── warm honing → diep amber ── */
+[data-palette="amber"] {
+    --paper: #fdf6e9; --paper-2: #f7e6c2;
+    --ink: #3a2a0c; --ink-soft: #5e451a; --ink-muted: #8e7340; --ink-faint: #c2a877;
+    --rule: #f0dca8; --rule-2: #e3c581;
+}
+@media (prefers-color-scheme: dark) {
+    [data-palette="amber"]:not([data-theme="light"]) {
+        --paper: #221a08; --paper-2: #3a2c12;
+        --ink: #fdeecb; --ink-soft: #f0d49a; --ink-muted: #c2a877; --ink-faint: #8e7340;
+        --rule: #4d3a16; --rule-2: #634d20;
+    }
+}
+[data-theme="dark"][data-palette="amber"] {
+    --paper: #221a08; --paper-2: #3a2c12;
+    --ink: #fdeecb; --ink-soft: #f0d49a; --ink-muted: #c2a877; --ink-faint: #8e7340;
+    --rule: #4d3a16; --rule-2: #634d20;
 }
 

src/middleware/site.js

@@ -105 +105 @@
  */
 export function loadTheme(req, res, next) {
-  const PALETTES = ['klonkt','paper','forest','sunset','cream','lilac','ocean','candy'];
+  const PALETTES = ['klonkt','forest','ocean','teal','lilac','sunset','candy','amber'];
   
   const user = req.session?.user;

src/services/ThemeService.js

@@ -2 +2 @@
  * ThemeService — Palette and theme management
  * 
- * 8 Built-in Palettes (curated, no near-duplicates):
- * - Klonkt (default, navy + gold brand)
- * - Paper (minimalist white)
- * - Forest (greens)
- * - Sunset (pink)
- * - Sand (warm paper, clay accent — key 'cream')
- * - Lilac (purple)
- * - Ocean (klonkt navy + blue accent)
- * - Candy (klonkt navy + candy-red accent)
+ * 8 Built-in Palettes — 1 neutral default + 7 real colours:
+ * - Klonkt (DEFAULT, clean white/black neutral + gold accent; was 'Paper')
+ * - Forest (green) · Ocean (blue) · Teal · Lilac (purple)
+ * - Sunset (pink) · Candy (red) · Amber (warm)
+ * Colour palettes are tinted (like forest/lilac), not navy-with-accent.
  *
  * Dark/Light mode toggle stored per user
@@ -19 +15 @@
   // is ACTUALLY applied); the accent dot is a representative color per palette.
   static PALETTES = {
-    // Brand default — matches klonkt.com (dark blue + gold).
+    // DEFAULT — clean neutral (formerly 'Paper'), renamed to the brand 'Klonkt'.
+    // White → near-black, with the brand gold as accent. The old navy 'Klonkt' is gone.
     klonkt: {
       name: 'Klonkt',
-      light: { paper: '#f3f1ea', ink: '#11141c', accent: '#c98a2a' },
-      dark: { paper: '#0b0d12', ink: '#f3f1ea', accent: '#e8b04b' }
-    },
-    paper: {
-      name: 'Paper',
-      light: { paper: '#ffffff', ink: '#09090b', accent: '#000000' },
-      dark: { paper: '#0a0a0a', ink: '#fafafa', accent: '#ffffff' }
-    },
+      light: { paper: '#ffffff', ink: '#09090b', accent: '#c98a2a' },
+      dark: { paper: '#0a0a0a', ink: '#fafafa', accent: '#e8b04b' }
+    },
+    // 7 real-colour palettes (tinted paper, like forest/lilac — NOT navy-with-accent).
     forest: {
       name: 'Forest',
@@ -35 +28 @@
       dark: { paper: '#0d1f12', ink: '#dcf2d0', accent: '#6fae3f' }
     },
+    ocean: {
+      name: 'Ocean',
+      light: { paper: '#eef4fb', ink: '#0f2942', accent: '#1d6fe0' },
+      dark: { paper: '#081726', ink: '#d6e8fb', accent: '#5ba0f5' }
+    },
+    teal: {
+      name: 'Teal',
+      light: { paper: '#ecf7f5', ink: '#0c2e2a', accent: '#0d9488' },
+      dark: { paper: '#06201d', ink: '#d4f2ec', accent: '#2dd4bf' }
+    },
+    lilac: {
+      name: 'Lilac',
+      light: { paper: '#faf4fb', ink: '#2a1830', accent: '#a855f7' },
+      dark: { paper: '#170a1c', ink: '#f3e2f7', accent: '#c084fc' }
+    },
     sunset: {
       name: 'Sunset',
@@ -40 +48 @@
       dark: { paper: '#1f0a14', ink: '#fce7f3', accent: '#f06fa3' }
     },
-    // Warm paper — soft off-white + clay accent (deliberately NOT bright yellow).
-    // key stays 'cream' (DB-safe).
-    cream: {
-      name: 'Sand',
-      light: { paper: '#f7f3ec', ink: '#232019', accent: '#bf6a45' },
-      dark: { paper: '#14120d', ink: '#efe9dd', accent: '#d6845f' }
-    },
-    // Ocean & Candy = the klonkt palette (navy + off-white) with a different accent.
-    ocean: {
-      name: 'Ocean',
-      light: { paper: '#f3f1ea', ink: '#11141c', accent: '#1d6fe0' },
-      dark: { paper: '#0b0d12', ink: '#f3f1ea', accent: '#4f9bff' }
-    },
     candy: {
       name: 'Candy',
-      light: { paper: '#f3f1ea', ink: '#11141c', accent: '#e11d48' },
-      dark: { paper: '#0b0d12', ink: '#f3f1ea', accent: '#fb5c7d' }
-    },
-    lilac: {
-      name: 'Lilac',
-      light: { paper: '#faf4fb', ink: '#2a1830', accent: '#a855f7' },
-      dark: { paper: '#170a1c', ink: '#f3e2f7', accent: '#c084fc' }
+      light: { paper: '#fdf1f3', ink: '#3a1018', accent: '#e11d48' },
+      dark: { paper: '#220810', ink: '#fde0e6', accent: '#fb6f8b' }
+    },
+    amber: {
+      name: 'Amber',
+      light: { paper: '#fdf6e9', ink: '#3a2a0c', accent: '#d97706' },
+      dark: { paper: '#221a08', ink: '#fdeecb', accent: '#f0a93a' }
     }
   };

src/views/shell.ejs

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