From 5e705f780d5f5135c0b7a09f58f8e54b9b63a2db Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Fri, 24 Apr 2026 18:54:39 +0200
Subject: [PATCH] refactor(css): overhaul dark mode palette to deep neutral
 tones

Align dark mode surfaces with a cooler, deeper aesthetic inspired by
Claude's dark theme:
- Background: #1f1f1e (was rgb(19,22.5,30.5))
- Sidebar: #171716 (separate from main background)
- Cards/Dropdowns: #242422 (was #181c25)
- Borders: #2f2f2d / #383835 (was blue-tinted grays)
- Text: neutralized grays (#c8c8c6, #6e6e6c etc.)
- Box-shadows: pure black rgba (was blue-tinted)

Also updates the self-contained error-debug page fallback tokens.

Both explicit [data-theme=dark] and prefers-color-scheme blocks are
kept in sync. High-contrast dark overrides remain untouched.
---
 web/css/base/variables.base.css   | 196 +++++++++++++++---------------
 web/css/pages/app-error-debug.css |  18 +--
 2 files changed, 107 insertions(+), 107 deletions(-)

diff --git a/web/css/base/variables.base.css b/web/css/base/variables.base.css
index 3c59970..22c9e17 100644
--- a/web/css/base/variables.base.css
+++ b/web/css/base/variables.base.css
@@ -365,12 +365,12 @@
   :host(:not([data-theme])),
   :root:not([data-theme]) {
     color-scheme: dark;
-    --app-background-color: rgb(19, 22.5, 30.5);
-    --app-sidebar-background-color: var(--app-background-color);
-    --app-color: #c2c7d0;
+    --app-background-color: #1f1f1e;
+    --app-sidebar-background-color: #171716;
+    --app-color: #c8c8c6;
     --app-text-selection-color: rgba(1, 170, 255, 0.1875);
-    --app-muted-color: #7b8495;
-    --app-muted-border-color: #202632;
+    --app-muted-color: #6e6e6c;
+    --app-muted-border-color: #2f2f2d;
     --app-primary-h-dark: var(--app-primary-h-light, var(--app-primary-h-base));
     --app-primary-s-dark: var(--app-primary-s-light, var(--app-primary-s-base));
     --app-primary-l-dark: var(--app-primary-l-light, var(--app-primary-l-base));
@@ -458,20 +458,20 @@
     --app-contrast-focus: rgba(207, 213, 226, 0.25);
     --app-contrast-inverse: #000;
     --app-box-shadow:
-      0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),
-      0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),
-      0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),
-      0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),
-      0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302),
-      0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06),
-      0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
-    --app-h1-color: #f0f1f3;
-    --app-h2-color: #e0e3e7;
-    --app-h3-color: #c2c7d0;
-    --app-h4-color: #b3b9c5;
-    --app-h5-color: #a4acba;
-    --app-h6-color: #8891a4;
-    --app-mark-background-color: #014063;
+      0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
+      0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
+      0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
+      0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
+      0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
+      0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
+      0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
+    --app-h1-color: #f0f0ee;
+    --app-h2-color: #e0e0de;
+    --app-h3-color: #c8c8c6;
+    --app-h4-color: #b3b3b1;
+    --app-h5-color: #a4a4a2;
+    --app-h6-color: #888886;
+    --app-mark-background-color: #1a3a4a;
     --app-mark-color: #fff;
     --app-ins-color: #62af9a;
     --app-del-color: rgb(205.5, 126, 123);
@@ -490,39 +490,39 @@
     --badge-neutral-bg: #222831;
     --badge-neutral-color: #cbd5e1;
     --badge-neutral-border: #2f3945;
-    --app-tile-bg: rgba(20, 24, 32, 0.6);
-    --app-tile-border: rgba(255, 255, 255, 0.08);
+    --app-tile-bg: rgba(23, 23, 22, 0.6);
+    --app-tile-border: rgba(255, 255, 255, 0.06);
     --app-tile-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
-    --app-tile-icon-bg: rgba(255, 255, 255, 0.08);
-    --app-tile-icon-color: #e6ecff;
-    --app-tile-count-color: #f1f5ff;
-    --app-tile-label-color: #d1d7e3;
-    --app-tile-link-color: #98a2b3;
+    --app-tile-icon-bg: rgba(255, 255, 255, 0.06);
+    --app-tile-icon-color: #e8e8e6;
+    --app-tile-count-color: #f2f2f0;
+    --app-tile-label-color: #d4d4d2;
+    --app-tile-link-color: #9e9e9c;
     --app-blockquote-border-color: var(--app-muted-border-color);
     --app-blockquote-footer-color: var(--app-muted-color);
     --app-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     --app-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     --app-table-border-color: var(--app-muted-border-color);
     --app-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
