hq/bpist-squalk-forum
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enable dark mode

Browse source
This commit is contained in:
dtonon 2026-05-27 22:13:48 +01:00
parent b3e6533748
commit dcd3857c80
26 changed files with 410 additions and 220 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/routes/layout.css
View file

@ -2,6 +2,10 @@
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
/* Class-based dark mode: the FOUC script in app.html and the theme store add
`dark` to <html> so `dark:` utilities apply without relying on prefers-color-scheme. */
@custom-variant dark (&:where(.dark, .dark *));
html {
font-size: 16px;
}
@ -9,6 +13,9 @@ html {
body {
background-color: var(--color-neutral-100);
}
:where(.dark) body {
background-color: var(--color-neutral-800);
}
.no-scrollbar {
scrollbar-width: none;
@ -17,6 +24,20 @@ body {
display: none;
}
/* Form inputs in dark mode — the forms plugin defaults to a white background,
which would punch holes through panels. Override at the element level so we
don't have to add `dark:bg-neutral-800` to every <input>/<textarea>. */
:where(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
:where(.dark) textarea,
:where(.dark) select {
background-color: var(--color-neutral-800);
color: var(--color-neutral-100);
}
:where(.dark) input::placeholder,
:where(.dark) textarea::placeholder {
color: var(--color-neutral-500);
}
/* Tighter heading rhythm for all rendered (prose) content. Overrides the
typography plugin's em-based heading margins; the first block stays flush. */
.prose :is(h1, h2, h3, h4, h5, h6) {
@ -35,6 +56,21 @@ body {
margin-top: 0;
}
/* Prose headings/strong/links default to dark text colors; flip them in dark mode. */
:where(.dark) .prose :is(h1, h2, h3, h4, h5, h6, strong, th) {
color: var(--color-neutral-100);
}
:where(.dark) .prose :is(h1) {
color: var(--color-brand);
}
:where(.dark) .prose :is(blockquote) {
color: var(--color-neutral-400);
border-left-color: var(--color-neutral-700);
}
:where(.dark) .prose :is(hr, thead, tbody tr) {
border-color: var(--color-neutral-700);
}
@theme {
--color-brand: #e32a6d;
--color-brand-hover: #c4205a;