PD-013C: Dark Theme Contrast Fixes.

PlotLine/Views/Admin/ThemeAudit.cshtml

@@ -554,8 +554,8 @@
         <section class="theme-audit-section">
             <h2>Modals and Overlays</h2>
             <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#darkThemeAuditModal">Open modal</button>
-            <button class="plotline-help-icon ms-2" type="button" data-help-icon data-help-key="theme.audit" data-help-title="Help popover" data-help-summary="Sample help popover content." data-help-micro="Help trigger">?</button>
+            <button class="plotline-help-icon ms-2" type="button" data-help-icon data-help-key="theme.audit" data-help-title="Help popover" data-help-summary="Sample help popover content." data-help-micro="Help trigger" data-theme-audit-dark-popover="true">?</button>
-            <div class="popover plotline-help-popover theme-audit-popover-sample bs-popover-bottom" role="tooltip">
+            <div class="popover plotline-help-popover theme-audit-popover-sample bs-popover-bottom" role="tooltip" data-theme="dark" data-bs-theme="dark">
                 <div class="popover-arrow"></div>
                 <h3 class="popover-header">Help popover</h3>
                 <div class="popover-body">
@@ -647,3 +647,21 @@
         </section>
     </section>
 </div>
+
+@section Scripts {
+    <script>
+        (() => {
+            document.querySelectorAll("[data-theme-audit-dark-popover]").forEach((trigger) => {
+                trigger.addEventListener("shown.bs.popover", () => {
+                    const popoverId = trigger.getAttribute("aria-describedby");
+                    const popover = popoverId ? document.getElementById(popoverId) : null;
+                    if (!popover) return;
+
+                    popover.dataset.theme = "dark";
+                    popover.dataset.bsTheme = "dark";
+                    popover.classList.add("theme-audit-dark-popover");
+                });
+            });
+        })();
+    </script>
+}

PlotLine/wwwroot/css/plotline-theme.css

