Colors

Color palette and theming with CSS variables for Shark UI.

Shark UI relies on CSS custom properties for its color system. For layout setup and the full styling guide, see Styling. These variables toggle between light and dark themes automatically when you add the dark class to your root element. All definitions live in globals.css and stick to the shadcn/ui naming style.

How It Works

Colors are wired up through Tailwind's theme. The @theme inline block in globals.css maps semantic variables into Tailwind utilities so you can use classes like bg-primary and text-muted-foreground.

Naming rules:

Names with foreground define text (or icon) color on top of that background (e.g. --primary-foreground).
Names without foreground define backgrounds (e.g. --primary, --card, --popover).

Typical usage:


<html className="dark">
  <body className="bg-background text-foreground">
    {/* Your app */}
  </body>
</html>


<div className="bg-primary text-primary-foreground">
  Primary action
</div>

Variable Reference

Base Layout

--background — Page background
--foreground — Default text on that background

Cards and Surfaces

--card / --card-foreground — Card backgrounds and their text
--popover / --popover-foreground — Popovers, dropdowns, menus

Primary Actions

--primary / --primary-foreground — Main buttons and links

Secondary and Muted

--secondary / --secondary-foreground — Secondary controls
--muted / --muted-foreground — Softer backgrounds and de‑emphasized text
--accent / --accent-foreground — Hover and active states

Status Colors

--success / --success-foreground
--info / --info-foreground
--warning / --warning-foreground
--destructive / --destructive-foreground

Form and UI

--border — Borders
--input — Input backgrounds
--ring — Focus rings

Sidebar

--sidebar — Sidebar background
--sidebar-foreground — Sidebar text
--sidebar-primary — Active item background
--sidebar-accent — Hover and active states
--sidebar-border — Sidebar borders
--sidebar-ring — Focus rings

Charts

--chart-1 — Chart series color 1
--chart-2 — Chart series color 2
--chart-3 — Chart series color 3
--chart-4 — Chart series color 4
--chart-5 — Chart series color 5

How to Use Colors

In JSX with Tailwind classes:


<div className="bg-background text-foreground">
  <button className="bg-primary text-primary-foreground hover:bg-primary/90">
    Click me
  </button>
</div>

For full setup, see the manual installation guide.

Customizing Colors

Override variables in :root for light mode and .dark for dark mode:


:root {
  --primary: var(--color-blue-600);
  --primary-foreground: var(--color-blue-50);
}
 
.dark {
  --primary: var(--color-blue-500);
  --primary-foreground: var(--color-blue-50);
}

For oklch or custom values, tools like oklch.com help with conversion.

Shark UI ships preset themes, check Theming for more information.

Quick Tips

Apply the dark class on the root so dark mode styles take effect.
Check both light and dark appearances when changing colors.
Keep using foreground/background pairs so contrast stays safe.
Prefer color variables over hardcoded hex or rgb values.

On This Page

How It Works Variable Reference Base Layout Cards and Surfaces Primary Actions Secondary and Muted Status Colors Form and UI Sidebar Charts How to Use Colors Customizing Colors Quick Tips