Skip to content

Repository files navigation

warp-loom

WCAG-first Warp terminal theme generator. Weave readable themes with confidence.

Live demo →

Screenshots

Gallery — browse 123 official Warp themes with WCAG status at a glance

Gallery view: 123 official Warp themes as cards, each showing a mini terminal preview and WCAG verdict badges (FAIL / AA / AAA). Filter buttons across the top let you narrow to AAA only, AA only, or themes with FAIL.

Editor — diagnose, auto-fix, preview, download

Editor view: left panel has manual color pickers (background / foreground / accent / cursor) and image/YAML import; right panel previews the active theme as a mock terminal, with a yellow banner flagging that some pairs don't pass WCAG and Auto-fix to AA / AAA buttons.

Why

Warp's built-in image-to-theme and many popular themes (Solarized Light, Tokyo Night, etc.) ship colors that fall below WCAG AA contrast for dim secondary text. Claude Code's file preview, line numbers, and other ANSI bright_black output become hard to read.

This tool:

  • Diagnoses any Warp theme against WCAG 2.2 §1.4.3 (sRGB-linearized contrast)
  • Fixes non-compliant themes automatically via OKLab lightness shifting
  • Generates new themes from manual colors or uploaded images
  • Exports clean Warp YAML with embedded contrast tables

Features

  • Gallery — browse 100+ official Warp themes with WCAG status badges
  • Manual — color picker with live WCAG validation
  • Image — k-means palette extraction + smart ANSI assignment
  • Import — paste YAML or fetch a GitHub URL
  • Auto-fix — push failing colors to AA or AAA in OKLab space
  • Light + dark — auto-derive dark variant from light via OKLab lightness flip
  • Download — Warp YAML with WCAG contrast table comments embedded

How it works

Pure static SPA, no backend. Build-time script pulls warpdotdev/themes via git submodule and pre-computes WCAG reports for the gallery. Runtime is 100% client-side (Vite + Svelte 5 + Tailwind).

  • WCAG implementation: WCAG 2.2 §1.4.3 with proper sRGB linearization
  • OKLab transformations follow Bjorn Ottosson's reference matrix
  • Image extraction via k-means in RGB space with k-means++ init
  • All math has unit tests against published boundary values

Stack

Vite · Svelte 5 (runes) · TypeScript · Tailwind · Vitest · pnpm

Develop

pnpm install
pnpm bundle:themes      # pull warpdotdev/themes + precompute WCAG reports
pnpm dev                # local dev server
pnpm test               # run tests
pnpm build              # production build

Roadmap

  • AI prompt → theme (BYOK)
  • Multi-terminal export (iTerm2, Ghostty, Alacritty)
  • Community gallery / share without GitHub PR
  • "Fix existing theme" batch mode

License

MIT

About

WCAG-first Warp theme generator

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages