Skip to content

feat(theme): add Catppuccin Mocha and Macchiato interface themes - #214

Draft
zuhayermasud wants to merge 3 commits into
pacifio:0.3.1from
zuhayermasud:catppuccin-interface-theme
Draft

feat(theme): add Catppuccin Mocha and Macchiato interface themes#214
zuhayermasud wants to merge 3 commits into
pacifio:0.3.1from
zuhayermasud:catppuccin-interface-theme

Conversation

@zuhayermasud

Copy link
Copy Markdown
Contributor

What?

Adds Catppuccin as an interface (chrome) theme — sidebar, panels, borders, text hierarchy, and accent color for the whole app — not just editor syntax highlighting (already shipped in #213). Ships Mocha and Macchiato; Latte and Frappé are both intentionally excluded (see Why).

Why?

Latte is skipped because Atlas's interface theme system is dark-theme-only by design (see the file header in themes.ts).

Frappé is skipped for a more interesting reason: its base (#303446) is light enough that several already-shipped editor themes' comment tokens — tuned only against Atlas's near-black interface bases — drop below themes.test.ts's contrast floor when tested against it. Fixing this for the default atlas theme specifically turned out to be mathematically unworkable: atlas's comment color needs to clear AA (4.5:1) against Frappé's base and stay >1.5:1 apart in luminance from atlas's own keyword color — and those two constraints together only have solutions that either push the keyword to a washed-out near-white pastel, or push the comment above the theme's own body-text brightness. Rather than force a bad-looking compromise into the default theme everyone sees, Frappé is left out; Mocha and Macchiato don't have this problem.

How?

Registers two AtlasTheme entries in ATLAS_THEMES. Role mapping follows Catppuccin's own published style guide (Base = background pane, Crust/Mantle = secondary panes darker than base, Surface 0/1/2 = raised elements, Text/Subtext/Overlay = the text hierarchy, "On Accent" = Base, mauve as the accent — matching the already-shipped editor themes for family consistency). This deliberately crosses Atlas's own convention of every surface only ever rising above base, since Catppuccin's Crust/Mantle are explicitly darker.

Since every AtlasTheme.base feeds the cross-theme contrast suite in src/features/editor/themes/themes.test.ts, adding these two lighter bases required minimal, computed comment-color nudges in four already-shipped editor themes (atlas-mono, one-dark, monokai, tokyo-night) — the default atlas theme needed no change at all.

No other file needs to change to make these selectable: apply-atlas-theme.ts, atlas-themes-settings.tsx, and the settings store are all fully data-driven off ATLAS_THEMES.

Verification

  • vitest run — full suite, 1048 tests pass, including the cross-theme contrast suite (every editor syntax theme against every interface base, including the two new Catppuccin ones)
  • tsc --noEmit clean
  • Confirmed no hardcoded theme-id checks exist outside src/features/theme (grepped the full src tree)

Checklist

  • Targets the current dev branch (0.3.1)
  • New behaviour has a test; the existing cross-theme contrast suite automatically covers the new registry entries
  • Run the app and use the change in a window

Ports Catppuccin as app chrome (sidebar, panels, borders, text, accent),
not just editor syntax (already shipped). Latte is skipped as light
themes aren't supported; Frappé is skipped because its base is light
enough to push several already-shipped editor themes' comment tokens
below the interface contrast floor, with no fix that doesn't wash out
the default theme's keyword color.

Nudges four editor themes' comment colors (atlas-mono, one-dark,
monokai, tokyo-night) by the minimal amount needed to stay legible
against the two new, lighter interface bases — the default `atlas`
theme needed no change.
@uzayer
uzayer marked this pull request as draft August 30, 2026 16:49
zuhayermasud and others added 2 commits September 3, 2026 00:59
Replaces hardcoded #0C0C0C with the theme token so the sidebar
respects the active interface theme instead of a fixed dark color.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015XcJTS6whBTuN8thjQrREP
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant