From 5b189fa9bbc57f2b759a1ccd8cc5694f9bf25ff8 Mon Sep 17 00:00:00 2001
From: Nick Beckley <nick@spotorno.co.uk>
Date: Wed, 3 Jun 2026 11:55:59 +0100
Subject: [PATCH] Dark theme changes

---
 PlotLine/wwwroot/css/plotline-theme.css | 125 ++++++++++++++++++++++++
 1 file changed, 125 insertions(+)

diff --git a/PlotLine/wwwroot/css/plotline-theme.css b/PlotLine/wwwroot/css/plotline-theme.css
index 8f76190..72a7172 100644
--- a/PlotLine/wwwroot/css/plotline-theme.css
+++ b/PlotLine/wwwroot/css/plotline-theme.css
@@ -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;