Franken UI, just like shadcn/ui 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.
The background suffix is omitted when the variable is used for the background color of the component.
Given the following CSS variables:
The background color of the following component will be hsl(var(--primary)) and the foreground color will be hsl(var(--primary-foreground)).
CSS variables must be defined without color space function. See the Tailwind CSS documentation for more information.
Here’s the list of variables available for customization:
1. For default backgrounds
2. For muted backgrounds
3. Background color for cards
4. Background color for popovers
5. For border color
6. Border color for inputs
7. For primary colors
8. For secondary colors
9. For accents such as hover effects
10. For destructive actions
11. For focus ring
To add new colors, simply add them to your main CSS file.
You can now use the warning utility class in your components.
1. Start by going to https://ui.shadcn.com/colors. Set the output format to HSL and pick your desired color.
Use that color to assign values to the --primary, --primary-foreground, and --ring tokens. These tokens represent your main theme color, its contrasting foreground
color, and the ring color for focus states.
2. Use the CSS snippet below as your starting point and
replace the * with your theme name (e.g.
indigo, cyan, fuchsia, etc.). You only need to
update the values for --primary, --primary-foreground, and --ring for both light and dark modes,
but you're free to customize everything else if needed.
Note CDN theming only provides basic theming and won't customize checkboxes, radio buttons, or any other SVG-based background images, as colors need to be converted and injected (i.e., compiled). For advanced customization, please use the Vite plugin.
To create your own palette, follow these steps:
1. Start by going to https://ui.shadcn.com/colors. Set the output format to HSL and pick your desired color.
Use that color to assign values to the --primary, --primary-foreground, and --ring tokens. These tokens represent your main theme color, its contrasting foreground
color, and the ring color for focus states.
2. Use the snippet below as your starting point and replace
the * with your theme name (e.g. indigo, cyan, fuchsia, etc.). You only need to update the values for --primary, --primary-foreground, and --ring for both light and dark modes, but you're free to customize everything
else if needed.
Note If you're using the legacy color generators from version 2.0, make sure to include the following additional keys in dark mode for compatibility:
3. Finally, configure your vite.config.js to add the custom palette. You will do this inside the customPalette
option.
To set your newly added palette as the default, simply update the script in your <head> tag to reference the new theme name, like so:
To register your newly added palette with the Theme Switcher, please refer to the corresponding documentation or guide for step-by-step instructions on how to integrate it.