Colori

Come usare i colori di daisyUI?

Introduzione

daisyUI è completamente personalizzabile nei temi e nei colori, quindi invece di usare classi di utility fisse come:

• bg-green-500
• bg-orange-600
• bg-blue-700
• etc.

È suggerito usare classi di utility dei colori semantiche come:

• bg-primary
• bg-secondary
• bg-accent
• etc.

Ogni nome di un colore contiene delle variabili CSS e ogni tema di daisyUI applica i valori dei colori alle classi di utility quando viene applicato.

Benefici

I colori con nomi semantici hanno maggior senso perché quando disegniamo delle interfacce non usiamo dei colori qualsiasi. Definiamo una paletta di colori specifici con nomi come primary, secondary, etc. e usiamo solo quei colori specifici nelle nostre interfacce. Inoltre, usare colori con nomi semantici facilita l'uso dei temi. Non dovresti definire i colori per la modalità scura per ogni singolo elemento e non dovresti essere limitato solamente ai temi chiaro/scuro. Puoi avere molteplici temi disponibili e ogni tema è solamente una manciata di variabili CSS.

Example of theming a div with hardcoded color values

Lista di tutti i nomi dei colori di daisyUI

Puoi usare questi nomi dei colori nel tuo tema o nelle classi di utility.

Come usare

Alcuni componenti di daisyUI mettono a disposizione delle classi modificatrici che applicheranno un colore. Per esempio: Oppure:

These components automatically set the correct background color, text color, border color, etc as needed so you don't need to set those colors manually. For examplebtn-primarysetsprimarycolor for background and border, and setsprimary-contentcolor for the text automatically as default. You can customize them using utility classes if you want to change the color.

Puoi inoltre usare i nomi dei colori nelle classi di utility proprio come con i nomi dei colori originali di Tailwind. Queste sono le classi di utility che possono essere usate con un nome di un colore:

CSS Class
bg-{COLOR_NAME}	Also available on CDN/colors/properties.css
text-{COLOR_NAME}	Also available on CDN/colors/properties.css
border-{COLOR_NAME}	Also available on CDN/colors/properties.css
from-{COLOR_NAME}	Also available on CDN/colors/properties-extended.css
via-{COLOR_NAME}	Also available on CDN/colors/properties-extended.css
to-{COLOR_NAME}	Also available on CDN/colors/properties-extended.css
ring-{COLOR_NAME}	Also available on CDN/colors/properties-extended.css
fill-{COLOR_NAME}	Also available on CDN/colors/properties-extended.css
stroke-{COLOR_NAME}	Also available on CDN/colors/properties-extended.css
shadow-{COLOR_NAME}	Also available on CDN/colors/properties-extended.css
outline-{COLOR_NAME}	Also available on CDN/colors/properties-extended.css
divide-{COLOR_NAME}
accent-{COLOR_NAME}
caret-{COLOR_NAME}
decoration-{COLOR_NAME}
placeholder-{COLOR_NAME}
ring-offset-{COLOR_NAME}

So you can usebg-primary,border-secondary, etc. Read more aboutdaisyUI color utility classes.

Color opacity and muted colors

base-contentis the text color of the page by default. It's a dark color on light themes and it's a light color on dark themes.

Sometimes we need a muted text. something with less contrast. The best way to do this is using Tailwind CSS color opacity modifier by adding a/50(or any other value) to the end of color name. Liketext-base-content/50

The advantage of using opacity is that it gives a constant result on all themes, for all colors.
You can use it with any opacity value, you can use it for any color. For example primary-content: