vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

swarm-ui: respect prefers-color-scheme for a light theme default

Browse source 
colors.css shipped one fixed dark (Catppuccin Mocha) palette with no
light variant and no OS/browser-preference detection, so anyone
without a stylix-managed session (a phone browser, a future PWA
install) got the dark palette regardless of their light-mode
preference. This is an accessibility gap, not a cosmetic one - some
people need light for low-vision/contrast reasons, others need dark
for photosensitivity, the same reasoning that already gates
prefers-reduced-motion elsewhere.

Add a Catppuccin Latte row behind `@media (prefers-color-scheme:
light)`, ported through the identical base16 slot mapping (including
the existing sky-over-teal base0C substitution) so a swap between the
two rows never changes what a slot means. A stylix-generated
colors.css replaces the file wholesale with a single unconditional
:root block and has no media query in it, so a themed deployment is
unaffected either way.

Verified with headless chromium screenshots forcing both
prefers-color-scheme values against the built swarm-ui bundle - both
render with correct contrast, and the default (no forced preference)
render matches the light row.
This commit is contained in:
iris 2026-08-18 22:42:36 +02:00 • committed by mara
commit 56e7a309e8
2 changed files with 56 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

40
frontend/packages/shared/src/colors.css
View file

@ -29,3 +29,43 @@
--base0E: #cba6f7; /* magenta / mauve */
--base0F: #f5c2e7; /* extra accent — pink */
}
/* Light-mode default — Catppuccin Latte, the standard light complement
to the Mocha defaults above, ported through the identical base16
slot mapping (down to the same base0C sky-over-teal substitution) so
a swap between the two rows never changes which semantic role a slot
plays. This is a *default*, not a user preference store: it only
applies when nothing more specific has already decided the palette.
A stylix-generated colors.css (nix/host-modules/hive-c0re/theme.nix)
replaces this entire file wholesale — a fixed, unconditional `:root`
block with no media query in it at all — so a stylix-themed
deployment is naturally unaffected by, and never fights, this block.
Some people need light for low-vision/contrast reasons, others need
dark for photosensitivity, so respect the OS/browser signal by
default the same way `prefers-reduced-motion` already is elsewhere —
rather than always forcing the bundled dark palette on a client with
no stylix session of its own (e.g. a phone browser hitting swarm-ui
directly). A future per-user override takes precedence over this
media query by simply setting the vars later in the cascade (e.g.
via an inline `style` on `:root`, which always outranks a
stylesheet rule). */
@media (prefers-color-scheme: light) {
:root {
--base00: #eff1f5; /* default bg */
--base01: #e6e9ef; /* lighter bg (elevated surfaces) */
--base02: #ccd0da; /* selection / surface — borders */
--base03: #bcc0cc; /* comments / dim surface */
--base04: #acb0be; /* dark foreground */
--base05: #4c4f69; /* default foreground */
--base06: #dc8a78; /* light foreground */
--base07: #7287fd; /* lightest */
--base08: #d20f39; /* red */
--base09: #fe640b; /* orange / peach */
--base0A: #df8e1d; /* yellow */
--base0B: #40a02b; /* green */
--base0C: #04a5e5; /* cyan (our sky — note: Catppuccin's base0C is teal) */
--base0D: #1e66f5; /* blue */
--base0E: #8839ef; /* magenta / mauve */
--base0F: #ea76cb; /* extra accent — pink */
}
}