saadeghi daisyUI 5 colors
daisyUI color names
primary: The main brand color.primary-content: Foreground content color for use onprimary.secondary: An optional secondary brand color.secondary-content: Foreground content color for use onsecondary.accent: An optional accent brand color.accent-content: Foreground content color for use onaccent.neutral: A dark neutral color for UI areas that do not use saturated colors.neutral-content: Foreground content color for use onneutral.base-100: The page base-surface color for blank backgrounds.base-200: A darker base shade that gives elevation.base-300: A still darker base shade that gives more elevation.base-content: Foreground content color for use on a base color.info: Color for information and help messages.info-content: Foreground content color for use oninfo.success: Color for success and safe-state messages.success-content: Foreground content color for use onsuccess.warning: Color for warning and caution messages.warning-content: Foreground content color for use onwarning.error: Color for error, danger, and destructive-action messages.error-content: Foreground content color for use onerror.
daisyUI color rules
- daisyUI adds semantic color names to the Tailwind CSS colors.
- Use daisyUI color names in utility classes as you use other Tailwind CSS color names. For example,
bg-primaryuses the primary color for the background. - The value of each daisyUI color name is a variable. Thus, the color can change with the theme.
- Do not use
dark:with daisyUI color names. - If possible, use only daisyUI color names. This lets colors change automatically with the theme.
- If you use a Tailwind CSS color name such as
red-500, its color stays the same in all themes. - If you use a daisyUI color name such as
primary, its color changes with the theme. - Avoid Tailwind CSS color names for text. For example,
text-gray-800onbg-base-100becomes unreadable in a dark theme becausebg-base-100is dark. *-contentcolors must have clear contrast with their related colors.- Use
base-*colors for most of the page. Use the default variant for all elements. Useprimaryonly for the most important element on the page. Use it only once. - In rare cases, you can use a Tailwind CSS color if content must keep the same color in all themes. For example, you can use
text-red-500instead oftext-error. For an SVG icon or chart, a fixed color can be necessary.
Enable and apply themes
The default configuration enables light and dark. In the daisyUI plugin, select specified themes, all themes, or no built-in themes:
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
- Use
themes: all;to enable all built-in themes. - Use
themes: false;to disable all built-in themes. Usually, do this before you define only custom themes. - Add
data-theme="THEME_NAME"to<html>or a nested element. You can nest themes with no depth limit.
<html data-theme="dark">
<section data-theme="light">
<div data-theme="retro">Nested theme</div>
</section>
</html>
daisyUI custom theme with custom colors
A CSS file that contains Tailwind CSS, daisyUI, and a custom daisyUI theme has this structure:
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "mytheme";
default: true; /* set as default */
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
color-scheme: light; /* color of browser-provided UI */
--color-base-100: oklch(98% 0.02 240);
--color-base-200: oklch(95% 0.03 240);
--color-base-300: oklch(92% 0.04 240);
--color-base-content: oklch(20% 0.05 240);
--color-primary: oklch(55% 0.3 240);
--color-primary-content: oklch(98% 0.01 240);
--color-secondary: oklch(70% 0.25 200);
--color-secondary-content: oklch(98% 0.01 200);
--color-accent: oklch(65% 0.25 160);
--color-accent-content: oklch(98% 0.01 160);
--color-neutral: oklch(50% 0.05 240);
--color-neutral-content: oklch(98% 0.01 240);
--color-info: oklch(70% 0.2 220);
--color-info-content: oklch(98% 0.01 220);
--color-success: oklch(65% 0.25 140);
--color-success-content: oklch(98% 0.01 140);
--color-warning: oklch(80% 0.25 80);
--color-warning-content: oklch(20% 0.05 80);
--color-error: oklch(65% 0.3 30);
--color-error-content: oklch(98% 0.01 30);
--radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
--radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
--radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
/* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */
--size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. If so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */
--size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. If so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */
--border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. If so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */
--depth: 1; /* only 0 or 1 - Adds a shadow and subtle 3D depth effect to components */
--noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */
}
Rules
- You must include all CSS variables in the example.
- Colors can use OKLCH, hex, or another format.
- If you generate a custom theme, do not include the comments from the example. Give only the code.
Optional: Use the visual tool at https://daisyui.com/theme-generator/ to make a custom theme.
Change a built-in theme
Use the built-in theme name. Change only the necessary values. daisyUI inherits the other values:
@plugin "daisyui/theme" {
name: "light";
default: true;
--color-primary: blue;
--color-secondary: teal;
}
For a custom CDN theme, define the same variables in a selector. The selector must match the selected data-theme and theme controller:
:root:has(input.theme-controller[value=mytheme]:checked),
[data-theme="mytheme"] {
color-scheme: light;
--color-primary: oklch(55% 0.3 240);
/* define the remaining custom-theme variables */
}
To make the Tailwind dark: variant follow one or more daisyUI themes, define a custom variant:
@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));