-    --app-code-background-color: rgb(26, 30.5, 40.25);
-    --app-code-color: #8891a4;
+    --app-code-background-color: #2a2a28;
+    --app-code-color: #888886;
     --app-code-kbd-background-color: var(--app-color);
     --app-code-kbd-color: var(--app-background-color);
-    --app-form-element-background-color: rgb(28, 33, 43.5);
-    --app-form-element-selected-background-color: #2a3140;
-    --app-form-element-border-color: #2a3140;
+    --app-form-element-background-color: #2a2a28;
+    --app-form-element-selected-background-color: #383835;
+    --app-form-element-border-color: #383835;
     --app-border: var(--app-form-element-border-color);
-    --app-form-element-color: #e0e3e7;
-    --app-form-element-placeholder-color: #8891a4;
-    --app-form-element-active-background-color: rgb(26, 30.5, 40.25);
+    --app-form-element-color: #e0e0de;
+    --app-form-element-placeholder-color: #7a7a78;
+    --app-form-element-active-background-color: #2a2a28;
     --app-form-element-active-border-color: var(--app-primary-border);
     --app-form-element-focus-color: var(--app-primary-border);
     --app-form-element-disabled-opacity: 0.5;
-    --app-form-element-disabled-background-color: #1e2430;
-    --app-form-element-readonly-background-color: #242c3a;
-    --app-form-element-readonly-border-color: #3a4458;
-    --app-form-element-readonly-color: #d7dde8;
-    --app-form-element-readonly-focus-color: rgba(136, 145, 164, 0.35);
+    --app-form-element-disabled-background-color: #1a1a18;
+    --app-form-element-readonly-background-color: #333330;
+    --app-form-element-readonly-border-color: #4a4a48;
+    --app-form-element-readonly-color: #d7d7d5;
+    --app-form-element-readonly-focus-color: rgba(130, 130, 128, 0.35);
     --app-form-element-invalid-border-color: rgb(149.5, 74, 80);
     --app-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
     --app-form-element-invalid-focus-color: var(
@@ -549,12 +549,12 @@
     --app-action-danger-hover-border: #952d2d;
     --app-action-danger-focus-color: rgba(179, 54, 54, 0.5);
     --app-action-danger-outline-background: rgba(179, 54, 54, 0.2);
-    --app-switch-background-color: #333c4e;
+    --app-switch-background-color: #3a3a38;
     --app-switch-checked-background-color: var(--app-primary-background);
     --app-switch-color: #fff;
     --app-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-    --app-range-border-color: #202632;
-    --app-range-active-border-color: #2a3140;
+    --app-range-border-color: #2f2f2d;
+    --app-range-active-border-color: #383835;
     --app-range-thumb-border-color: var(--app-background-color);
     --app-range-thumb-color: var(--app-secondary-background);
     --app-range-thumb-active-color: var(--app-primary-background);
@@ -562,19 +562,19 @@
     --app-accordion-active-summary-color: var(--app-primary-hover);
     --app-accordion-close-summary-color: var(--app-color);
     --app-accordion-open-summary-color: var(--app-muted-color);
-    --app-card-background-color: #181c25;
+    --app-card-background-color: #242422;
     --app-card-border-color: var(--app-card-background-color);
     --app-card-box-shadow: var(--app-box-shadow);
-    --app-card-sectioning-background-color: rgb(26, 30.5, 40.25);
+    --app-card-sectioning-background-color: #2a2a28;
     --app-details-card-open-summary-bg: var(--app-card-sectioning-background-color);
-    --app-dropdown-background-color: #181c25;
-    --app-dropdown-border-color: #202632;
+    --app-dropdown-background-color: #242422;
+    --app-dropdown-border-color: #2f2f2d;
     --app-dropdown-box-shadow: var(--app-box-shadow);
     --app-dropdown-color: var(--app-color);
-    --app-dropdown-hover-background-color: #202632;
+    --app-dropdown-hover-background-color: #2f2f2d;
     --app-loading-spinner-opacity: 0.5;
-    --app-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
-    --app-progress-background-color: #202632;
+    --app-modal-overlay-background-color: rgba(15, 15, 14, 0.75);
+    --app-progress-background-color: #2f2f2d;
     --app-progress-color: var(--app-primary-background);
     --app-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
     --app-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
@@ -604,12 +604,12 @@
 
 [data-theme="dark"] {
   color-scheme: dark;
-  --app-background-color: rgb(19, 22.5, 30.5);
-  --app-sidebar-background-color: var(--app-background-color);
-  --app-color: #c2c7d0;
+  --app-background-color: #1f1f1e;
+  --app-sidebar-background-color: #171716;
+  --app-color: #c8c8c6;
   --app-text-selection-color: rgba(1, 170, 255, 0.1875);
-  --app-muted-color: #7b8495;
-  --app-muted-border-color: #202632;
+  --app-muted-color: #6e6e6c;
+  --app-muted-border-color: #2f2f2d;
   --app-primary-h-dark: var(--app-primary-h-light, var(--app-primary-h-base));
   --app-primary-s-dark: var(--app-primary-s-light, var(--app-primary-s-base));
   --app-primary-l-dark: var(--app-primary-l-light, var(--app-primary-l-base));
@@ -696,20 +696,20 @@
   --app-contrast-focus: rgba(207, 213, 226, 0.25);
   --app-contrast-inverse: #000;
   --app-box-shadow:
-    0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),
-    0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),
-    0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),
-    0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),
-    0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302),
-    0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06),
-    0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
-  --app-h1-color: #f0f1f3;
-  --app-h2-color: #e0e3e7;
-  --app-h3-color: #c2c7d0;
-  --app-h4-color: #b3b9c5;
-  --app-h5-color: #a4acba;
-  --app-h6-color: #8891a4;
-  --app-mark-background-color: #014063;
+    0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
+    0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
+    0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
+    0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
+    0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
+    0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
+    0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
+  --app-h1-color: #f0f0ee;
+  --app-h2-color: #e0e0de;
+  --app-h3-color: #c8c8c6;
+  --app-h4-color: #b3b3b1;
+  --app-h5-color: #a4a4a2;
+  --app-h6-color: #888886;
+  --app-mark-background-color: #1a3a4a;
   --app-mark-color: #fff;
   --app-ins-color: #62af9a;
   --app-del-color: rgb(205.5, 126, 123);
