Theme Playground

Customize the Refraction UI theme by editing CSS variables in real time. Preview components with your changes, then export the CSS.

Config Editor

Paste AI-generated CSS custom properties and instantly see your brand applied to every component in a live preview.

Generate Theme

Get a ready-to-copy prompt for ChatGPT or Claude that generates a complete Dart RefractionThemeData matching your brand description.

Theme Reference

Comprehensive documentation for all 95 CSS custom properties — what each controls, acceptable values, and visual examples.

React API

ThemeProvider, ThemeScript, and useTheme — SSR-safe setup including the new defaultMode / enableSystem flash-prevention props (issue #317).

Refraction — Modern, crisp, slightly warm. The default look.

Font

Inter

Radius

0.5rem

Shadow

Defined

Transition

150ms

CSS Variables

Preview

Buttons

Badges

Default
Primary
Secondary
Success
Warning
Error
Outline

Inputs

Card

Sample Card

This card uses the current theme variables for background, border, text, radius, and shadows.

Generated Dart Code

dart
final myTheme = RefractionThemeData(
  borderRadius: 8,
  colors: RefractionColors(
    background: HslColor.parse('0 0% 100%'),
    foreground: HslColor.parse('222 47% 11%'),
    primary: HslColor.parse('252 85% 60%'),
    primaryForeground: HslColor.parse('0 0% 100%'),
    secondary: HslColor.parse('240 5% 96%'),
    secondaryForeground: HslColor.parse('240 4% 43%'),
    muted: HslColor.parse('240 5% 96%'),
    mutedForeground: HslColor.parse('240 4% 43%'),
    accent: HslColor.parse('252 30% 95%'),
    accentForeground: HslColor.parse('252 50% 45%'),
    destructive: HslColor.parse('0 84% 50%'),
    destructiveForeground: HslColor.parse('0 0% 100%'),
    border: HslColor.parse('240 6% 90%'),
    input: HslColor.parse('240 6% 90%'),
    ring: HslColor.parse('252 85% 60%'),
  ),
);