Theming

txKit uses CSS custom properties with the --tx-* prefix. No CSS-in-JS, no Tailwind - just standard custom properties that cascade naturally.

CSS Import

Import the theme package in your app entry point:

import '@txkit/themes'

This single import includes light/dark themes and all visual variants. You can also import parts individually:

import '@txkit/themes/base'              // light theme only
import '@txkit/themes/dark'              // dark theme overrides
import '@txkit/themes/variants/soft'     // soft variant only

Theme Modes

Pass theme to TxKitProvider:

<TxKitProvider config={{
  // ...
  theme: 'dark', // 'light' | 'dark' | 'auto' (default)
}}>

'auto' follows the user's system preference via prefers-color-scheme.

Switching at Runtime

Use setTheme from the useTxKit hook:

import { useTxKit } from '@txkit/react'
 
const ThemeToggle = () => {
  const { theme, setTheme } = useTxKit()
 
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      {theme}
    </button>
  )
}

Visual Variants

Pass variant to TxKitProvider to apply a visual style preset:

<TxKitProvider config={{
  // ...
  variant: 'soft', // 'default' | 'soft' | 'sharp' | 'rounded'
}}>

Variants override --tx-radius-*, --tx-shadow-*, and --tx-transition. They combine with any theme mode (light/dark).

Customizing

Override any --tx-* variable in your CSS:

.tx-root {
  --tx-color-primary: #8B5CF6;
  --tx-radius-md: 12px;
}

For dark mode overrides, target .tx-dark:

.tx-dark {
  --tx-color-primary: #A78BFA;
}

CSS Custom Properties

All color values are defined in OKLCH for perceptual uniformity. The hex values below are approximations - check packages/themes/src/base.css and dark.css for canonical OKLCH definitions.

Colors

Semantic

Surfaces

Text

Borders

Typography

Spacing

Radii

Default variant. Visual variants override these (see Visual Variants).

Shadows

Two-layer OKLCH shadows. Dark mode uses higher opacity for visibility on dark surfaces.

Motion

Z-index