How to use daisyUI colors?
primary
, secondary
, etc. and we only use those specific colors in our interfaces.
Also, using semantic color names makes theming easier. You wouldn't have to define dark-mode colors for every single element and you wouldn't be limited to only light/dark themes. you can have multiple themes available and each theme is just a few lines of CSS variables.Color name + description | Required or optional for themes | Example use | |
---|---|---|---|
primary Primary color |
required | Class name: bg-primary CSS variable: hsl(var(--p)) | |
primary-focus Primary color when focused |
optional Will be a darker tone of primary if not specified |
Class name: bg-primary-focus CSS variable: hsl(var(--pf)) | |
primary-content Foreground content color to use on primary color |
optional Will be a readable tone of primary if not specified |
Class name: bg-primary-content CSS variable: hsl(var(--pc)) | |
secondary Secondary color |
required | Class name: bg-secondary CSS variable: hsl(var(--s)) | |
secondary-focus Secondary color when focused |
optional Will be a darker tone of secondary if not specified |
Class name: bg-secondary-focus CSS variable: hsl(var(--sf)) | |
secondary-content Foreground content color to use on secondary color |
optional Will be a readable tone of secondary if not specified |
Class name: bg-secondary-content CSS variable: hsl(var(--sc)) | |
accent Accent color |
required | Class name: bg-accent CSS variable: hsl(var(--a)) | |
accent-focus Accent color when focused |
optional Will be a darker tone of accent if not specified |
Class name: bg-accent-focus CSS variable: hsl(var(--af)) | |
accent-content Foreground content color to use on accent color |
optional Will be a readable tone of accent if not specified |
Class name: bg-accent-content CSS variable: hsl(var(--ac)) | |
neutral Neutral color |
required | Class name: bg-neutral CSS variable: hsl(var(--n)) | |
neutral-focus Neutral color when focused |
optional Will be a darker tone of neutral if not specified |
Class name: bg-neutral-focus CSS variable: hsl(var(--nf)) | |
neutral-content Foreground content color to use on neutral color |
optional Will be a readable tone of neutral if not specified |
Class name: bg-neutral-content CSS variable: hsl(var(--nc)) | |
base-100 Base color of page, used for blank backgrounds |
required | Class name: bg-base-100 CSS variable: hsl(var(--b1)) | |
base-200 Base color, a little darker |
optional Will be a darker tone of base-100 if not specified |
Class name: bg-base-200 CSS variable: hsl(var(--b2)) | |
base-300 Base color, even more darker |
optional Will be a darker tone of base-200 if not specified |
Class name: bg-base-300 CSS variable: hsl(var(--b3)) | |
base-content Foreground content color to use on base color |
optional Will be a readable tone of base-100 if not specified |
Class name: bg-base-content CSS variable: hsl(var(--bc)) | |
info Info color |
optional Will be a default blue color if not specified |
Class name: bg-info CSS variable: hsl(var(--in)) | |
info-content Foreground content color to use on info color |
optional Will be a readable tone of info if not specified |
Class name: bg-info-content CSS variable: hsl(var(--inc)) | |
success Success color |
optional Will be a default green color if not specified |
Class name: bg-success CSS variable: hsl(var(--su)) | |
success-content Foreground content color to use on success color |
optional Will be a readable tone of success if not specified |
Class name: bg-success-content CSS variable: hsl(var(--suc)) | |
warning Warning color |
optional Will be a default orange color if not specified |
Class name: bg-warning CSS variable: hsl(var(--wa)) | |
warning-content Foreground content color to use on warning color |
optional Will be a readable tone of warning if not specified |
Class name: bg-warning-content CSS variable: hsl(var(--wac)) | |
error Error color |
optional Will be a default red color if not specified |
Class name: bg-error CSS variable: hsl(var(--er)) | |
error-content Foreground content color to use on error color |
optional Will be a readable tone of error if not specified |
Class name: bg-error-content CSS variable: hsl(var(--erc)) |
<button class="btn btn-primary">Button</button>
Or:
<input type="checkbox" class="checkbox checkbox-secondary" />
You can also use color names in utility classes just like Tailwind's original color names.
These are utility classes that can be used with a color name:
bg-{COLOR_NAME}
to-{COLOR_NAME}
via-{COLOR_NAME}
from-{COLOR_NAME}
text-{COLOR_NAME}
ring-{COLOR_NAME}
fill-{COLOR_NAME}
caret-{COLOR_NAME}
stroke-{COLOR_NAME}
border-{COLOR_NAME}
divide-{COLOR_NAME}
accent-{COLOR_NAME}
shadow-{COLOR_NAME}
outline-{COLOR_NAME}
decoration-{COLOR_NAME}
placeholder-{COLOR_NAME}
ring-offset-{COLOR_NAME}
So you can use bg-primary
, border-secondary
, etc.
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!