Claude Code Orange

Claude Code Orange

A faithful recreation of the look and feel of Claude Code in the Claude mobile app, for Obsidian. Warm cream / charcoal surfaces, the signature Claude coral accent, a Styrene-style grotesque typeface, and a calm reading rhythm — in both light and dark.

What it recreates

• Color — Claude's warm neutral backgrounds (no cold grays), the coral accent (#d97757 / Crail #c15f3c) driving links, the active note marker, tags, checkboxes and highlights.
• Type — a grotesque sans for the interface and body (like Claude's Styrene B), with an optional serif reading mode (like Tiempos Text) and a clean monospace for code.
• Bold — strong text uses a heavier weight and the high-contrast heading color, the way emphasis reads in Claude.
• Links — coral, underlined with a soft offset; brighten on hover.
• Code — framed code cards with soft corners, pill-shaped inline code, and a restrained, warm syntax palette tuned to the Claude aesthetic.
• Everything else — callouts, tables, blockquotes, task lists, the file explorer, command palette, inputs and graph view all follow the same language.

Task states

Beyond the standard empty and done checkboxes, the theme styles three extra task markers so a list shows real progress at a glance. Type the character between the brackets — e.g. - [/] Draft the intro:

Works in both reading view and Live Preview, on desktop and mobile — including reading view with the Tasks plugin installed, which re-renders task items in its own markup.

At a glance

Small cues that tell you what is what without reading for it:

• Links that lead nowhere look different. A [[link]] to a note that doesn't exist yet is the same coral, but faded with a dotted underline — in reading view and Live Preview.
• Only the focused pane gets the coral tab. With several panes open, the active tab of the pane that takes your keystrokes is coral-tinted; other panes' active tabs merge with their note instead.
• Task states read as shapes, not characters (see above).
• One tempo for every state change. Hover and focus on files, tabs, buttons and properties ease in over 120 ms instead of snapping. Keyboard focus shows one coral ring everywhere.

Fonts

Claude's real typefaces (Styrene B, Tiempos Text, Galaxie Copernicus) are commercial and can't be bundled, so the theme loads close, free Google Fonts automatically:

If you own the real fonts and install them on your system, they sit at the front of every font stack and will be used automatically — no config needed.

The lookalikes load from Google Fonts over the web. This is an intentional tradeoff: the theme stays a single lightweight CSS file with no bundled font payload. The @import needs an internet connection on first load (Obsidian usually caches the files afterwards); offline, or with Google's CDN blocked, the theme still works and text falls back to the system fonts in each stack.

Until the web fonts arrive, text is set in a metric-matched local fallback (Arial / Roboto scaled to Hanken Grotesk's glyph widths, Georgia scaled to Source Serif 4's), so the swap doesn't reflow the page — no jump on first launch or on a slow connection.

Install

Manually (works today)

1. Download manifest.json and theme.css from this repo.
2. In your vault, put them in a folder named exactly Claude Code Orange inside .obsidian/themes/:

   <your-vault>/.obsidian/themes/Claude Code Orange/manifest.json
   <your-vault>/.obsidian/themes/Claude Code Orange/theme.css
   

3. In Obsidian: Settings → Appearance → Themes → Manage → select "Claude Code Orange".
4. Pick a color scheme under Settings → Appearance → Base color scheme. Both Light and Dark are individually tuned.

Automatic light/dark switching

Both schemes ship in the theme, so Obsidian can follow your device. Set Settings → Appearance → Base color scheme → "Adapt to system" and Obsidian will switch between the theme's light and dark palettes automatically with your OS / device light–dark setting — no extra configuration needed.

Options (Style Settings)

Install the community plugin Style Settings to unlock toggles under Settings → Style Settings → Claude Code Orange:

• Serif reading mode — switch note body text to the Tiempos-style serif.
• Serif headings / Monospace headings — restyle headings.
• Body font size, line height, readable line length sliders.
• Limit line length — cap note width at a readable measure even with Obsidian's own "Readable line length" off.
• Accent color pickers for light and dark mode.
• Light mode tuning — live dials for light-mode reading comfort: text darkness, text weight (variable-font aware), and background depth (deepens all cream surfaces together). Defaults reproduce the classic palette exactly.
• Dark mode tuning — the same dials for dark mode: text brightness, text weight, and background darkness (deepens all dark surfaces together).
• Loud code blocks — on (default) gives code blocks a blue frame so they stand out; off keeps them warm, in line with the coral theme.
• Highlight active line — a very light tint behind the editor row your cursor is on (on by default).

All defaults match the Claude Code look, and without the plugin every option keeps the default listed above — active-line tint on, loud code blocks on. (The preview images show code blocks with Loud code blocks turned off.)

Preview

Light and dark, side by side — inline title, coral links, warm highlights, the five task states, a framed code card, and a callout:

Releasing (maintainers)

The Obsidian directory reads GitHub Releases, not the repo — it needs a release whose tag exactly matches the version in manifest.json (no v prefix). After bumping that version, adding a matching entry to versions.json, and committing:

./release.sh                       # tags + pushes + creates the release
./release.sh --notes "What's new"  # with custom release notes
./release.sh --verify 1.5.0        # read-only: does a release have all its files?

The script reads the version from manifest.json and first runs scripts/check.sh (JSON, the versions.json entry, theme.css structure). It refuses to run on a dirty tree or a tag that already exists on another commit, attaches theme.css, manifest.json and versions.json, then verifies they are really attached and re-uploads any that are missing. If a run stops part-way, just run it again: a tag already on HEAD resumes instead of refusing. Prefer real --notes listing user-visible changes over the default line.

./tests/release.test.sh exercises all of this against a fake gh and a local bare remote — run it after changing release.sh.

License & affiliation

MIT.

Claude Code Orange is an unofficial community theme for Obsidian. Its visual style is inspired by Claude and Claude Code, which are products of Anthropic — but this project is not affiliated with, endorsed by, or supported by Anthropic. "Claude" and "Claude Code" are trademarks of Anthropic, PBC. Anthropic's commercial typefaces are not bundled; the theme uses free, redistributable Google Fonts lookalikes instead.