TkxThemeBuilder

Self-contained — optimisation runs on click; the docs theme is unaffected

Theme Builder

Quantum-powered color optimization

Base Hue

210°

⚛ Quantum Annealing

Color Tokens

primary#00f5d4

secondary#7b2ff7

background#0a0a0f

surface#12121a

text#e8e8f4

textMuted#8888aa

border#2a2a3e

error#f87171

warning#fbbf24

success#34d399

accent#ff6b6b

Live Preview

Buttons

Card

Card Title

Sample card with surface background and muted text content.

TagAccent

Input

Progress

Status Badges

ErrorWarningSuccess

WCAG Contrast Check

Text on Background16.25:1✓ AA✓ AAA✅

Text on Surface15.33:1✓ AA✓ AAA✅

Primary on Background14.12:1✓ AA✓ AAA✅

TextMuted on Background5.78:1✓ AA— AAA✅

AA requires 4.5:1 (normal text). AAA requires 7:1.

Color Palette

import { TkxThemeBuilder } from 'tekivex-ui/quantum';

<TkxThemeBuilder
  initialTheme={quantumDark}
  onChange={setTheme}
  onExport={(json) => downloadJSON(json)}
/>

A live theme editor. Pick colors with a HSV picker, see all 99 components re-render against your custom palette in real time, then export as JSON or as a .ts file ready to drop into your project.

What you can edit

Token	Affects
`bg`, `surface`, `surfaceAlt`	Page + card backgrounds
`border`	Outlines
`text`, `textMuted`	All copy
`primary`	Primary actions, focus rings
`secondary`	Secondary actions
`success`, `warning`, `danger`, `info`	Status colors

Export formats

// JSON
{ "bg": "#0a0a0f", "surface": "#12121a", ... }

// TypeScript
import type { ThemeTokens } from 'tekivex-ui';
export const myTheme: ThemeTokens = { bg: '#0a0a0f', ... };

Accessibility

Each color picker is keyboard-navigable (HSV with arrow keys)
Contrast ratios are computed and shown for every text/background pair — failing pairs are flagged with an icon + screen-reader announcement
The live preview is aria-live="polite" (verbose) or "off" (quiet) — toggleable

Where it’s used

The theme builder is mounted at https://www.tekivex.com/ui/theme-builder/. The same component is reusable inside your own admin UI.