Skip to content

Themes

bcli comes with 4 built-in themes. Every prompt, spinner, border, and icon adapts to the active theme.

Built-in Themes

Nord

A cold, arctic-inspired theme. The default.

typescript
theme: 'nord'

Dracula

A dark vampire-themed palette.

typescript
theme: 'dracula'

One Dark

Inspired by Atom's One Dark UI.

typescript
theme: 'one-dark'

Minimal

A no-frills monochrome theme. Great for CI output.

typescript
theme: 'minimal'

Custom Themes

Define your own:

typescript
import { defineConfig } from 'create-bcli-app'
import type { Theme } from 'create-bcli-app'

const myTheme: Theme = {
  name: 'Retro',
  colors: {
    primary: '#ff6b6b',
    secondary: '#ffd93d',
    success: '#6bcb77',
    error: '#ff6b6b',
    warning: '#ffd93d',
    info: '#4d96ff',
    muted: '#666',
    border: '#444',
    text: '#e0e0e0',
    highlight: '#ffd93d',
  },
  spinner: {
    frames: ['|', '/', '-', '\\'],
    interval: 100,
  },
  border: {
    style: 'rounded',
    color: '#444',
    topLeft: '╭', topRight: '╮',
    bottomLeft: '╰', bottomRight: '╯',
    horizontal: '─', vertical: '│',
  },
  icons: {
    success: '✔', error: '✘', warning: '⚠', info: 'ℹ',
    bullet: '•', arrow: '▸', pointer: '❯',
    checkbox: '☐', checkboxChecked: '☑',
  },
}

export default defineConfig({
  name: 'my-cli',
  theme: myTheme,
})

Theme Structure

typescript
interface Theme {
  name: string
  colors: {
    primary: string    // Main accent color
    secondary: string  // Secondary accent
    success: string    // Success messages
    error: string      // Error messages
    warning: string    // Warning messages
    info: string       // Info messages
    muted: string      // Dim/muted text
    border: string     // Borders
    text: string       // Foreground text
    highlight: string  // Highlighted items
  }
  spinner: {
    frames: string[]   // Animation frames
    interval: number   // MS between frames
  }
  border: { /* style + characters */ }
  icons: { /* All icons */ }
}

Released under the MIT License.