Dashboard UI: monochrome theme + light/dark/system toggle#53
Merged
Conversation
Aligns the local observability dashboard (tokenjam/ui/index.html) with the website design system at tokenjam.dev: - Title: "Token Juice" → "TokenJam" - Favicon: link to https://tokenjam.dev/icon.svg - Sidebar brand: old OpenClawWatch compass SVG + text → simplified TJ-jar outline + "TokenJam" wordmark - Color palette: dark-navy (#070d1a/#0f1729/#1e2d4a) → Vercel-style monochrome (#000/#0a0a0a/#1f1f1f) matching website --navy/--blue vars - Text colors: #e2e8f0/#64748b → #ededed/#a1a1a1 (matches --white/--blue-dim) - Status colors: #22c55e/#f59e0b/#ef4444 → #0ce490/#f5a623/#ee0000 (matches --green/--amber/--red on the website) - Fonts: IBM Plex Mono + Bricolage Grotesque → Geist + Geist Mono (single Google Fonts request via the variable-axis URL) - Cleaned up stale references: pip install tokenjuice → tokenjam, GitHub URL → Metabuilder-Labs/tokenjam, hardcoded #1a2236/#2e4a70 borders → var(--surface2)/var(--border) Brand accent (#3d8eff) and overall layout/components are preserved — this is a brand alignment, not a redesign. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reworks the brand-alignment commit to truly match tokenjam.dev: - Logo: full TJ-jar SVG (rect + walls + 8 inner glyphs) inlined with stroke="currentColor"/fill="currentColor" so it inherits text color (white in dark, black in light). The earlier simplified outline version didn't read as a jar at small sizes. - Brand wordmark: single-color "TokenJam" (removed the blue "Jam" highlight — website is monochrome too). - Color semantics: --accent is now the monochrome intensity color (#ededed dark / #000 light), not blue. --accent-rgb (255,255,255 / 0,0,0) drives all tinted backgrounds via rgba(var(--accent-rgb), X). --brand (#3d8eff) is now reserved for the LLM workflow-bar fill and the .badge-info tint — i.e. categorical fills only, never UI chrome. - Active sidebar link, table-row hover, selected workflow row: switched from rgba(61,142,255, X) → rgba(var(--accent-rgb), X) so they look right in both themes. - Light theme: added [data-theme="light"] palette overrides matching the website's light mode (#fff / #fafafa / #f4f4f4 / #eaeaea / #000 / #666, status colors darkened for contrast on white). - Theme toggle: button in sidebar footer cycles System (⊙) → Light (☀) → Dark (☾), persisted in localStorage['tj-theme']. System mode reads prefers-color-scheme and live-updates on OS theme change. Anti-flash inline script in <head> applies theme before paint. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
anilmurty
changed the title
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
Aligns the local observability dashboard at `tokenjam/ui/index.html` with the tokenjam.dev design system, and adds a Light/Dark/System theme toggle.
Changes
Logo & wordmark
Color system (matches website CSS vars)
`--accent` was previously `#3d8eff` (blue); it's now the monochrome intensity color so active states / focus / hover are white-on-faint-white in dark mode and black-on-faint-black in light mode. Tinted backgrounds use `rgba(var(--accent-rgb), X)` so they re-tint correctly per theme.
Typography
Theme toggle
What's not changed: layout, components, routing, all data-fetching JS. This is brand alignment + theming only.
Test plan
🤖 Generated with Claude Code