From 37c496fb55a46def1a0f544a9dbef72f919dfdab Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Tue, 12 May 2026 08:37:18 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20own=20the=20dark=20palette=20in=20theme.?=
 =?UTF-8?q?css=20=E2=80=94=20stop=20relying=20on=20common.css=20:root?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

common.css ships the neutral Remarkbox light palette for all themes. The
chaostheory dark palette and dark re-skins (.alert-*, section.well, .focused,
etc.) now live here in theme.css, which loads after common.css and overrides
:root for chaostheory pages only.
---
 .../static/theme/chaostheory/css/theme.css    | 120 ++++++++++++++++++
 1 file changed, 120 insertions(+)

diff --git a/remarkbox_chaostheory/static/theme/chaostheory/css/theme.css b/remarkbox_chaostheory/static/theme/chaostheory/css/theme.css
index aebc7da..d8d824f 100644
--- a/remarkbox_chaostheory/static/theme/chaostheory/css/theme.css
+++ b/remarkbox_chaostheory/static/theme/chaostheory/css/theme.css
@@ -1,5 +1,50 @@
 @import "/static/theme/chaostheory/css/pygments-native.css";
 
+/* Chaostheory palette — overrides the neutral defaults in /static/css/common.css.
+   common.css ships the Remarkbox light palette; this theme is dark, so we
+   redefine the :root custom properties here (theme.css loads after common.css). */
+:root {
+  --color: #dddddd;
+  --color-muted: #aaaaaa;
+
+  --color-code: #eeeeee;
+
+  --background: #1c4e63;
+  --background-faint: #184254;
+
+  --primary: #6dcff6; /* Chaostheory ice blue */
+  --primary-hover: #9de3fb;
+  --primary-inverse: #111111;
+
+  --border: #336173;
+  --border-faint: #2a5468;
+
+  --color-mod: #6dcff6;
+
+  --line-height: 1.6;
+}
+
+:root.dark-mode {
+  --color: #dddddd;
+  --color-muted: #999999;
+
+  --color-code: #eeeeee;
+
+  --background: #111111;
+  --background-faint: #0a0a0a;
+
+  --primary: #6dcff6;
+  --primary-hover: #9de3fb;
+  --primary-inverse: #111111;
+
+  --border: #1c4e63;
+  --border-faint: #184254;
+
+  --color-mod: #6dcff6;
+
+  --line-height: 1.6;
+}
+
 /* universal box model — prevents padding/border from causing overflow */
 *, *::before, *::after {
     box-sizing: border-box;
@@ -795,3 +840,78 @@ figcaption {
     border-bottom: 2px solid #184254;
     margin-bottom: -2px;
 }
+
+/*********************
+  common.css overrides — rules in /static/css/common.css use hardcoded
+  light-palette colors (not vars), so re-skin them for dark here.
+*********************/
+
+/* Bootstrap-style flash alerts (flash-alerts.j2 emits .alert-* classes) */
+.alert-danger,
+.alert-error {
+    color: #ffaaaa;
+    background-color: #4a1a1a;
+    border-color: #7a2020;
+}
+
+.alert-warning {
+    color: #ffe08a;
+    background-color: #3a2e00;
+    border-color: #6a5200;
+}
+
+.alert-info,
+.alert-notice {
+    color: #6dcff6;
+    background-color: #184254;
+    border-color: #336173;
+}
+
+.alert-success {
+    color: #aaffbb;
+    background-color: #0e3020;
+    border-color: #1a5c30;
+}
+
+/* node focus flash */
+.focused {
+    background-color: rgba(109, 207, 246, 0.15);
+}
+@keyframes fade {
+    from { background-color: rgba(109, 207, 246, 0.15); }
+    to   { background-color: rgba(109, 207, 246, 0); }
+}
+
+/* cards / wells (join-or-log-in, new-card, payment-card, well) */
+section.new-card,
+section.payment-card,
+section.join-or-log-in,
+section.well {
+    background-color: var(--background-faint);
+    border: 1px solid var(--border);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+}
+
+/* namespace switcher dropdown */
+.my-namespaces-div {
+    background-color: var(--background);
+    border: 1px solid var(--border);
+}
+
+/* help "?" circle */
+.question-mark-circle:hover:before,
+.question-mark-circle:before {
+    color: var(--color-muted);
+    background: var(--background-faint);
+    border-color: var(--border);
+}
+.question-mark-circle:hover:before {
+    color: var(--primary-inverse);
+    background: var(--primary);
+}
+
+/* load-more link */
+.load-more,
+.load-more:visited {
+    color: var(--primary);
+}