Index: src/assets/css/style.css
===================================================================
--- src/assets/css/style.css (revision 9cc0f9fdde4fa6ba8bb3f7024b858b9d11f832a0)
+++ src/assets/css/style.css (revision 19fbe03003b2283b358dcd0c9a490cf150022e86)
@@ -224,21 +224,59 @@
}
-/* ── CREAM ── warm papier → caramel-donker ── */
+/* ── SAND ── warm papier (subtiel, niet fel geel) → warm donker ── (key blijft 'cream') */
[data-palette="cream"] {
- --paper: #fefaf0; --paper-2: #f5ebd5;
- --ink: #2a1f0f; --ink-soft: #4a3820; --ink-muted: #786140; --ink-faint: #ad9068;
- --rule: #e8d9b0; --rule-2: #d1bc8a;
+ --paper: #f7f3ec; --paper-2: #ece5d8;
+ --ink: #232019; --ink-soft: #43392c; --ink-muted: #6f6149; --ink-faint: #a3957c;
+ --rule: #ddd3c0; --rule-2: #c9bca3;
}
@media (prefers-color-scheme: dark) {
[data-palette="cream"]:not([data-theme="light"]) {
- --paper: #1a1208; --paper-2: #2e2012;
- --ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
- --rule: #3d2c16; --rule-2: #523d1f;
+ --paper: #14120d; --paper-2: #221e15;
+ --ink: #efe9dd; --ink-soft: #d0c6b2; --ink-muted: #a3957c; --ink-faint: #6f6149;
+ --rule: #322c20; --rule-2: #463d2c;
}
}
[data-theme="dark"][data-palette="cream"] {
- --paper: #1a1208; --paper-2: #2e2012;
- --ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
- --rule: #3d2c16; --rule-2: #523d1f;
+ --paper: #14120d; --paper-2: #221e15;
+ --ink: #efe9dd; --ink-soft: #d0c6b2; --ink-muted: #a3957c; --ink-faint: #6f6149;
+ --rule: #322c20; --rule-2: #463d2c;
+}
+
+/* ── OCEAN ── klonkt-structuur (navy → off-white), blauw accent ── */
+[data-palette="ocean"] {
+ --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="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;
+ }
+}
+[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 ── */
+[data-palette="candy"] {
+ --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="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;
+ }
+}
+[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;
}
Index: src/middleware/site.js
===================================================================
--- src/middleware/site.js (revision 9cc0f9fdde4fa6ba8bb3f7024b858b9d11f832a0)
+++ src/middleware/site.js (revision 19fbe03003b2283b358dcd0c9a490cf150022e86)
@@ -105,5 +105,5 @@
*/
export function loadTheme(req, res, next) {
- const PALETTES = ['klonkt','paper','forest','stone','sunset','cream','mint','lilac'];
+ const PALETTES = ['klonkt','paper','forest','sunset','cream','lilac','ocean','candy'];
const user = req.session?.user;
Index: src/services/ThemeService.js
===================================================================
--- src/services/ThemeService.js (revision 9cc0f9fdde4fa6ba8bb3f7024b858b9d11f832a0)
+++ src/services/ThemeService.js (revision 19fbe03003b2283b358dcd0c9a490cf150022e86)
@@ -6,9 +6,9 @@
* - Paper (minimalist white)
* - Forest (greens)
- * - Stone (warm grays)
* - Sunset (pink)
- * - Cream (amber beige)
- * - Terracotta (burnt orange, key 'mint')
+ * - Sand (warm paper, clay accent — key 'cream')
* - Lilac (purple)
+ * - Ocean (klonkt navy + blue accent)
+ * - Candy (klonkt navy + candy-red accent)
*
* Dark/Light mode toggle stored per user
@@ -35,9 +35,4 @@
dark: { paper: '#0d1f12', ink: '#dcf2d0', accent: '#6fae3f' }
},
- stone: {
- name: 'Stone',
- light: { paper: '#f5f0e8', ink: '#2b2218', accent: '#8a6a45' },
- dark: { paper: '#1a130b', ink: '#f5e9d5', accent: '#b89366' }
- },
sunset: {
name: 'Sunset',
@@ -45,14 +40,21 @@
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: 'Cream',
- light: { paper: '#fefaf0', ink: '#2a1f0f', accent: '#d97706' },
- dark: { paper: '#1a1208', ink: '#fef3d6', accent: '#f0a93a' }
- },
- // key stays 'mint' (DB-safe), but recolored to warm Terracotta — less green.
- mint: {
- name: 'Terracotta',
- light: { paper: '#faf2ee', ink: '#2e1a12', accent: '#c2410c' },
- dark: { paper: '#1f120c', ink: '#f7e6da', accent: '#e8783f' }
+ 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: {
@@ -72,6 +74,5 @@
static ACCENTS = [
{ key: 'klonkt', name: 'Klonkt-geel', color: '#e8b04b' },
- { key: 'red', name: 'Rood', color: '#dc2626' },
- { key: 'orange', name: 'Oranje', color: '#ea580c' },
+ { key: 'red', name: 'Candy-rood', color: '#e11d48' },
{ key: 'amber', name: 'Amber', color: '#d97706' },
{ key: 'forest', name: 'Groen', color: '#16a34a' },
@@ -82,5 +83,4 @@
{ key: 'plum', name: 'Magenta', color: '#c026d3' },
{ key: 'pink', name: 'Roze', color: '#db2777' },
- { key: 'brown', name: 'Bruin', color: '#9a3412' },
];
Index: src/views/shell.ejs
===================================================================
--- src/views/shell.ejs (revision 9cc0f9fdde4fa6ba8bb3f7024b858b9d11f832a0)
+++ src/views/shell.ejs (revision 19fbe03003b2283b358dcd0c9a490cf150022e86)
@@ -175,5 +175,5 @@
-
+