feat(theme): named theme system v1 (11 themes)#58
Closed
nakamoto-hiru wants to merge 24 commits intoOpen-ACP:developfrom
Closed
feat(theme): named theme system v1 (11 themes)#58nakamoto-hiru wants to merge 24 commits intoOpen-ACP:developfrom
nakamoto-hiru wants to merge 24 commits intoOpen-ACP:developfrom
Conversation
…cy hint migration
Contributor
Author
|
Mistakenly opened against upstream; will re-open on the fork (lngdao/OpenACP-App). |
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
Replaces the 3-option theme picker (
light/dark/system) with an OpenCode-style named theme system. Ships v1 with 11 curated themes; architecture scales to many more without code changes.Architecture
Two HTML attributes drive styling:
data-theme="<id>"— selects the palette CSS block fromsrc/openacp/styles/themes/<id>.cssdata-mode="light" | "dark"— derived from the theme's mode; drives Tailwinddark:variant and shared avatar-token fallbacksEach theme overrides ~55 tokens (Background + Foreground + Border + Semantic + Syntax + Markdown). Avatar tokens are shared per
data-mode— agent/user colors stay consistent across theme changes. Shadows and shadcn aliases live in:root.Themes shipped
UX
Settings → Appearance now has a single grouped
Select(Default / Dark / Light) replacing the Light/Dark/System Tabs. Legacy store values ("light"/"dark"/"system") migrate lazily + silently to validThemeIds; legacytheme-hintlocalStorage key migrates totheme-idin the pre-paint script.Dev-mode safety net
verifyThemeRegistry()runs at startup in DEV builds — warns if a theme is missing its CSS block or if the pre-paintMODESlookup drifts from the registry.Out of scope (documented as follow-up)
terminal-renderer.tsxhardcoded colors)composer.tsx/review-panel.tsxFiles
src/openacp/lib/themes.ts(registry + helpers + migration, 15 unit tests), 11 per-theme CSS files undersrc/openacp/styles/themes/settings-store.ts,theme.css,index.css,index.html,settings-appearance.tsx,app.tsx,ds-demo/app.tsx,docs/design/DESIGN.mdTest plan
theme="light"→ reload → console shows[theme] migrated "light" → "default-light"/ds-demo.html): light/dark toggle still works via newdata-theme+data-modeattrspnpm buildclean,pnpm test→ 31/31 passBranch commits tell a story: spec + plan docs → registry + foundation (Tasks 1–8) → 9 themes (Tasks 9–17) → polish + docs (Tasks 18–19) → review fixes (ds-demo regression + contrast tweaks for AMOLED/GitHub/Nord).