fix: own the dark palette in theme.css — stop relying on common.css :root

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.
This commit is contained in:
russell@unturf.com 2026-05-12 08:37:18 -04:00
parent fed3eea3ab
commit 37c496fb55
No known key found for this signature in database

View file

@ -1,5 +1,50 @@
@import "/static/theme/chaostheory/css/pygments-native.css"; @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 */ /* universal box model — prevents padding/border from causing overflow */
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
@ -795,3 +840,78 @@ figcaption {
border-bottom: 2px solid #184254; border-bottom: 2px solid #184254;
margin-bottom: -2px; 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);
}