Index: src/assets/css/style.css
===================================================================
--- src/assets/css/style.css (revision 19fbe03003b2283b358dcd0c9a490cf150022e86)
+++ src/assets/css/style.css (revision c9c70cc260bd2806f2c9e2e03fa4b46e2206ed7a)
@@ -109,21 +109,21 @@
}
-/* ── 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,40 +243,78 @@
}
-/* ── 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;
}
Index: src/middleware/site.js
===================================================================
--- src/middleware/site.js (revision 19fbe03003b2283b358dcd0c9a490cf150022e86)
+++ src/middleware/site.js (revision c9c70cc260bd2806f2c9e2e03fa4b46e2206ed7a)
@@ -105,5 +105,5 @@
*/
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;
Index: src/services/ThemeService.js
===================================================================
--- src/services/ThemeService.js (revision 19fbe03003b2283b358dcd0c9a490cf150022e86)
+++ src/services/ThemeService.js (revision c9c70cc260bd2806f2c9e2e03fa4b46e2206ed7a)
@@ -2,13 +2,9 @@
* 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 +15,12 @@
// 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,4 +28,19 @@
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,26 +48,13 @@
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' }
}
};
Index: src/views/shell.ejs
===================================================================
--- src/views/shell.ejs (revision 19fbe03003b2283b358dcd0c9a490cf150022e86)
+++ src/views/shell.ejs (revision c9c70cc260bd2806f2c9e2e03fa4b46e2206ed7a)
@@ -175,5 +175,5 @@
-
+