spacedriveapp / spacedriveapp/spacebot
[Feature] Solarized themes + follow OS light/dark preference + more light variants
Nobody has claimed this yet.
- Dominant language
- Rust
- Stars
- 2.4k
- Forks
- 367
- PR merge metrics
- No merged PRs in 30d
Description
Summary
The dashboard supports seven themes but only one is light (vanilla), and theme selection ignores the OS prefers-color-scheme. Users on systems that auto-switch between light and dark mode can't have the dashboard follow along, and a popular palette (Solarized) is missing entirely.
Current state
interface/src/hooks/useTheme.tsdefinesdefault | vanilla | midnight | noir | slate | nord | mocha | catpucchino- Of those, only
vanillais light - No
prefers-color-schemelistener anywhere ininterface/(verified by grep) - Tokens come from
@spacedrive/tokens@0.2.3— itsthemes/directory hasdark.css, light.css, midnight.css, mocha.css, noir.css, nord.css, slate.css(no Solarized) - Theme is persisted under
localStorage["spacebot-theme"]as a single id
Proposed change
- Add
solarized-lightandsolarized-darktheme tokens. Either upstream in@spacedrive/tokens(preferred — keeps the same tokenization model the rest of the dashboard uses) or as a local override stylesheet imported ininterface/src/styles.css. - Add 1-2 more light variants (e.g.
paper, or Catppuccinlatteto pair with the existingmocha). - Add a "mode" selector alongside the theme picker in Settings:
light | dark | system.- When
system, watchwindow.matchMedia("(prefers-color-scheme: dark)")and swap between a chosen light theme and a chosen dark theme. - Persist mode + per-mode theme choices separately (e.g.
spacebot-theme-mode,spacebot-theme-light,spacebot-theme-dark).
- When
- Settings UI: when mode is
system, render two pickers ("Light theme" + "Dark theme") instead of one.
Out of scope
- Custom user-authored themes (separate issue)
- Per-component theme overrides
Open questions
- Is the maintainer happy to take Solarized as a local override here, or should the addition go upstream to
@spacedrive/tokens? Upstream is cleaner long-term but slower to land.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with interface/src/hooks/useTheme.ts to understand the existing theme IDs and persistence, then inspect interface/src/styles.css and the Settings theme picker. Resolve whether Solarized belongs in @spacedrive/tokens or a local stylesheet before implementing mode and per-mode theme choices. Done means light, dark, and system modes work, system mode responds to prefers-color-scheme, and the selected choices persist.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100