dssoca docs
GitHub repository

Theme Builder

Pick an accent and the mono rules derive both 16-slot terminal themes — neutrals fully in the seed's hue, the six ANSI hues leaning toward it, every text slot solved for WCAG AA. Or start from a preset: the seed swatches derive a fresh mono palette, while the terminal presets (Dracula, Gruvbox, Nord, …) load the library's ready-made PRESET_THEMES palettes. Preview real dssoca components, hand-tune any slot, fix what the corrector flags, then export the palette as applyDesignConfig code or a CSS override block.

Try it on this page

slots

corrector

all checks pass every text slot clears its WCAG target on both themes.

dark

✓ fg on bg ≥ 7:1 Body text on the page background. 14.26:1
✓ brightBlack on bg ≥ 4.5:1 Faint text (comments, muted chrome) on the page background. 5.76:1
✓ accent on bg ≥ 3:1 The accent as UI chrome (borders, icons) on the page background. 12.90:1
✓ label on accent ≥ 4.5:1 Button label (bg or brightWhite, whichever reads better) on an accent fill. 12.90:1
✓ red on bg ≥ 3:1 The red slot as UI/graphic color on the page background. 7.38:1
✓ green on bg ≥ 3:1 The green slot as UI/graphic color on the page background. 8.00:1
✓ yellow on bg ≥ 3:1 The yellow slot as UI/graphic color on the page background. 7.73:1
✓ blue on bg ≥ 3:1 The blue slot as UI/graphic color on the page background. 7.98:1
✓ magenta on bg ≥ 3:1 The magenta slot as UI/graphic color on the page background. 7.35:1
✓ cyan on bg ≥ 3:1 The cyan slot as UI/graphic color on the page background. 8.11:1
✓ red ↔ green hue distance 110° apart (≥ 45° required).

light

✓ fg on bg ≥ 7:1 Body text on the page background. 13.98:1
✓ brightBlack on bg ≥ 4.5:1 Faint text (comments, muted chrome) on the page background. 6.49:1
✓ accent on bg ≥ 3:1 The accent as UI chrome (borders, icons) on the page background. 4.57:1
✓ label on accent ≥ 4.5:1 Button label (bg or brightWhite, whichever reads better) on an accent fill. 5.08:1
✓ red on bg ≥ 3:1 The red slot as UI/graphic color on the page background. 4.57:1
✓ green on bg ≥ 3:1 The green slot as UI/graphic color on the page background. 4.53:1
✓ yellow on bg ≥ 3:1 The yellow slot as UI/graphic color on the page background. 5.25:1
✓ blue on bg ≥ 3:1 The blue slot as UI/graphic color on the page background. 4.59:1
✓ magenta on bg ≥ 3:1 The magenta slot as UI/graphic color on the page background. 4.51:1
✓ cyan on bg ≥ 3:1 The cyan slot as UI/graphic color on the page background. 4.51:1
✓ red ↔ green hue distance 109° apart (≥ 45° required).
preview
dark

real components

rendered by the built palette
brand neutral positive caution critical info

export

ts 
import { applyDesignConfig, type Palette } from 'dssoca'

// Generated by the dssoca Theme Builder — accent #66ef73, tint 35%
const palette: Palette = {
  dark: {
    bg: '#100f10',
    fg: '#dae0da',
    accent: '#66ef73',
    black: '#151d15',
    red: '#e18a77',
    green: '#7ab677',
    yellow: '#b6a54e',
    blue: '#46b4d6',
    magenta: '#df879a',
    cyan: '#46bba4',
    white: '#e5e9e5',
    brightBlack: '#859085',
    brightRed: '#ffa28d',
    brightGreen: '#8bd387',
    brightYellow: '#d3bf56',
    brightBlue: '#4acff8',
    brightMagenta: '#ff9cb1',
    brightCyan: '#4ad8bd',
    brightWhite: '#fafdfa',
  },
  light: {
    bg: '#ebf2eb',
    fg: '#1f231f',
    accent: '#2b7c34',
    black: '#101910',
    red: '#a65644',
    green: '#407a3e',
    yellow: '#736300',
    blue: '#007693',
    magenta: '#a65467',
    cyan: '#007c6a',
    white: '#d4d9d4',
    brightBlack: '#4f584f',
    brightRed: '#983d2a',
    brightGreen: '#286f28',
    brightYellow: '#5d5000',
    brightBlue: '#006882',
    brightMagenta: '#963952',
    brightCyan: '#006e5d',
    brightWhite: '#fafdfa',
  },
}

applyDesignConfig({ palette })

terminal formats (Windows Terminal · Alacritty · Kitty · Xresources) are a planned follow-up.