mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-30 08:04:18 +00:00
180 lines
4.3 KiB
Plaintext
180 lines
4.3 KiB
Plaintext
---
|
|
title: Theming
|
|
description: Use CSS Variables to customize the look and feel of your application.
|
|
---
|
|
|
|
We use CSS variables for styling. This allows you to easily change the colors of components without having to update class names.
|
|
|
|
**CSS variables must be defined without color space function**. See the [Tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for more information.
|
|
|
|
## Convention
|
|
|
|
We use a simple `background` and `foreground` convention for colors. The `background` variable is used for the background color of the component and the `foreground` variable is used for the text color.
|
|
|
|
<Callout>
|
|
|
|
The `background` suffix can be omitted if the variable is used for the background color of the component.
|
|
|
|
</Callout>
|
|
|
|
Given the following CSS variables:
|
|
|
|
```css
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
```
|
|
|
|
The `background` color of the following component will be `hsl(var(--primary))` and the `foreground` color will be `hsl(var(--primary-foreground))`.
|
|
|
|
```tsx
|
|
<div className="bg-primary text-primary-foreground">Hello</div>
|
|
```
|
|
|
|
## CSS Variables
|
|
|
|
Here's the list of variables available for customization:
|
|
|
|
```css title="Default background color of <body />...etc"
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 47.4% 11.2%;
|
|
```
|
|
|
|
```css title="Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
```
|
|
|
|
```css title="Background color for <Card />"
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 47.4% 11.2%;
|
|
```
|
|
|
|
```css title="Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 47.4% 11.2%;
|
|
```
|
|
|
|
```css title="Default border color"
|
|
--border: 214.3 31.8% 91.4%;
|
|
```
|
|
|
|
```css title="Border color for inputs such as <Input />, <Select />, <Textarea />"
|
|
--input: 214.3 31.8% 91.4%;
|
|
```
|
|
|
|
```css title="Primary colors for <Button />"
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
```
|
|
|
|
```css title="Secondary colors for <Button />"
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
```
|
|
|
|
```css title="Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
```
|
|
|
|
```css title="Used for destructive actions such as <Button variant="destructive">"
|
|
--destructive: 0 100% 50%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
```
|
|
|
|
```css title="Used for focus ring"
|
|
--ring: 215 20.2% 65.1%;
|
|
```
|
|
|
|
```css title="Border radius for card, input and buttons"
|
|
--radius: 0.5rem;
|
|
```
|
|
|
|
## Default
|
|
|
|
The following is the default color palette used by the components.
|
|
|
|
```css title="styles/globals.css"
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 47.4% 11.2%;
|
|
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
|
|
--destructive: 0 100% 50%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--ring: 215 20.2% 65.1%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 224 71% 4%;
|
|
--foreground: 213 31% 91%;
|
|
|
|
--muted: 223 47% 11%;
|
|
--muted-foreground: 215.4 16.3% 56.9%;
|
|
|
|
--popover: 224 71% 4%;
|
|
--popover-foreground: 215 20.2% 65.1%;
|
|
|
|
--card: 224 71% 4%;
|
|
--card-foreground: 213 31% 91%;
|
|
|
|
--border: 216 34% 17%;
|
|
--input: 216 34% 17%;
|
|
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 1.2%;
|
|
|
|
--secondary: 222.2 47.4% 11.2%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
|
|
--accent: 216 34% 17%;
|
|
--accent-foreground: 210 40% 98%;
|
|
|
|
--destructive: 0 63% 31%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--ring: 216 34% 17%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
}
|
|
```
|