@@ -728,39 +728,39 @@
   --badge-neutral-bg: #222831;
   --badge-neutral-color: #cbd5e1;
   --badge-neutral-border: #2f3945;
-  --app-tile-bg: rgba(20, 24, 32, 0.6);
-  --app-tile-border: rgba(255, 255, 255, 0.08);
+  --app-tile-bg: rgba(23, 23, 22, 0.6);
+  --app-tile-border: rgba(255, 255, 255, 0.06);
   --app-tile-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
-  --app-tile-icon-bg: rgba(255, 255, 255, 0.08);
-  --app-tile-icon-color: #e6ecff;
-  --app-tile-count-color: #f1f5ff;
-  --app-tile-label-color: #d1d7e3;
-  --app-tile-link-color: #98a2b3;
+  --app-tile-icon-bg: rgba(255, 255, 255, 0.06);
+  --app-tile-icon-color: #e8e8e6;
+  --app-tile-count-color: #f2f2f0;
+  --app-tile-label-color: #d4d4d2;
+  --app-tile-link-color: #9e9e9c;
   --app-blockquote-border-color: var(--app-muted-border-color);
   --app-blockquote-footer-color: var(--app-muted-color);
   --app-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --app-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --app-table-border-color: var(--app-muted-border-color);
   --app-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
-  --app-code-background-color: rgb(26, 30.5, 40.25);
-  --app-code-color: #8891a4;
+  --app-code-background-color: #2a2a28;
+  --app-code-color: #888886;
   --app-code-kbd-background-color: var(--app-color);
   --app-code-kbd-color: var(--app-background-color);
-  --app-form-element-background-color: rgb(28, 33, 43.5);
-  --app-form-element-selected-background-color: #2a3140;
-  --app-form-element-border-color: #2a3140;
+  --app-form-element-background-color: #2a2a28;
+  --app-form-element-selected-background-color: #383835;
+  --app-form-element-border-color: #383835;
   --app-border: var(--app-form-element-border-color);
-  --app-form-element-color: #e0e3e7;
-  --app-form-element-placeholder-color: #8891a4;
-  --app-form-element-active-background-color: rgb(26, 30.5, 40.25);
+  --app-form-element-color: #e0e0de;
+  --app-form-element-placeholder-color: #7a7a78;
+  --app-form-element-active-background-color: #2a2a28;
   --app-form-element-active-border-color: var(--app-primary-border);
   --app-form-element-focus-color: var(--app-primary-border);
   --app-form-element-disabled-opacity: 0.5;
