feat(toolpath-desktop): soft-graphite dark mode + theme toggle#32
Merged
Conversation
Implements the Pathbase "Soft graphite" dark theme from the design-system handoff bundle, wired behind a light/dark toggle in the tabs bar. - styles.css: :root[data-theme="dark"] block — graphite paper, warm-cream ink, muted territory hues. Promoted two hardcoded .pg-card hexes to new vars so they flip with the theme. Dark-mode tweaks so the window runs edge-to-edge (no lighter outer frame) and the active tab sits a shade below paper. - app.svelte: theme toggle (◐/◑) at the end of the tabs bar; persists to localStorage.toolpath.theme, falls back to prefers-color-scheme, and syncs to <html data-theme>.
|
🔍 Preview deployed: https://75c96e64.toolpath.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a first-class dark theme to
toolpath-desktop, following the Pathbase "Soft graphite" palette from the Claude Design handoff bundle. A◐ / ◑toggle lives at the end of the primary tabs bar.What changed
styles.css— new:root[data-theme="dark"]block with the graphite paper stock, warm-cream ink, and muted water/forest/road/contour hues. Two previously hardcoded off-white backgrounds on.pg-card--deadand.pg-card__togglewere promoted to theme-aware vars (--pg-card-dead-bg,--pg-card-toggle-bg). Added.theme-togglestyles and a dark-mode filter for the contour backdrop so it still reads on the darker ground.app.svelte— toggle button at the end of the tabs bar. Theme reads fromlocalStorage['toolpath.theme'], falls back toprefers-color-scheme, and syncs to<html data-theme>via$effect..windowborder goes transparent, active tab sits a shade below paper so it reads as pressed-in.Light mode is unchanged — all dark-mode rules are scoped under
[data-theme="dark"].Test plan
bun run check— 0 errors (4 pre-existing warnings in BrowseClaude/BrowsePi, unrelated)bun run build— Vite production build succeeds◐ / ◑glyph matches the current state on first paint (no light-mode flash)