Skip to content
Cynosure Cynosure

Terminal Theme Recipe

A walkthrough of Cynosure's built-in terminal dark theme and how to use it as a reference for authoring your own dark palette.

Terminal theme recipe

Section titled “Terminal theme recipe”

Cynosure ships a dark “terminal” theme inspired by GitHub Dark / JetBrains Mono aesthetics. It’s useful as a reference for authoring your own dark palette.

Enable it

Section titled “Enable it”
import '@arshad-shah/cynosure-themes/terminal';

Then add 'terminal' to your ThemeProvider allowed themes:

<ThemeProvider themes={['light', 'dark', 'terminal']} defaultTheme="terminal">
  {children}
</ThemeProvider>

What’s in it

Section titled “What’s in it”
  • Background: #0d0f14 with #161b22 for elevated surfaces.
  • Foreground: #e6edf3 default, #8b949e muted.
  • Accent: #388bfd across solid / hover / soft / focus families.
  • Body font: JetBrains Mono with a monospace fallback stack.
  • Feedback tokens (success / danger / warning) darkened enough to hit 3:1 contrast with white text — verified by the contrast audit.

Authoring your own dark palette

Section titled “Authoring your own dark palette”
  1. Start by copying packages/themes/src/terminal/index.css.
  2. Change the primitive values.
  3. Run pnpm audit:contrast to validate the pairs.
  4. Document any intentional contrast exceptions in your own docs.

Why monospace?

Section titled “Why monospace?”

Not mandatory — Cynosure only uses --cynosure-font-body-family and --cynosure-font-mono-family. The terminal theme rebinds the body family to a monospace stack because that’s the “feel” it’s going for. Your theme can rebind to anything.