-  --app-form-element-disabled-background-color: #1e2430;
-  --app-form-element-readonly-background-color: #242c3a;
-  --app-form-element-readonly-border-color: #3a4458;
-  --app-form-element-readonly-color: #d7dde8;
-  --app-form-element-readonly-focus-color: rgba(136, 145, 164, 0.35);
+  --app-form-element-disabled-background-color: #1a1a18;
+  --app-form-element-readonly-background-color: #333330;
+  --app-form-element-readonly-border-color: #4a4a48;
+  --app-form-element-readonly-color: #d7d7d5;
+  --app-form-element-readonly-focus-color: rgba(130, 130, 128, 0.35);
   --app-form-element-invalid-border-color: rgb(149.5, 74, 80);
   --app-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
   --app-form-element-invalid-focus-color: var(
@@ -799,12 +799,12 @@
   --app-action-danger-hover-border: #952d2d;
   --app-action-danger-focus-color: rgba(179, 54, 54, 0.5);
   --app-action-danger-outline-background: rgba(179, 54, 54, 0.2);
-  --app-switch-background-color: #333c4e;
+  --app-switch-background-color: #3a3a38;
   --app-switch-checked-background-color: var(--app-primary-background);
   --app-switch-color: #fff;
   --app-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  --app-range-border-color: #202632;
-  --app-range-active-border-color: #2a3140;
+  --app-range-border-color: #2f2f2d;
+  --app-range-active-border-color: #383835;
   --app-range-thumb-border-color: var(--app-background-color);
   --app-range-thumb-color: var(--app-secondary-background);
   --app-range-thumb-active-color: var(--app-primary-background);
@@ -812,19 +812,19 @@
   --app-accordion-active-summary-color: var(--app-primary-hover);
   --app-accordion-close-summary-color: var(--app-color);
   --app-accordion-open-summary-color: var(--app-muted-color);
-  --app-card-background-color: #181c25;
+  --app-card-background-color: #242422;
   --app-card-border-color: var(--app-card-background-color);
   --app-card-box-shadow: var(--app-box-shadow);
-  --app-card-sectioning-background-color: rgb(26, 30.5, 40.25);
+  --app-card-sectioning-background-color: #2a2a28;
   --app-details-card-open-summary-bg: var(--app-card-sectioning-background-color);
-  --app-dropdown-background-color: #181c25;
-  --app-dropdown-border-color: #202632;
+  --app-dropdown-background-color: #242422;
+  --app-dropdown-border-color: #2f2f2d;
   --app-dropdown-box-shadow: var(--app-box-shadow);
   --app-dropdown-color: var(--app-color);
-  --app-dropdown-hover-background-color: #202632;
+  --app-dropdown-hover-background-color: #2f2f2d;
   --app-loading-spinner-opacity: 0.5;
-  --app-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
-  --app-progress-background-color: #202632;
+  --app-modal-overlay-background-color: rgba(15, 15, 14, 0.75);
+  --app-progress-background-color: #2f2f2d;
   --app-progress-color: var(--app-primary-background);
   --app-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --app-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
diff --git a/web/css/pages/app-error-debug.css b/web/css/pages/app-error-debug.css
index 5b9d826..9221653 100644
--- a/web/css/pages/app-error-debug.css
+++ b/web/css/pages/app-error-debug.css
@@ -55,15 +55,15 @@
 /* dark mode fallback (prefers-color-scheme or data-theme) */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --app-background-color: rgb(19, 22.5, 30.5);
-    --app-color: #c2c7d0;
-    --app-muted-color: #7b8495;
-    --app-muted-border-color: #202632;
-    --app-card-background-color: #181c25;
-    --app-card-border-color: #181c25;
-    --app-card-sectioning-background-color: rgb(28, 33, 43.5);
-    --app-form-element-background-color: rgb(28, 33, 43.5);
-    --app-form-element-border-color: #2a3140;
+    --app-background-color: #1f1f1e;
+    --app-color: #c8c8c6;
+    --app-muted-color: #6e6e6c;
+    --app-muted-border-color: #2f2f2d;
+    --app-card-background-color: #242422;
+    --app-card-border-color: #242422;
+    --app-card-sectioning-background-color: #2a2a28;
+    --app-form-element-background-color: #2a2a28;
+    --app-form-element-border-color: #383835;
     --app-border: var(--app-form-element-border-color);
     --badge-danger-bg: #3a1b1b;
     --badge-danger-color: #f2a3a3;