Theming

Oshon generates its entire token palette at runtime from three hex seeds —primary,secondary, andtertiary. Each seed expands into an 11-shade ramp (50 → 950), the gray ramp is tinted by the primary hue, and all 44 values land on the document as CSS custom properties the moment you pick them. Every component updates live.

Try it

Pick any three colors below — this whole page is re-themed byapplyTheme()as you drag.

Usage

import { applyTheme } from '@oshon-ai/tokens';

applyTheme({
  primarySeed:   '#3B82F6',
  secondarySeed: '#10B981',
  tertiarySeed:  '#F59E0B',
});

applyTheme returns a teardown function that restores the previous values. Call it inside a React useEffect for clean mount/unmount, or once at app startup for a fixed brand.