@@ -1249,13 +1249,59 @@ a:focus-visible {
 [data-theme="dark"] .scene-overview-card,
 [data-theme="dark"] .inspector-section,
 [data-theme="dark"] .inspector-quick-nav,
-[data-theme="dark"] .inspector-accordion-toggle {
+[data-theme="dark"] .inspector-accordion-toggle,
+[data-theme="dark"] .thread-event-item,
+[data-theme="dark"] .asset-event-item,
+[data-theme="dark"] .story-asset-event-item {
   color: var(--app-text);
   background: var(--app-surface);
   border-color: var(--app-border);
   box-shadow: var(--plotline-shadow-subtle);
 }
 
+[data-theme="dark"] .scene-inspector-root {
+  color: var(--app-text);
+  background: transparent;
+}
+
+[data-theme="dark"] .inspector-nav-links a {
+  color: #ead8c4;
+  background: rgba(231, 214, 190, 0.08);
+  border-color: rgba(231, 214, 190, 0.28);
+}
+
+[data-theme="dark"] .inspector-nav-links a:hover,
+[data-theme="dark"] .inspector-nav-links a:focus,
+[data-theme="dark"] .inspector-nav-links a.active {
+  color: #fff4e8;
+  background: rgba(241, 195, 143, 0.16);
+  border-color: rgba(241, 195, 143, 0.52);
+}
+
+[data-theme="dark"] .thread-event-item,
+[data-theme="dark"] .asset-event-item,
+[data-theme="dark"] .story-asset-event-item {
+  color: var(--app-text);
+  background: #211b17;
+  border-color: rgba(241, 195, 143, 0.24);
+}
+
+[data-theme="dark"] .thread-event-item p,
+[data-theme="dark"] .asset-event-item p,
+[data-theme="dark"] .story-asset-event-item p,
+[data-theme="dark"] .thread-event-item .muted,
+[data-theme="dark"] .asset-event-item .muted,
+[data-theme="dark"] .story-asset-event-item .muted {
+  color: var(--app-text-muted) !important;
+}
+
+[data-theme="dark"] .thread-event-marker,
+[data-theme="dark"] .asset-event-marker {
+  color: #21160f;
+  background: #d49a62;
+  border-color: rgba(255, 213, 166, 0.72);
+}
+
 [data-theme="dark"] .timeline-workspace,
 [data-theme="dark"] .timeline-shell {
   background:
@@ -1335,15 +1381,29 @@ a:focus-visible {
 [data-theme="dark"] .badge,
 [data-theme="dark"] .badge.text-bg-light,
 [data-theme="dark"] .status-pill,
+[data-theme="dark"] .archived-badge,
+[data-theme="dark"] .overview-chip,
+[data-theme="dark"] .breadcrumb-trail a,
+[data-theme="dark"] .breadcrumb-trail span,
 [data-theme="dark"] .scenario-tag,
 [data-theme="dark"] .plain-preview,
 [data-theme="dark"] .soft-count,
 [data-theme="dark"] .attachment-kind,
 [data-theme="dark"] .preset-chip,
 [data-theme="dark"] .story-bible-meta span {
-  color: var(--app-text);
+  color: #f4eadc !important;
-  background: rgba(212, 154, 98, 0.14);
+  background: rgba(212, 154, 98, 0.18) !important;
-  border-color: rgba(212, 154, 98, 0.24);
+  border-color: rgba(241, 195, 143, 0.36) !important;
+  box-shadow: none;
+}
+
+[data-theme="dark"] .badge.text-bg-light,
+[data-theme="dark"] .soft-count,
+[data-theme="dark"] .status-pill,
+[data-theme="dark"] .archived-badge {
+  color: #ead8c4 !important;
+  background: rgba(205, 187, 167, 0.16) !important;
+  border-color: rgba(231, 214, 190, 0.36) !important;
 }
 
 [data-theme="dark"] .badge.text-bg-warning,
@@ -1466,29 +1526,35 @@ a:focus-visible {
 
 [data-theme="dark"] .btn-outline-primary,
 [data-theme="dark"] .btn-outline-info {
-  --bs-btn-color: var(--app-link);
+  --bs-btn-color: #ffd5a6;
-  --bs-btn-border-color: rgba(241, 195, 143, 0.46);
+  --bs-btn-border-color: rgba(241, 195, 143, 0.58);
-  --bs-btn-hover-color: #1c120d;
+  --bs-btn-bg: rgba(241, 195, 143, 0.08);
-  --bs-btn-hover-bg: var(--app-link);
+  --bs-btn-hover-color: #fff4e8;
-  --bs-btn-hover-border-color: var(--app-link);
+  --bs-btn-hover-bg: rgba(241, 195, 143, 0.18);
-  --bs-btn-active-color: #1c120d;
+  --bs-btn-hover-border-color: rgba(255, 213, 166, 0.72);
-  --bs-btn-active-bg: var(--app-link);
+  --bs-btn-active-color: #fff4e8;
-  --bs-btn-active-border-color: var(--app-link);
+  --bs-btn-active-bg: rgba(241, 195, 143, 0.24);
+  --bs-btn-active-border-color: rgba(255, 213, 166, 0.82);
   --bs-btn-disabled-color: #9c8d7d;
   --bs-btn-disabled-border-color: rgba(231, 214, 190, 0.18);
+  background-color: var(--bs-btn-bg);
 }
 
-[data-theme="dark"] .btn-outline-secondary {
+[data-theme="dark"] .btn-outline-secondary,
-  --bs-btn-color: #d2c2b1;
+[data-theme="dark"] .btn-outline-dark,
-  --bs-btn-border-color: rgba(210, 194, 177, 0.38);
+[data-theme="dark"] .btn-outline-light {
+  --bs-btn-color: #ead8c4;
+  --bs-btn-border-color: rgba(231, 214, 190, 0.46);
+  --bs-btn-bg: rgba(231, 214, 190, 0.08);
   --bs-btn-hover-color: #fff4e8;
-  --bs-btn-hover-bg: rgba(210, 194, 177, 0.12);
+  --bs-btn-hover-bg: rgba(231, 214, 190, 0.16);
-  --bs-btn-hover-border-color: rgba(241, 220, 196, 0.56);
+  --bs-btn-hover-border-color: rgba(241, 220, 196, 0.68);
   --bs-btn-active-color: #fff4e8;
-  --bs-btn-active-bg: rgba(210, 194, 177, 0.18);
+  --bs-btn-active-bg: rgba(231, 214, 190, 0.22);
   --bs-btn-active-border-color: rgba(241, 220, 196, 0.64);
   --bs-btn-disabled-color: #8f8172;
   --bs-btn-disabled-border-color: rgba(231, 214, 190, 0.16);
+  background-color: var(--bs-btn-bg);
 }
 
 [data-theme="dark"] .btn-outline-danger {
@@ -1745,7 +1811,9 @@ a:focus-visible {
   color: #e7a09a !important;
 }
 
-[data-theme="dark"] .popover {
+[data-theme="dark"] .popover,
+.popover[data-theme="dark"],
+.popover.theme-audit-dark-popover {
   --bs-popover-bg: var(--app-surface-alt);
   --bs-popover-border-color: rgba(231, 214, 190, 0.18);
   --bs-popover-header-bg: rgba(241, 195, 143, 0.08);
@@ -1755,43 +1823,71 @@ a:focus-visible {
   box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
 }
 
-[data-theme="dark"] .popover .popover-arrow::before {
+[data-theme="dark"] .popover .popover-arrow::before,
+.popover[data-theme="dark"] .popover-arrow::before,
+.popover.theme-audit-dark-popover .popover-arrow::before {
   border-color: var(--bs-popover-border-color);
 }
 
 [data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
-[data-theme="dark"] .bs-popover-top > .popover-arrow::after {
+[data-theme="dark"] .bs-popover-top > .popover-arrow::after,
+.popover[data-theme="dark"].bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
+.popover[data-theme="dark"].bs-popover-top > .popover-arrow::after,
+.popover.theme-audit-dark-popover.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
+.popover.theme-audit-dark-popover.bs-popover-top > .popover-arrow::after {
   border-top-color: var(--bs-popover-bg);
 }
 
 [data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
-[data-theme="dark"] .bs-popover-end > .popover-arrow::after {
+[data-theme="dark"] .bs-popover-end > .popover-arrow::after,
+.popover[data-theme="dark"].bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
+.popover[data-theme="dark"].bs-popover-end > .popover-arrow::after,
+.popover.theme-audit-dark-popover.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
+.popover.theme-audit-dark-popover.bs-popover-end > .popover-arrow::after {
   border-right-color: var(--bs-popover-bg);
 }
 
 [data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
-[data-theme="dark"] .bs-popover-bottom > .popover-arrow::after {
+[data-theme="dark"] .bs-popover-bottom > .popover-arrow::after,
+.popover[data-theme="dark"].bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
+.popover[data-theme="dark"].bs-popover-bottom > .popover-arrow::after,
+.popover.theme-audit-dark-popover.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
+.popover.theme-audit-dark-popover.bs-popover-bottom > .popover-arrow::after {
   border-bottom-color: var(--bs-popover-bg);
 }
 
 [data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
-[data-theme="dark"] .bs-popover-start > .popover-arrow::after {
+[data-theme="dark"] .bs-popover-start > .popover-arrow::after,
+.popover[data-theme="dark"].bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
+.popover[data-theme="dark"].bs-popover-start > .popover-arrow::after,
+.popover.theme-audit-dark-popover.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
+.popover.theme-audit-dark-popover.bs-popover-start > .popover-arrow::after {
   border-left-color: var(--bs-popover-bg);
 }
 
-[data-theme="dark"] .plotline-help-popover .popover-header {
+[data-theme="dark"] .plotline-help-popover .popover-header,
+.popover[data-theme="dark"] .popover-header,
+.popover.theme-audit-dark-popover .popover-header {
   color: #fff0df;
   background: rgba(241, 195, 143, 0.08);
   border-bottom-color: rgba(231, 214, 190, 0.16);
 }
 
 [data-theme="dark"] .plotline-help-more,
-[data-theme="dark"] .popover a {
+.popover[data-theme="dark"] .plotline-help-more,
+.popover.theme-audit-dark-popover .plotline-help-more,
+[data-theme="dark"] .popover a,
+.popover[data-theme="dark"] a,
+.popover.theme-audit-dark-popover a {
   color: var(--app-link);
 }
 
 [data-theme="dark"] .plotline-help-more:hover,
-[data-theme="dark"] .popover a:hover {
+.popover[data-theme="dark"] .plotline-help-more:hover,
+.popover.theme-audit-dark-popover .plotline-help-more:hover,
+[data-theme="dark"] .popover a:hover,
+.popover[data-theme="dark"] a:hover,
+.popover.theme-audit-dark-popover a:hover {
   color: #ffd5a6;
 }