tbh/breadcrumb-the-shire
1
0
Fork 0
forked from fa/breadcrumb-the-shire
Code Pull Requests Activity

refactor(css): overhaul dark mode palette to deep neutral tones

Browse Source 
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.
This commit is contained in:
Felix Schneider
2026-04-24 18:54:39 +02:00
parent da7e7c593e
commit 5e705f780d
2 changed files with 107 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
web/css/base/variables.base.css
View File

@@ -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");

18
web/css/pages/app-error-debug.css
View File

@@ -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;