Theming

Using CSS variables to customize the theme.

Color Tokens

The theme system is built with semantic color tokens that represent specific use cases rather than literal colors. Here are the main color tokens and their use cases:

Base Colors

  • background / foreground: Primary background and text colors
  • card / card-foreground: Used for card components and their content
  • popover / popover-foreground: For popover, dropdown, dialog, etc.

Interactive Elements

  • primary / primary-foreground: Main brand color, used for primary actions
  • secondary / secondary-foreground: Less prominent actions and elements
  • muted / muted-foreground: Subdued elements like secondary text
  • accent / accent-foreground: Highlighted or featured elements
  • destructive / destructive-foreground: Dangerous or destructive actions

Status Colors

  • danger / danger-foreground / danger-border: Error states and critical alerts
  • warning / warning-foreground / warning-border: Warning messages and alerts
  • info / info-foreground / info-border: Informational messages
  • success / success-foreground / success-border: Success states and confirmations

Utility Colors

  • border: Default border color
  • input: Form input borders
  • ring: Focus ring color for interactive elements

Chart Colors

  • chart-1 through chart-5: Predefined colors for data visualizations

Color Format Implementation

Why Hex in CSS Variables?

In globals.css, colors are defined in hexadecimal format for several reasons:

  1. Browser Compatibility: Hex colors have universal browser support
  2. Human Readability: Hex values are widely understood and easier to read
  3. Tool Integration: Most design tools export colors in hex format
globals.css
:root {
	--background: #fafafa;
	--foreground: #060606;
	/* ... other colors ... */
}

OKLCH Transformation

In tailwind.config.js, these hex colors are transformed into OKLCH color space:

tailwind.config.js
colors: {
  background: "oklch(from var(--background) l c h / <alpha-value>)",
  foreground: "oklch(from var(--foreground) l c h / <alpha-value>)",
  // ... other colors ...
}

This transformation provides several benefits:

  1. Wider Color Gamut: OKLCH can represent a broader range of colors
  2. Better Color Interpolation: Smoother transitions and animations
  3. Perceptual Uniformity: More natural-looking color variations

Customizing Colors

Adding New Colors

To add new colors to your theme:

Add the CSS variables in globals.css

globals.css
:root {
	/* Existing colors */
	--custom-color: #7c3aed;
	--custom-color-foreground: #ffffff;
}
 
.dark {
	/* Existing dark mode colors */
	--custom-color: #9f67ff;
	--custom-color-foreground: #ffffff;
}

Add the color to your tailwind.config.js

tailwind.config.js
colors: {
  // Existing colors
  'custom-color': {
    DEFAULT: "oklch(from var(--custom-color) l c h / <alpha-value>)",
    foreground: "oklch(from var(--custom-color-foreground) l c h / <alpha-value>)",
  }
}

Using Custom Colors

After adding new colors, you can use them with Tailwind's utility classes:

Usage
<div className="bg-custom-color text-custom-color-foreground">
	Custom colored content
</div>