ShellUI v0.2.0 uses CSS variables for theming, making it easy to customize colors, spacing, typography, and other design tokens to match your brand. Built on Tailwind CSS v4.1.18 with modern CSS variable integration.

Overview

All ShellUI components use CSS variables for styling, which means you can customize the entire design system by modifying a few variables. This approach provides flexibility while maintaining consistency. Chart components (new in v0.2.0) also integrate with your theme automatically.

Quick Theme Setup

Using tweakcn

The easiest way to customize your theme is using tweakcn:

Visit tweakcn.com
Design your perfect theme
Copy the generated CSS variables
Paste into your wwwroot/input.css or wwwroot/app.css

Manual Customization

You can also customize themes manually by modifying CSS variables. ShellUI v0.2.0 uses OKLCH color values:

@import "tailwindcss";

:root {
  --background: oklch(0.9900 0 0);
  --foreground: oklch(0 0 0);

  --primary: oklch(0 0 0);
  --primary-foreground: oklch(1 0 0);

  --secondary: oklch(0.9400 0 0);
  --secondary-foreground: oklch(0 0 0);

  --muted: oklch(0.9700 0 0);
  --muted-foreground: oklch(0.4400 0 0);

  --accent: oklch(0.9400 0 0);
  --accent-foreground: oklch(0 0 0);

  --destructive: oklch(0.6300 0.1900 23.0300);
  --destructive-foreground: oklch(1 0 0);

  --border: oklch(0.9200 0 0);
  --input: oklch(0.9400 0 0);
  --ring: oklch(0 0 0);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0 0 0);

  --radius: 0.5rem;
}

Dark Mode

ShellUI supports dark mode out of the box. Define your dark mode variables:

.dark {
  --background: oklch(0 0 0);
  --foreground: oklch(1 0 0);

  --primary: oklch(1 0 0);
  --primary-foreground: oklch(0 0 0);

  --secondary: oklch(0.2500 0 0);
  --secondary-foreground: oklch(1 0 0);

  --muted: oklch(0.2300 0 0);
  --muted-foreground: oklch(0.7200 0 0);

  --accent: oklch(0.3200 0 0);
  --accent-foreground: oklch(1 0 0);

  --destructive: oklch(0.6900 0.2000 23.9100);
  --destructive-foreground: oklch(0 0 0);

  --border: oklch(0.2600 0 0);
  --input: oklch(0.3200 0 0);
  --ring: oklch(0.7200 0 0);

  --card: oklch(0.1400 0 0);
  --card-foreground: oklch(1 0 0);
}

Use the ThemeToggle component to switch between light and dark modes:

<ThemeToggle />

Chart Theme Integration

New in v0.2.0, chart components automatically use your theme's CSS variables for containers:

var(--radius) for border radius
var(--shadow) for box shadow
var(--border), var(--card), var(--card-foreground) for colors

Charts also support three built-in color themes via the ChartTheme enum:

<BarChart TItem="SalesData"
    Theme="ChartTheme.Default"
    ... />

Default - Professional blue-based palette
Colorful - Vibrant multi-color palette
Monochrome - Slate grays for minimal aesthetic

Custom Fonts

Add custom fonts by including Google Fonts or custom font files:

<!-- In your index.html or _Host.cshtml -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Then update your CSS:

:root {
  --font-sans: 'Inter', sans-serif;
}

Component-Specific Theming

You can also customize individual components by overriding their CSS classes or modifying component source files (when using CLI installation).

Best Practices

Use CSS variables for all color values
Test your theme in both light and dark modes
Ensure sufficient contrast ratios for accessibility
Keep your theme consistent across all components
Use chart themes that complement your overall color scheme

Theming

On this page