Customization and theming

Launch UI closely follows the patterns of shadcn/ui's theming. If you're already working with shadcn/ui, you should feel right at home. Additionally, Launch UI adds a few extra customization options that follow similar conventions.

Customizing colors

Since Tailwind 4, all theming variables, including colors, are stored as CSS variables in the globals.css file. You can override them or edit this file to change them directly.

Most of the variables are common across shadcn/ui and Launch UI. However, some values have been adjusted to match the unique Launch UI style.

On top of that, Launch UI has several variables you won't find in shadcn/ui. They are used for brand colors, illustrations, custom shadows etc. Brand colors and the most commonly customized:

Customizing rounded corners (border radius)

Radius of rounded corners can also be customized in the globals.css 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' documentation.

Light and dark mode

Launch UI uses @custom-variant to define dark mode in the globals.css file. All colors in the globals.css file have separate values for light and dark mode.

:root {
  --brand: oklch(66.5% 0.1804 47.04);
  --brand-foreground: oklch(83.6% 0.1177 66.87);
}

.dark {
  --brand: oklch(83.6% 0.1177 66.87);
  --brand-foreground: oklch(75.77% 0.159 55.91);
}

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/context/theme-provider.tsx – React context using the next-themes package for theme setting
• app/layout.tsx – Root layout that wraps each page with the theme context
• components/ui/mode-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.