Customization and theming

Customizing colors

Launch UI uses CSS variables for theming.

This means that all the colors are stored as CSS variables that can be overridden or changed in the globals.css file. Read more about this approach in shadcn/ui's theming documentation.

Most of the variables are common across shadcn/ui and Launch UI. On top of that, Launch UI has two variables you won't find in shadcn/ui. They are used for brand accent colors:

Customizing rounded corners (border radius)

The best way to customize the radius of rounded corners is by editing the tailwind.config.ts file. All radii in Launch UI are defined with the default Tailwind's utilities, so you have full control over them just by editing this single file.

Read more about customizing border radius utilities in Tailwind CSS' border radius documentation.

Light and dark mode

Launch UI uses the selector strategy for managing light and dark mode. This means that color CSS variables in globals.css have separate values for light and dark mode.

:root {
  --brand: 31 97% 72%;
  --brand-foreground: 27 96% 61%;
}

.dark {
  --brand: 27 96% 61%;
  --brand-foreground: 31 97% 72%;
}

The values defined in :root are used for light mode. The values defined in the .dark scope are used in dark mode.

With this approach, you need to apply the .dark class to all elements that should appear dark, either when manually selected or based on the user's system settings.

The Launch UI Next.js template uses the next-themes package for handling modes. You can use it as an example for implementing light and dark mode in your Next.js + Launch UI apps. Check out these files to understand how it works:

• components/uimode-toggle.tsx – toggling between modes
• components/sections/hero/default.tsx – switching assets such as images when changing modes

If you're not using Next.js, shadcn/ui's dark mode documentation explains how to implement dark mode in other React frameworks.