Index: src/assets/css/style.css
===================================================================
--- src/assets/css/style.css (revision 83b8b8fdf0f2e36bee6d02282006516f8afef045)
+++ src/assets/css/style.css (revision 999aad27cd7100800f4b495375f3392bd1ad16f0)
@@ -240,4 +240,80 @@
--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;
}
Index: src/services/ThemeService.js
===================================================================
--- src/services/ThemeService.js (revision 83b8b8fdf0f2e36bee6d02282006516f8afef045)
+++ src/services/ThemeService.js (revision 999aad27cd7100800f4b495375f3392bd1ad16f0)
@@ -16,4 +16,6 @@
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,35 +27,55 @@
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,4 +95,8 @@
{ 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' },
];
Index: src/views/shell.ejs
===================================================================
--- src/views/shell.ejs (revision 83b8b8fdf0f2e36bee6d02282006516f8afef045)
+++ src/views/shell.ejs (revision 999aad27cd7100800f4b495375f3392bd1ad16f0)
@@ -163,5 +163,5 @@
-
+