Changeset 0251bae in Klonkt

Timestamp:

06/21/2026 08:14:38 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

2dc18c4

Parents:

b27cde6

Message:

feat(themes): more colour variety — fewer greens/blues in accents + palettes

Accents: 12 redistributed across the colour wheel (red/orange/amber/gold/green/
teal/blue/indigo/violet/magenta/pink/brown) — green+blue reduced from 6 to 4.
Palettes: 'slate' (2nd blue) -> warm Gold, 'mint' (2nd green) -> warm Terracotta;
keys unchanged so existing sites don't break. style.css blocks + buster v30.

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

Location:

src

Files:

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

src/assets/css/style.css

@@ -261 +261 @@
 }
 
-/* ── SLATE ── koel grijsblauw → antraciet ── */
+/* ── GOUD ── warm goudgeel → diep amber ── (key blijft 'slate' voor DB-compat) */
 [data-palette="slate"] {
-    --paper: #f4f6f8; --paper-2: #e2e8ee;
-    --ink: #1a232e; --ink-soft: #2e3c4d; --ink-muted: #56657a; --ink-faint: #93a1b3;
-    --rule: #cdd6e0; --rule-2: #aebbc9;
+    --paper: #fdf8ea; --paper-2: #f5ebcc;
+    --ink: #2a2410; --ink-soft: #4a3f1c; --ink-muted: #7a6c3e; --ink-faint: #b3a474;
+    --rule: #ece0bf; --rule-2: #ddca94;
 }
 @media (prefers-color-scheme: dark) {
     [data-palette="slate"]:not([data-theme="light"]) {
-        --paper: #0d1117; --paper-2: #1a2029;
-        --ink: #e6edf3; --ink-soft: #c2cdd9; --ink-muted: #8b98a8; --ink-faint: #5a6675;
-        --rule: #283039; --rule-2: #3a444f;
+        --paper: #1a1608; --paper-2: #2a2410;
+        --ink: #f7eecd; --ink-soft: #e0d29f; --ink-muted: #b3a06a; --ink-faint: #7a6c3e;
+        --rule: #4a3f1c; --rule-2: #5e5028;
     }
 }
 [data-theme="dark"][data-palette="slate"] {
-    --paper: #0d1117; --paper-2: #1a2029;
-    --ink: #e6edf3; --ink-soft: #c2cdd9; --ink-muted: #8b98a8; --ink-faint: #5a6675;
-    --rule: #283039; --rule-2: #3a444f;
-}
-
-/* ── MINT ── fris mintgroen → diep teal ── */
+    --paper: #1a1608; --paper-2: #2a2410;
+    --ink: #f7eecd; --ink-soft: #e0d29f; --ink-muted: #b3a06a; --ink-faint: #7a6c3e;
+    --rule: #4a3f1c; --rule-2: #5e5028;
+}
+
+/* ── TERRACOTTA ── warme klei → diep brick ── (key blijft 'mint' voor DB-compat) */
 [data-palette="mint"] {
-    --paper: #effaf5; --paper-2: #d6f0e4;
-    --ink: #0f2e22; --ink-soft: #1d4a39; --ink-muted: #468066; --ink-faint: #82b3a0;
-    --rule: #c0e6d6; --rule-2: #9ad3bd;
+    --paper: #faf2ee; --paper-2: #f2ddd0;
+    --ink: #2e1a12; --ink-soft: #4a2c1e; --ink-muted: #7a5544; --ink-faint: #b3917e;
+    --rule: #eccdbb; --rule-2: #ddb49d;
 }
 @media (prefers-color-scheme: dark) {
     [data-palette="mint"]:not([data-theme="light"]) {
-        --paper: #06201a; --paper-2: #0f3329;
-        --ink: #d6f5e9; --ink-soft: #aee0cd; --ink-muted: #79b59f; --ink-faint: #4e8270;
-        --rule: #1c4a3c; --rule-2: #2a5e4d;
+        --paper: #1f120c; --paper-2: #2e1c13;
+        --ink: #f7e6da; --ink-soft: #e0c3b0; --ink-muted: #b3917c; --ink-faint: #7a5544;
+        --rule: #4a2c1e; --rule-2: #5e3a28;
     }
 }
 [data-theme="dark"][data-palette="mint"] {
-    --paper: #06201a; --paper-2: #0f3329;
-    --ink: #d6f5e9; --ink-soft: #aee0cd; --ink-muted: #79b59f; --ink-faint: #4e8270;
-    --rule: #1c4a3c; --rule-2: #2a5e4d;
+    --paper: #1f120c; --paper-2: #2e1c13;
+    --ink: #f7e6da; --ink-soft: #e0c3b0; --ink-muted: #b3917c; --ink-faint: #7a5544;
+    --rule: #4a2c1e; --rule-2: #5e3a28;
 }
 

