Changeset 999aad2 in Klonkt

Timestamp:

06/20/2026 02:14:32 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

bffb348

Parents:

83b8b8f

Message:

feat(themes): preview colours synced with real CSS + 4 palettes + 4 accents

• ThemeService.PALETTES paper/ink now 1-to-1 matching [data-palette] CSS → the preview swatches in Appearance now match the applied theme (Stone=beige, Midnight=purple, Sunset=pink, Forest=olive, etc. — was a mismatch).
• 4 new palettes: Rose, Slate, Mint, Lilac (CSS light+dark + ThemeService).
• 4 new accent colours: Turquoise, Pink, Violet, Sky Blue.

style.css?v=29.

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

Location:

src

Files:

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

src/assets/css/style.css

@@ -240 +240 @@
     --ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
     --rule: #3d2c16; --rule-2: #523d1f;
+}
+
+/* ── ROSE ── zacht roze → wijnrood ── */
+[data-palette="rose"] {
+    --paper: #fdf2f4; --paper-2: #f8dde3;
+    --ink: #2e1419; --ink-soft: #4d242c; --ink-muted: #7a4651; --ink-faint: #b3838d;
+    --rule: #f0c9d1; --rule-2: #e0a3af;
+}
+@media (prefers-color-scheme: dark) {
+    [data-palette="rose"]:not([data-theme="light"]) {
+        --paper: #1f0a0f; --paper-2: #33141c;
+        --ink: #fce4ea; --ink-soft: #f0bcc8; --ink-muted: #c98f9d; --ink-faint: #8a6470;
+        --rule: #4a1f2c; --rule-2: #5e2d3a;
+    }
+}
+[data-theme="dark"][data-palette="rose"] {
+    --paper: #1f0a0f; --paper-2: #33141c;
+    --ink: #fce4ea; --ink-soft: #f0bcc8; --ink-muted: #c98f9d; --ink-faint: #8a6470;
+    --rule: #4a1f2c; --rule-2: #5e2d3a;
+}
+
+/* ── SLATE ── koel grijsblauw → antraciet ── */
+[data-palette="slate"] {
+    --paper: #f4f6f8; --paper-2: #e2e8ee;
+    --ink: #1a232e; --ink-soft: #2e3c4d; --ink-muted: #56657a; --ink-faint: #93a1b3;
+    --rule: #cdd6e0; --rule-2: #aebbc9;
+}
+@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;
+    }
+}
+[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 ── */
+[data-palette="mint"] {
+    --paper: #effaf5; --paper-2: #d6f0e4;
+    --ink: #0f2e22; --ink-soft: #1d4a39; --ink-muted: #468066; --ink-faint: #82b3a0;
+    --rule: #c0e6d6; --rule-2: #9ad3bd;
+}
+@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;
+    }
+}
+[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;
+}
+
+/* ── LILAC ── zacht lila → donker violet ── */
+[data-palette="lilac"] {
+    --paper: #faf4fb; --paper-2: #f0e0f3;
+    --ink: #2a1830; --ink-soft: #46294f; --ink-muted: #7a5685; --ink-faint: #b393bd;
+    --rule: #e6cdec; --rule-2: #d4abdd;
+}
+@media (prefers-color-scheme: dark) {
+    [data-palette="lilac"]:not([data-theme="light"]) {
+        --paper: #170a1c; --paper-2: #281433;
+        --ink: #f3e2f7; --ink-soft: #dabce4; --ink-muted: #b088c0; --ink-faint: #7a5a88;
+        --rule: #3d1f4a; --rule-2: #4f2b5e;
+    }
+}
+[data-theme="dark"][data-palette="lilac"] {
+    --paper: #170a1c; --paper-2: #281433;
+    --ink: #f3e2f7; --ink-soft: #dabce4; --ink-muted: #b088c0; --ink-faint: #7a5a88;
+    --rule: #3d1f4a; --rule-2: #4f2b5e;
 }
 

src/services/ThemeService.js

