Dark theme changes

This commit is contained in:
Nick Beckley 2026-06-03 11:55:59 +01:00
parent 8f860f6124
commit 5b189fa9bb

View File

@ -1315,6 +1315,131 @@ a:focus-visible {
--bs-nav-tabs-link-active-border-color: var(--app-border);
}
[data-theme="dark"] .context-header {
color: var(--app-text);
background: rgba(35, 29, 25, 0.94);
border-color: rgba(241, 195, 143, 0.2);
}
[data-theme="dark"] .context-header .eyebrow {
color: #dfc6aa;
}
[data-theme="dark"] .context-title strong,
[data-theme="dark"] .context-title strong span {
color: #fff0df;
}
[data-theme="dark"] .context-nav a {
color: #f1dcc4;
background: rgba(241, 195, 143, 0.1);
border-color: rgba(241, 195, 143, 0.28);
}
[data-theme="dark"] .context-nav a:hover,
[data-theme="dark"] .context-nav a:focus {
color: #21160f;
background: #f1c38f;
border-color: #ffd5a6;
}
[data-theme="dark"] .timeline-filter,
[data-theme="dark"] .workspace-heading .button-row,
[data-theme="dark"] .timeline-control-panel {
color: var(--app-text);
}
[data-theme="dark"] .timeline-filter .form-select,
[data-theme="dark"] .timeline-control-panel .form-control,
[data-theme="dark"] .timeline-control-panel .form-select,
[data-theme="dark"] .timeline-control-select .form-select {
color: #fff0df;
background-color: #251d18;
border-color: rgba(241, 195, 143, 0.3);
}
[data-theme="dark"] .timeline-control-select,
[data-theme="dark"] .timeline-control-panel .form-label,
[data-theme="dark"] .timeline-filter-checks,
[data-theme="dark"] .timeline-visibility-panel label,
[data-theme="dark"] .timeline-preset-panel,
[data-theme="dark"] .preset-chip,
[data-theme="dark"] .metric-shape-intro,
[data-theme="dark"] .metric-raw-details summary {
color: #dfc6aa;
}
[data-theme="dark"] .timeline-filter-drawer summary,
[data-theme="dark"] .timeline-control-group summary,
[data-theme="dark"] .timeline-drag-palette summary {
color: #ffe2bd;
background: rgba(241, 195, 143, 0.1);
}
[data-theme="dark"] .timeline-filter-drawer[open] summary,
[data-theme="dark"] .timeline-control-group[open] summary,
[data-theme="dark"] .timeline-drag-palette[open] summary {
color: #fff4e8;
background: rgba(241, 195, 143, 0.16);
}
[data-theme="dark"] .timeline-filter-drawer summary::after,
[data-theme="dark"] .timeline-control-group summary::after,
[data-theme="dark"] .timeline-drag-palette summary::after {
color: #f1c38f;
}
[data-theme="dark"] .timeline-visibility-panel label,
[data-theme="dark"] .preset-chip {
background: rgba(241, 195, 143, 0.1);
border-color: rgba(241, 195, 143, 0.24);
}
[data-theme="dark"] .timeline-visibility-panel label:has(input:checked),
[data-theme="dark"] .preset-chip:hover {
color: #fff0df;
background: rgba(241, 195, 143, 0.18);
border-color: rgba(241, 195, 143, 0.38);
}
[data-theme="dark"] .metric-toggle-pill {
color: #f1dcc4;
background: rgba(241, 195, 143, 0.1);
border-color: rgba(241, 195, 143, 0.24);
}
[data-theme="dark"] .metric-toggle-pill::before {
border: 1px solid rgba(255, 244, 232, 0.7);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .metric-toggle-pill:has(input:checked) {
color: #fff4e8;
background: rgba(241, 195, 143, 0.18);
border-color: rgba(241, 195, 143, 0.42);
}
[data-theme="dark"] .metric-toggle-pill:hover,
[data-theme="dark"] .metric-toggle-pill:focus-within {
color: #ffffff;
border-color: rgba(255, 213, 166, 0.58);
}
[data-theme="dark"] .character-marker,
[data-theme="dark"] .character-appearance-pill {
color: #24160d;
background: #ffdca6;
border-color: #fff0c9;
box-shadow: 0 0 0 1px rgba(36, 22, 13, 0.32), 0 4px 10px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .character-marker:hover,
[data-theme="dark"] .character-appearance-pill:hover {
color: #160d07;
background: #fff0c9;
border-color: #fff8df;
}
[data-theme="dark"] .alert-info {
--bs-alert-color: #cceaf0;
--bs-alert-bg: #17343a;