src/services/ThemeService.js

@@ -64 +64 @@
       dark: { paper: '#1f0a0f', ink: '#fce4ea', accent: '#f06b9a' }
     },
+    // key blijft 'slate' (DB-veilig), maar omgekleurd naar warm Goud — minder blauw.
     slate: {
-      name: 'Slate',
-      light: { paper: '#f4f6f8', ink: '#1a232e', accent: '#475569' },
-      dark: { paper: '#0d1117', ink: '#e6edf3', accent: '#8b98a8' }
-    },
+      name: 'Goud',
+      light: { paper: '#fdf8ea', ink: '#2a2410', accent: '#b8860b' },
+      dark: { paper: '#1a1608', ink: '#f7eecd', accent: '#d4a72c' }
+    },
+    // key blijft 'mint' (DB-veilig), maar omgekleurd naar warm Terracotta — minder groen.
     mint: {
-      name: 'Mint',
-      light: { paper: '#effaf5', ink: '#0f2e22', accent: '#0d9488' },
-      dark: { paper: '#06201a', ink: '#d6f5e9', accent: '#2dd4bf' }
+      name: 'Terracotta',
+      light: { paper: '#faf2ee', ink: '#2e1a12', accent: '#c2410c' },
+      dark: { paper: '#1f120c', ink: '#f7e6da', accent: '#e8783f' }
     },
     lilac: {
@@ -86 +88 @@
    * Each color works against both light and dark themes.
    */
+  // Evenwichtig over het kleurenwiel — minder groen/blauw (4 van de 12),
+  // meer warme + paars/roze variatie. Allemaal leesbaar op licht én donker.
   static ACCENTS = [
-    { key: 'orange',  name: 'Oranje',  color: '#c2410c' },
-    { key: 'sage',    name: 'Salie',   color: '#5a8a5a' },
-    { key: 'ocean',   name: 'Oceaan',  color: '#0369a1' },
-    { key: 'forest',  name: 'Bos',     color: '#16a34a' },
-    { key: 'plum',    name: 'Pruim',   color: '#9d3a78' },
-    { key: 'gold',    name: 'Goud',    color: '#d97706' },
-    { key: 'crimson', name: 'Karmijn', color: '#ef2840' },
-    { key: 'indigo',  name: 'Indigo',  color: '#6366f1' },
+    { key: 'red',     name: 'Rood',      color: '#dc2626' },
+    { key: 'orange',  name: 'Oranje',    color: '#ea580c' },
+    { key: 'amber',   name: 'Amber',     color: '#d97706' },
+    { key: 'gold',    name: 'Goud',      color: '#ca8a04' },
+    { key: 'forest',  name: 'Groen',     color: '#16a34a' },
     { key: 'teal',    name: 'Turquoise', color: '#0d9488' },
-    { key: 'pink',    name: 'Roze',    color: '#ec4899' },
-    { key: 'violet',  name: 'Violet',  color: '#7c3aed' },
-    { key: 'sky',     name: 'Hemelsblauw', color: '#0ea5e9' },
+    { key: 'ocean',   name: 'Blauw',     color: '#2563eb' },
+    { key: 'indigo',  name: 'Indigo',    color: '#4f46e5' },
+    { key: 'violet',  name: 'Violet',    color: '#7c3aed' },
+    { key: 'plum',    name: 'Magenta',   color: '#c026d3' },
+    { key: 'pink',    name: 'Roze',      color: '#db2777' },
+    { key: 'brown',   name: 'Bruin',     color: '#9a3412' },
   ];
 

src/views/shell.ejs

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