yonlu/yellowjacket
1
1
Fork 0
Code Issues 55 Pull Requests 6 Actions Packages Projects Releases 12 Wiki Activity

Add prebuilt colour themes, including a pure-black OLED theme #47

New Issue
Open
opened 2026-08-18 05:58:15 +00:00 by logan · 0 comments
logan commented 2026-08-18 05:58:15 +00:00
Collaborator
Copy Link
Copy Source

Report

A couple of prebuilt themes to choose from, one of them a pure-dark OLED theme. Keep the yellow accent across them.

Findings

  • The ramps are data: frontend/src/store/theme-store.ts's SHADE_PALETTES, applied to :root at runtime. (tokens.css.ts holds only the type scale and icon sizes; the var(--yj-…, #fallback) at every call site is dead in practice.)
  • Contrast is computed from that table by theme-contrast.test.ts, so a new palette is checked automatically — every text colour must clear 4.5:1 against every surface it can sit on. A pure-black ramp will be the hardest case, and note that bgOverlay is deliberately not a text surface on the dark ramp.
  • Fills are fixed across themes (--yj-error, --yj-success) and carry a computed foreground (readableOn(), accentTextOn()), so the yellow accent stays legible without per-theme work.
  • make ui-visual cannot see any of this — the component tier renders the fallbacks, because the theme only reaches :root in the real app.

Direction

Add palettes to SHADE_PALETTES (OLED pure black, plus at least one more — a warm light and/or a mid grey), a theme picker in Settings, and let the contrast test do the checking. Verify the OLED ramp on a real screen for tertiary/secondary text, which is where a pure-black surface bites.

**Report** A couple of prebuilt themes to choose from, one of them a pure-dark OLED theme. Keep the yellow accent across them. **Findings** - The ramps are data: `frontend/src/store/theme-store.ts`'s `SHADE_PALETTES`, applied to `:root` at runtime. (`tokens.css.ts` holds only the type scale and icon sizes; the `var(--yj-…, #fallback)` at every call site is dead in practice.) - Contrast is computed from that table by `theme-contrast.test.ts`, so a new palette is checked automatically — every text colour must clear 4.5:1 against every surface it can sit on. A pure-black ramp will be the hardest case, and note that `bgOverlay` is deliberately *not* a text surface on the dark ramp. - Fills are fixed across themes (`--yj-error`, `--yj-success`) and carry a **computed** foreground (`readableOn()`, `accentTextOn()`), so the yellow accent stays legible without per-theme work. - `make ui-visual` cannot see any of this — the component tier renders the fallbacks, because the theme only reaches `:root` in the real app. **Direction** Add palettes to `SHADE_PALETTES` (OLED pure black, plus at least one more — a warm light and/or a mid grey), a theme picker in Settings, and let the contrast test do the checking. Verify the OLED ramp on a real screen for tertiary/secondary text, which is where a pure-black surface bites.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Area/Design
Area/Downloads
Area/Explore
Area/Library-UI
Area/Metadata
Area/Packaging
Area/Player
Area/Queue
Area/Settings
Area/Shell-Nav
Compat/Breaking
Breaking change that won't be backward compatible
 Kind/Bug
Something is not working
 Kind/Documentation
Documentation changes
 Kind/Enhancement
Improve existing functionality
 Kind/Feature
New functionality
 Kind/Security
This is security issue
 Kind/Testing
Issue or pull request related to testing
 Platform/Android
Platform/Desktop
Priority
Critical
1
The priority is critical
Priority
High
2
The priority is high
Priority
Medium
3
The priority is medium
Priority
Low
4
The priority is low
Reviewed
Confirmed
1
Issue has been confirmed
Reviewed
Duplicate
2
This issue or pull request already exists
Reviewed
Invalid
3
Invalid issue
Reviewed
Won't Fix
3
This issue won't be fixed
Status
Blocked
1
Something is blocking this issue or pull request
Status
Need More Info
2
Feedback is required to reproduce issue or to continue work
Status
Abandoned
3
Somebody has started to work on this but abandoned work
Status
In Progress
Somebody is actively working on this right now
No labels Area/Design Kind/Feature Platform/Android Platform/Desktop
Priority
Low
4
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
logan yonlu
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: yonlu/yellowjacket#47