Getting Started

Theming

Sunsato UI uses CSS variables for theming. This makes it easy to customize colors and create your own themes.

CSS Variables

All colors are defined using HSL values without the hsl() wrapper. This allows for easy opacity modifications using Tailwind.

Background & Text

--background

--foreground

Primary & Secondary

--primary

--secondary

Muted & Accent

--muted

--accent

Other

--border

--destructive

Creating a Custom Theme

To create your own theme, override the CSS variables in your globals.css:

globals.csscss

:root {
  /* Custom blue theme */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  
  /* Adjust other colors as needed */
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
}

.dark {
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
}

Using Theme Colors

The theme colors are registered in Tailwind and can be used with any utility class:

// Background colors
<div className="bg-background" />
<div className="bg-primary" />
<div className="bg-muted" />

// Text colors
<p className="text-foreground" />
<p className="text-muted-foreground" />
<p className="text-primary" />

// Border colors
<div className="border border-border" />
<div className="border border-primary" />

// With opacity
<div className="bg-primary/50" />
<p className="text-foreground/80" />

Dark Mode

Dark mode is handled automatically using the .dark class on the html element. The next-themes package manages theme switching and persistence.

components/ui/theme-toggle.tsxtsx

"use client";

import { useTheme } from "next-themes";

export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();

  return (
    <button
      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
    >
      Toggle Theme
    </button>
  );
}

Pro Tips 💡

Use hsl() values for better color manipulation
Keep contrast ratios in mind for accessibility (WCAG AA requires 4.5:1)
Test both light and dark modes when customizing colors
Use semantic color names like primary instead of blue for better maintainability