Here's a CSS that supports a dark theme:
@import "./syntax/srcery.css";
:root {
--primary-color: #e32424;
--secondary-color: #3f0000;
--tertiary-color: #24a3fb;
--link-color: #184e75;
--background-color: #FFDDDF;
--background-gradient: #EFCDCF;
--border-color: black;
--edit-color: black;
--edit-background-color: white;
--contrast-color: #ffbec2;
--sfw-indicator-color: navy;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #e32424;
--secondary-color: #ffbec2;
--tertiary-color: #93d2ff;
--link-color: #24a3fb;
--background-color: #200000;
--background-gradient: #100000;
--border-color: white;
--edit-color: white;
--edit-background-color: black;
--contrast-color: #200505;
--sfw-indicator-color: navy;
}
#postingForm th, #quick-reply th, fieldset legend {
background-color: var(--sfw-indicator-color);
}
}
:root {
--text-color: var(--secondary-color);
--menu-color: var(--background-color);
--background-highlight-color: var(--tertiary-color);
--horizon-sep-color: var(--border-color);
--marked-color: var(--background-color);
--marked-border-color: var(--secondary-color);
--board-title-color: inherit;
--index-text-color: var(--text-color);
[Expand Post]
--link-hover-color: var(--tertiary-color);
--navbar-text-color: var(--text-color);
--table-every-other-color: var(--contrast-color);
--subject-color: var(--tertiary-color);
--thread-navbar-background: var(--background-color);
--thread-navbar-color: var(--primary-color);
--mascot-url-0: url(/.media/d038414df59d0915dd8f80d74c65b3662f38bfd4c82585bae8895c0b7aee2434.png);
--mascot-url-1: url(/.media/d038414df59d0915dd8f80d74c65b3662f38bfd4c82585bae8895c0b7aee2434.png);
--mascot-url-2: url(/.media/d038414df59d0915dd8f80d74c65b3662f38bfd4c82585bae8895c0b7aee2434.png);
--mascot-url-3: url(/.media/d038414df59d0915dd8f80d74c65b3662f38bfd4c82585bae8895c0b7aee2434.png);
--mascot-url-4: url(/.media/d038414df59d0915dd8f80d74c65b3662f38bfd4c82585bae8895c0b7aee2434.png);
}
.innerUtility.top {
background-color: #00000000;
}
#newPostFieldset {
border: 0.1ch solid var(--border-color);
}
#newPostFieldset legend {
width: 100%;
margin-left: -1px;
padding: 0.5ch 0 ;
}
.quoteTooltip {
text-shadow: 0 0 0.5em var(--contrast-color), 0 0 0.5em var(--contrast-color), 0 0 0.5em var(--contrast-color), 0 0 0.5em var(--contrast-color), 0 0 1em var(--secondary-color), 0 0 1em var(--secondary-color), 0 0 1em var(--secondary-color);
}
.quoteTooltip > .innerPost, .markedPost {
box-shadow: -2.5em 0ch var(--secondary-color) ;
text-shadow: initial;
}
#quick-reply, .quoteTooltip > .innerPost {
box-shadow: 0ch 0ch 1ch var(--secondary-color);
text-shadow: initial;
}
.innerPost {
border-radius: 16px;
border-width: 0.1ch;
z-index: 1;
}
.quoteLink {
color: var(--link-color);
}
.quoteLink:hover {
color: var(--link-hover-color);
}
code {
background-color: rgba(0,0,0,0.15);
}
.modalTableBody input[type="text"], .modalTableBody select, #themeSelector, #modalAnswer, #cssInput, #jsInput,
#postingForm input[type="text"], #postingForm textarea, #quick-reply input[type="text"], #quick-reply textarea {
color: var(--edit-color);
background-color: var(--edit-background-color);
}
html, *, hover, #postingForm th {
cursor: url(/.media/683f39aa552750a5e37d1701ad288b783b7f3754b77c1c29a296e3a61af65ead.png), default;
}
a, input[type="submit"], input[type="button"], button, .glowOnHover {
cursor: url(/.media/2299bc3f75099354cd664deb58c4f33585b28733094d79d65934658fea26c502.png), progress !important;
}
img, a.imgLink, .hideFileButton {
cursor: url(/.media/273b5f23bf010214b2a3329d072900f24969e1bb86ec8b614d9a3c88d96ba9c8.png), progress !important;
}
#dropzone, #dropzoneQr {
cursor: url(/.media/2ca1f9aa24357f67569e4b61ae2a05510d7ac8ff2d3e528799c5b081cf7deecb.png), progress !important;
font-size: 14px;
}
#quick-reply .close-btn:hover {
color: var(--primary-color);
}
footer {
/* Add some space at the bottom of the page so that the mascot doesn't obscure anything there */
min-height: calc(25vmin - 0.5em - 1.5em - 0.5em - 0.85em - 1em - 1em);
max-width: calc(100% - 25vmin);
}
#navTopBoardsSpan a:last-of-type + span::after {
position: fixed;
content: "";
z-index: 2;
margin: -100% -100%;
padding: 100% 100%;
pointer-events: none;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
background-size: 25vmin;
background-image: var(--mascot-url-0);
}