@@ -16 +16 @@
 
 class ThemeService {
+  // Paper/ink komen 1-op-1 uit de [data-palette]-CSS in style.css (= wat ECHT
+  // wordt toegepast); de accent-stip is een representatieve kleur per palet.
   static PALETTES = {
     sage: {
@@ -25 +27 @@
       name: 'Paper',
       light: { paper: '#ffffff', ink: '#09090b', accent: '#000000' },
-      dark: { paper: '#09090b', ink: '#fafafa', accent: '#ffffff' }
+      dark: { paper: '#0a0a0a', ink: '#fafafa', accent: '#ffffff' }
     },
     ocean: {
       name: 'Ocean',
-      light: { paper: '#f0f9ff', ink: '#0c2d48', accent: '#0369a1' },
-      dark: { paper: '#001f3f', ink: '#e0f2fe', accent: '#06b6d4' }
+      light: { paper: '#f0f6fb', ink: '#0f1e2e', accent: '#0369a1' },
+      dark: { paper: '#0a1929', ink: '#e0f2fe', accent: '#38bdf8' }
     },
     forest: {
       name: 'Forest',
-      light: { paper: '#f0fdf4', ink: '#15803d', accent: '#16a34a' },
-      dark: { paper: '#052e16', ink: '#dcfce7', accent: '#22c55e' }
+      light: { paper: '#f2f6ed', ink: '#1a2e15', accent: '#4d7c2a' },
+      dark: { paper: '#0d1f12', ink: '#dcf2d0', accent: '#6fae3f' }
     },
     stone: {
       name: 'Stone',
-      light: { paper: '#f5f5f5', ink: '#262626', accent: '#737373' },
-      dark: { paper: '#1f1f1f', ink: '#e5e5e5', accent: '#a3a3a3' }
+      light: { paper: '#f5f0e8', ink: '#2b2218', accent: '#8a6a45' },
+      dark: { paper: '#1a130b', ink: '#f5e9d5', accent: '#b89366' }
     },
     midnight: {
       name: 'Midnight',
-      light: { paper: '#f8fafc', ink: '#1e293b', accent: '#3b82f6' },
-      dark: { paper: '#0f172a', ink: '#f1f5f9', accent: '#60a5fa' }
+      light: { paper: '#f3f1f8', ink: '#1e1a2e', accent: '#7c5cbf' },
+      dark: { paper: '#0f0a1f', ink: '#e9def7', accent: '#9d88e0' }
     },
     sunset: {
       name: 'Sunset',
-      light: { paper: '#fef3c7', ink: '#92400e', accent: '#f97316' },
-      dark: { paper: '#5a1f08', ink: '#fef3c7', accent: '#fb923c' }
+      light: { paper: '#fdf4f3', ink: '#2e1618', accent: '#d6477f' },
+      dark: { paper: '#1f0a14', ink: '#fce7f3', accent: '#f06fa3' }
     },
     cream: {
       name: 'Cream',
-      light: { paper: '#fffbf0', ink: '#78350f', accent: '#d97706' },
-      dark: { paper: '#3f2305', ink: '#fffbf0', accent: '#f59e0b' }
+      light: { paper: '#fefaf0', ink: '#2a1f0f', accent: '#d97706' },
+      dark: { paper: '#1a1208', ink: '#fef3d6', accent: '#f0a93a' }
+    },
+    rose: {
+      name: 'Rose',
+      light: { paper: '#fdf2f4', ink: '#2e1419', accent: '#e11d6b' },
+      dark: { paper: '#1f0a0f', ink: '#fce4ea', accent: '#f06b9a' }
+    },
+    slate: {
+      name: 'Slate',
+      light: { paper: '#f4f6f8', ink: '#1a232e', accent: '#475569' },
+      dark: { paper: '#0d1117', ink: '#e6edf3', accent: '#8b98a8' }
+    },
+    mint: {
+      name: 'Mint',
+      light: { paper: '#effaf5', ink: '#0f2e22', accent: '#0d9488' },
+      dark: { paper: '#06201a', ink: '#d6f5e9', accent: '#2dd4bf' }
+    },
+    lilac: {
+      name: 'Lilac',
+      light: { paper: '#faf4fb', ink: '#2a1830', accent: '#a855f7' },
+      dark: { paper: '#170a1c', ink: '#f3e2f7', accent: '#c084fc' }
     }
   };
@@ -73 +95 @@
     { key: 'crimson', name: 'Karmijn', color: '#ef2840' },
     { key: 'indigo',  name: 'Indigo',  color: '#6366f1' },
+    { key: 'teal',    name: 'Turquoise', color: '#0d9488' },
+    { key: 'pink',    name: 'Roze',    color: '#ec4899' },
+    { key: 'violet',  name: 'Violet',  color: '#7c3aed' },
+    { key: 'sky',     name: 'Hemelsblauw', color: '#0ea5e9' },
   ];
 

src/views/shell.ejs

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