feat: additional theme variants — solarized dark/light, high-contrast, colorblind #41

New issue

Open

opened 2026-04-17 02:59:49 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-04-17 02:59:49 -07:00

Owner

Background

Snipe currently supports dark (default), light, system (OS preference), and Snipe Mode easter egg. Architecture is already in place — each variant is a [data-theme="<name>"] block in theme.css redefining the same CSS token set, plus a new option in the ThemeMode union in useTheme.ts.

Planned variants

solarized-dark — Ethan Schoonover Solarized dark palette, amber accent unchanged
solarized-light — Solarized light palette, amber accent unchanged
high-contrast — WCAG AAA minimum contrast ratios, no mid-grey text
colorblind — Deuteranopia-safe trust signal colours: blue/orange instead of green/red (the green/amber/red trust score palette is inaccessible for ~8% of male users)

Notes

All variants must stick to Snipe's amber accent identity
Colorblind mode needs the most care: --trust-high, --trust-mid, --trust-low must all be distinguishable for deuteranopia and protanopia
Persist choice in localStorage via existing snipe:theme key
Expose in Settings view alongside existing dark/light/system toggle
Theme token comment block already added to theme.css as a placeholder roadmap

## Background Snipe currently supports dark (default), light, system (OS preference), and Snipe Mode easter egg. Architecture is already in place — each variant is a `[data-theme="<name>"]` block in `theme.css` redefining the same CSS token set, plus a new option in the `ThemeMode` union in `useTheme.ts`. ## Planned variants - **solarized-dark** — Ethan Schoonover Solarized dark palette, amber accent unchanged - **solarized-light** — Solarized light palette, amber accent unchanged - **high-contrast** — WCAG AAA minimum contrast ratios, no mid-grey text - **colorblind** — Deuteranopia-safe trust signal colours: blue/orange instead of green/red (the green/amber/red trust score palette is inaccessible for ~8% of male users) ## Notes - All variants must stick to Snipe's amber accent identity - Colorblind mode needs the most care: `--trust-high`, `--trust-mid`, `--trust-low` must all be distinguishable for deuteranopia and protanopia - Persist choice in `localStorage` via existing `snipe:theme` key - Expose in Settings view alongside existing dark/light/system toggle - Theme token comment block already added to `theme.css` as a placeholder roadmap