Theme System Demo

Explore different color schemes and see how they affect the interface

Choose Your Color Scheme

Light

Clean light theme with blue accents

Dark

Modern dark theme with blue accents

Ocean Blue

Calming blue theme inspired by ocean colors

Royal Purple

Rich purple theme with deep tones

Forest Green

Natural green theme with earthy tones

Choose a color scheme that matches your preference. Changes apply immediately.

Current Palette: Light

Clean light theme with blue accents

Backgrounds

Primary
Secondary
Tertiary

Text Colors

Primary
Secondary
Tertiary

Interactive

Primary
Secondary
Accent

Status Colors

Success
Warning
Danger

Button Variants

Typography

Heading 1

Heading 2

Heading 3

This is a paragraph with secondary text color. It should be readable and provide good contrast.

This is tertiary text, typically used for captions, labels, and less important information.

Form Elements

Current Configuration

{
  "colorScheme": "light",
  "palette": "Light",
  "colors": {
    "bg": {
      "primary": "#ffffff",
      "secondary": "#f8fafc",
      "tertiary": "#f1f5f9"
    },
    "text": {
      "primary": "#0f172a",
      "secondary": "#475569",
      "tertiary": "#64748b",
      "inverse": "#ffffff"
    },
    "border": {
      "primary": "#e2e8f0",
      "secondary": "#f1f5f9",
      "focus": "#3b82f6"
    },
    "interactive": {
      "primary": "#3b82f6",
      "primaryHover": "#2563eb",
      "secondary": "#64748b",
      "secondaryHover": "#475569",
      "danger": "#ef4444",
      "success": "#22c55e",
      "warning": "#f59e0b",
      "info": "#06b6d4"
    },
    "status": {
      "success": "#166534",
      "warning": "#92400e",
      "danger": "#dc2626",
      "info": "#0369a1",
      "successBg": "#f0fdf4",
      "warningBg": "#fffbeb",
      "dangerBg": "#fef2f2",
      "infoBg": "#f0f9ff"
    },
    "focus": {
      "ring": "#3b82f6",
      "ringOffset": "#ffffff"
    },
    "neutral": {
      "muted": "#f8fafc",
      "subtle": "#f1f5f9"
    },
    "accent": "#3b82f6",
    "shadow": "rgba(0, 0, 0, 0.1)",
    "overlay": "rgba(0, 0, 0, 0.5)"
  }
}