Theme

DThemeProvider(
  theme: DuxtTheme(),
  mode: DThemeMode.system,  // Follow system preference
  child: [
    // Your app content
  ],
)

// Light mode only
DThemeProvider(
  mode: DThemeMode.light,
  child: [...],
)

// Dark mode only
DThemeProvider(
  mode: DThemeMode.dark,
  child: [...],
)

// Follow system preference (default)
DThemeProvider(
  mode: DThemeMode.system,
  child: [...],
)

final customTheme = DuxtTheme(
  // Primary color (brand color)
  primary: DColorScale(
    light: '#3b82f6',  // Blue for light mode
    dark: '#60a5fa',   // Lighter blue for dark mode
  ),

  // Secondary color
  secondary: DColorScale(
    light: '#8b5cf6',  // Purple
    dark: '#a78bfa',
  ),

  // Semantic colors
  success: DColorScale(light: '#22c55e', dark: '#4ade80'),
  warning: DColorScale(light: '#f59e0b', dark: '#fbbf24'),
  error: DColorScale(light: '#ef4444', dark: '#f87171'),
  info: DColorScale(light: '#06b6d4', dark: '#22d3ee'),

  // Typography
  font: 'Inter, system-ui, sans-serif',
  codeFont: 'JetBrains Mono, monospace',
);

// Use the custom theme
DThemeProvider(
  theme: customTheme,
  child: [...],
)

// Use ThemeToggle from jaspr_content

// In your header or navigation
ThemeToggle()

// In components
DButton(color: DColor.primary)
DAlert(color: DColor.success)
DBadge(color: DColor.warning)

// Color utility functions
final bgClass = bgColor(DColor.primary);   // 'bg-primary-500'
final textClass = textColor(DColor.error); // 'text-error-500'
final ringClass = ringColor(DColor.info);  // 'ring-info-500'

// Text colors
DTextColors.highlighted  // Primary text color
DTextColors.defaultText  // Default text
DTextColors.muted        // Muted/secondary text
DTextColors.dimmed       // Very subtle text

// Background colors
DBgColors.defaultBg  // Default background
DBgColors.elevated   // Slightly elevated (cards)
DBgColors.muted      // Muted background

:root {
  --color-primary: #22c55e;
  --color-secondary: #3b82f6;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #06b6d4;
}

.dark {
  --color-primary: #4ade80;
  --color-secondary: #60a5fa;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #22d3ee;
}

// Use Tailwind's dark mode classes
div(
  classes: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100',
  [
    Component.text('This adapts to dark mode'),
  ],
)