spacedriveapp / spacedriveapp/spacebot

[Feature] Solarized themes + follow OS light/dark preference + more light variants

Open
#585 0 comments 0 reactions 0 assignees View on GitHub

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.ts defines default | vanilla | midnight | noir | slate | nord | mocha | catpucchino
  • Of those, only vanilla is light
  • No prefers-color-scheme listener anywhere in interface/ (verified by grep)
  • Tokens come from @spacedrive/tokens@0.2.3 — its themes/ directory has dark.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

  1. Add solarized-light and solarized-dark theme 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 in interface/src/styles.css.
  2. Add 1-2 more light variants (e.g. paper, or Catppuccin latte to pair with the existing mocha).
  3. Add a "mode" selector alongside the theme picker in Settings: light | dark | system.
    • When system, watch window.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).
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.