Skip to content

feat(site): add purple theme#24169

Closed
kylecarbs wants to merge 1 commit intomainfrom
purple-theme
Closed

feat(site): add purple theme#24169
kylecarbs wants to merge 1 commit intomainfrom
purple-theme

Conversation

@kylecarbs
Copy link
Copy Markdown
Member

@kylecarbs kylecarbs commented Apr 8, 2026

Add a new purple dark theme variant with violet accents.

What

New purple theme option in the appearance settings. It's a dark-mode theme that replaces sky/blue primary and active accent colors with violet throughout the UI.

Changes

  • New site/src/theme/purple/ directory — complete theme with mui.ts, roles.ts, branding.ts, experimental.ts, monaco.ts, and index.ts
  • site/src/theme/index.ts — register the purple theme
  • site/src/contexts/ThemeProvider.tsx — map purple to the dark CSS class for Tailwind compatibility, and clean up the class on unmount
  • AppearanceForm.tsx — add Purple option with a Preview badge and purple-accented theme preview

Design decisions

  • Based on the dark theme — same zinc backgrounds, same semantic roles for error/warning/success/etc.
  • Only primary (MUI) and active (roles) colors change from sky → violet
  • Branding featureStage also uses violet to match the theme accent
  • Monaco editor tokens use violet-tinted syntax highlighting
  • Theme preview card shows violet accents (status dot, table header) to visually distinguish from dark
  • Marked with <PreviewBadge /> since this is a new experimental theme

Generated with Coder Agents

Add a new purple dark theme variant with violet accents. The theme
uses the same dark base (zinc backgrounds, dark mode) but replaces
sky/blue primary and active accent colors with violet.

Changes:
- New site/src/theme/purple/ directory with all theme files
  (mui, roles, branding, experimental, monaco, index)
- Register purple theme in site/src/theme/index.ts
- ThemeProvider maps purple to 'dark' CSS class for Tailwind compat
- Add Purple option to appearance settings form with preview badge
- Theme preview shows violet accents to differentiate from dark
@kylecarbs kylecarbs changed the title feat: add purple theme feat(site): add purple theme Apr 10, 2026
@kylecarbs kylecarbs closed this Apr 10, 2026
@github-actions github-actions bot locked and limited conversation to collaborators Apr 10, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant