Theming

Using CSS Variables for theming.

How Theming works

For now, theming works only using CSS variables, as shown below 

</p>
<div class="bg-background text-foreground"></div>

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.

April UI ships with a moss and warm clay palette by default. The default light theme uses soft green surfaces, while the dark theme uses layered forest tones. You can replace any semantic token in your application's CSS after importing April UI.

Given the following CSS variables:

app.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)).

<div class="bg-primary text-primary-foreground">Hello</div>

List of variables

Here's the list of variables available for customization:

Default background color of <body/>...etc 
--background: 105 20% 93%;
--foreground: 145 18% 13%;
Muted backgrounds such as in switch 
--muted: 100 15% 87%;
--muted-foreground: 145 8% 36%;
Background color for the card component 
--card: 95 14% 97%;
--card-foreground: 145 18% 13%;
Background color for popovers such as dropdown menu and popover 
--popover: 95 14% 98%;
--popover-foreground: 145 18% 13%;
Default border color 
--border: 100 10% 79%;
Border color for inputs such as input, select, textarea 
--input: 100 10% 79%;
Primary colors for button 
--primary: 28 38% 74%;
--primary-foreground: 28 38% 16%;
Secondary colors for button 
--secondary: 100 15% 87%;
--secondary-foreground: 145 18% 13%;
Used for accents such as hover effects on dropdown menu items, select item...etc 
--accent: 30 20% 86%;
--accent-foreground: 145 18% 13%;
Used for destructive actions such as destructive buttons 
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
Used for focus ring-3 
--ring: 28 38% 74%;
Border radius for card, input and buttons 
--radius: 0.5rem;
Colors for the sidebar component 
--sidebar-background: 100 16% 89%;
--sidebar-foreground: 145 18% 13%;
--sidebar-primary: 28 38% 74%;
--sidebar-primary-foreground: 35 25% 12%;
--sidebar-accent: 100 15% 84%;
--sidebar-accent-foreground: 145 18% 13%;
--sidebar-border: 100 10% 79%;
--sidebar-ring: 28 38% 74%;
Widths for the sidebar component 
--sidebar-width: 16rem;
--sidebar-width-icon: 3rem;
--sidebar-width-mobile: 18rem;

Adding new colors

To add new colors, define the channels and then map them in your @theme block. Both live in your CSS file.

app.css 
:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}
<p>.dark {
--warning: 48 96% 89%;
--warning-foreground: 38 92% 50%;
}</p>
<p>@theme {
--color-warning: hsl(var(--warning));
--color-warning-foreground: hsl(var(--warning-foreground));
}

You can now use the warning utility class in your components.

app.blade.php 
 theme:github-light
</p>
<div class="bg-warning text-warning-foreground"></div>

Other color formats

ShadCN recommends using HSL colors for theming but you can also use other color formats if you prefer.

See the Tailwind CSS documentation for more information on using rgb, rgba or hsl colors.

Component overrides

Use semantic tokens first. If a component needs a product-specific change, publish only that component and edit the copy in resources/views/vendor/april/components:

php artisan april:publish button

April components also expose data-slot attributes on their internal elements. Use these selectors for small visual adjustments without replacing a component:

app.css 
[data-slot="button"] {
  letter-spacing: 0.01em;
}

The package merges component classes with passed classes. The tailwind_merge configuration controls this behavior when your application uses a custom Tailwind prefix or class groups.