I am writing a card game based webapp with DaisyUI. I have an element which is a button that lets you cycle through suits:
Depending on the suit, the element can be either red or black. How can I make it so that the red is a colour that I can configure based on the theme (e.g. make it less saturated in the dark theme) without using primary/secondary/accent whose actual colour may not be red depending on the theme.
I tried to add a custom colour red to my custom theme but it did not recognize it as a class text-red:
@plugin "./daisy/daisyui-theme.js" {
name: "mytheme";
default: true;
prefersdark: false;
color-scheme: light;
/* ... */
--color-red: #ff3434;
/* ... /*
}
Answer
Why are you configuring it in DaisyUI? Simply define the new color using the TailwindCSS @theme directive.
@theme {
--color-red: #ff3434;
}
Which you can later customize in different themes as follows:
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@custom-variant mytheme (&:where([data-theme=mytheme], [data-theme=mytheme] *));
@theme {
--color-red: #ff3434;
}
@layer theme {
:root, :host {
@variant dark {
--color-red: #a32828;
}
@variant mytheme {
--color-red: #cc0202;
}
}
}
Related: