Color names

[TiagoNH]

Currently there are 3 primary color names, namely "primary", "primary-focus" and "primary-content".

Is there a way to extend it with more colors, like "primary-hover" for example?
The idea behind would be so that we could use more than 3 colors in our custom themes.

Thanks in advance :)

[saadeghi]

The best way is to extend Tailwind CSS color using CSS variables
and then define that variable value in daisyUI themes:

https://play.tailwindcss.com/zuwkjrS6yl?file=config

// tailwind.config.js
module.exports = {
  plugins: [require('daisyui')],
  theme: {
    extend: {
      colors: {
        'primary-cool': "hsl(var(--primary-cool) / <alpha-value>)",
      },
    },
  },
  daisyui: {
    themes: [
      {
        light: {
          ...require('daisyui/src/theming/themes')['[data-theme=light]'],
          '--primary-cool': '338 83% 66%',
        },
      },
      {
        cupcake: {
          ...require('daisyui/src/theming/themes')['[data-theme=cupcake]'],
          '--primary-cool': '38 83% 66%',
        },
      },
    ],
  },
}

Edit: updated example.

[KatiePup]

I second that! I've been trying to figure out this functionality for a while and his answer explained it perfectly

[saadeghi]

@rjruizes @KatiePup Sure.
I opened an issue for that: #717. Will be added soon

[thnee]

Thanks for posting this. I also found your blog post which has an even better explanation.

Is there any way to make it produce a series of lighter and darker color variations, including css classes with suffixes?

If using Tailwind with just one theme, then it's possible to use the colors object to create a custom color, as per this documentation.
For example, it's possible to define a color asdf, and then use it with classes like text-asdf-200, text-asdf-400.
But I cannot figure out how to achieve the same thing with DaisyUI themes?

What I would like to achieve is:

• Define custom color variable.
• Alternate the base value for the variable, per daisy theme.
• Be able to use it like any other color.

[saadeghi]

@thnee Can you please share a use case for this? Like a screenshot of a UI you want to recreate with daisyUI or a real-life example of UI that would need all those shades (100, 200, 300, ...900)

Tailwind CSS provides all those color shades because it's providing utility classes for every CSS rule. daisyUI however is giving you a color system which is a fundamental for a design system.

I'm working on a utility classes to dynamically make any color darker or lighter on runtime. However I hope something like this will be added in Tailwind CSS 4 officially:
https://play.tailwindcss.com/Sc2y78WVLY

[thnee]

Thank you so much for taking the time to reply!

I think the use case is fairly straight forward, it's the same use case as with the builtin colors:
It's common to use a different shade of a color for something like a menu.
For example, when not using themes, one might put bg-slate-100 on the body and bg-slate-200 on the main menu.
So when using themes, one might want to use bg-my-variable-100 and bg-my-variable-200.

Would be convenient if we could somehow re-use the builtin color definitions including shades, and generate custom colors with shades, while using daisyUI themes.

But otherwise, I guess it should be possible to use a library like chroma.js in the tailwind.config.js to generate something similar for the theme. Assuming that that works without any downsides, I guess there would be no need to add anything for this in daisyUI.

[ShaggyDude]

What do these color var names mean??
[data-theme=bumblebee] {
color-scheme: light;
--pf: 41 74% 42%;
--sf: 50 94% 46%;
--af: 240 33% 11%;
--nf: 240 33% 11%;
--b2: 0 0% 90%;
--b3: 0 0% 81%;
--in: 198 93% 60%;
--su: 158 64% 52%;
--wa: 43 96% 56%;
--er: 0 91% 71%;
--bc: 0 0% 20%;
--ac: 240 60% 83%;
--nc: 240 60% 83%;
--inc: 198 100% 12%;
--suc: 158 100% 10%;
--wac: 43 100% 11%;
--erc: 0 100% 14%;
--rounded-box: 1rem;
--rounded-btn: .5rem;
--rounded-badge: 1.9rem;
--animation-btn: .25s;
--animation-input: .2s;
--btn-text-case: uppercase;
--btn-focus-scale: .95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: .5rem;
--p: 41 74% 53%;
--pc: 240 33% 14%;
--s: 50 94% 58%;
--sc: 240 33% 14%;
--a: 240 33% 14%;
--n: 240 33% 14%;
--b1: 0 0% 100%;
}

Thanks,

[AutomateAaron]

@saadeghi What do you mean “unwanted and inaccessible variants” here? I, for example, wanted a btn btn-outline btn-accent-content for an outline button on top of the accent color, but that variant didn't exist, so I had to make it manually.

Wouldn't it be possible to do something like this? Where buttons are made for all colors (even non-daisyui colors like btn-red-500 etc.)

[saadeghi]

@saadeghi What do you mean “unwanted and inaccessible variants” here?

I mean this:

Buttons are currently using 3 colors. a color for background (for example primary) a color for the foreground/text color (for example primary-content) and a different shade of background color for hover (for example primary-focus) These 3 colors are defined in theme and you can make sure you get a proper contrast between background/foreground when you use theme.

Each Tailwind color name is only 1 constant color. red-600 is always a constant color, but btn-primary includes 3 colors for background, foreground and focus. If we user btn-red-600 how can we know if the text color has a proper contrast? and how can we control the hover color if you're just automatically using a + 100 darker shade for it?

Also, you can do anything with Tailwind colors, you can disable them, use your own color array, use a different step (100, 200, etc) or even use CSS variables. How can we be sure our automated function will always generate a good color combination if there's no limit?

Apart from that, the whole point of a design system is limiting your color palette and not using any color.

[AutomateAaron]

I do agree with semantic colors over any arbitrary color. However, different projects can require different numbers of semantic colors.

From a technical prospective, all that sounds solvable to me, Here's a demo that automatically chooses colors for focus and content: https://play.tailwindcss.com/y8XHFGBxJU?file=config

[saadeghi]

However, different projects can require different numbers of semantic colors.

@AaronNBrock I'm going to be honest with you. I have studied a lot of design systems and a lot of website UIs. I can assure you almost every one of them use maximum 1 or 2 brand colors, some use a third one as well. More than that doesn't really fit in a good design system to be honest.

Libraries like Bootstrap, Tailwind, MUI, etc. provide every shade of color just to allow developers use the colors if they want but that doesn't mean it's a good idea to use every shade of color in a UI.

If a developer doesn't want to follow a design system guideline and they want something like Valve did for Steam app (image) of course it is possible using Tailwind utility classes or applying multiple daisyUI themes to different sections of the page or even extending the button styles in CSS file or tailwind.config.js file. But that's not something daisyUI would want to provide by default. Not because it's not possible, because it's not a good idea to allow using every shade of color in a UI.
It is possible as a customization but it won't be in the library.

[AutomateAaron]

Hahaha ~ that steam photo is an absolute gem!

Anyway, I do agree that the color pallet DaisyUI provides is good for most cases. And I think the current color options are a good default, but I think the flexibility to pick more or less and rename colors would make daisy useful in more cases.

To go back to my original example, I wanted buttons colored as primary-content since it was a button on top of the primary color, but since btns are only manually made for the “main” colors it didn't exist.

Similarly, I think the ability to rename colors could also be useful. For example, I am working on a project where I'd like a base and a base-accent, but instead I'm using the base-300 as the accent. Which mostly works, but you can't configure a separate base-300-content which forced me to manually make some classes for that.

Furthermore, I know most designs use 1 or 2 brand colors, but even DaisyUI has a host of others, info/success/warning/error etc. It's not difficult to imagine situations where one might want colors for different categories of messages ~ or colors for btns w/ social icons to match the platforms, etc.

(edit: Another issue I just ran into ~ syntax highlighting requires a ton of colors!)

All to say, I really appreciate DaisyUI! I'm just hoping to improve it. :)

[silveltman]

Is it possible to assign the variable in hex format like this:
'--content-100': '#404040',

While still being able to set opacity?

[saadeghi]

I haven't tried hex opacity but generally this is how Tailwind CSS handles opacity of CSS variables:
https://tailwindcss.com/docs/customizing-colors#using-css-variables
We put opacity inside the color function and it's a 0.0 to 1.0 value so I don't think it would work for hex.

[iamsarthakjoshi]

Here's the official Blog article on this same. :)
https://daisyui.com/blog/how-to-add-new-colors-to-daisyui/

[levino]

Thank you. I can accept the answer. Does it have any downsides to use bg- instead of btn-? Thinking of hover states / disabled, etc.

It can't be automatic for a custom new color name you added.

To be honest, I think it is rather a question of the current implementation than of "possible or not". As I said, I am fine with the current situation. However, since you can generate matching text colors for any color I set for primary, it is in general possible to do this for any other color variable name. I guess it is rather an issue of making the code understand that my new custom variable is a "special" color variable for which the button classes should be created. So maybe one could extend the config with something like

{
  "daisyui": {
    "additionalColorNames": ["primary-muted"]
  }
}

and then these could be handled inside of the color generating code or something.

I am just thinking out loud here. As I said this is not a request a change in the software. This is merely to point out that since this is software, nothing is impossible.

[saadeghi]

Does it have any downsides to use bg- instead of btn-?

Currently the color modifier of button just set the background color, text color and border color. So you can safely set the color using a utility class and it will work the same way.

Just make sure the contrast between your foreground/background color is enough for the text to be readable.

[levino]

On another note: I checked my site with the auto-generated text color primary-content and google lighthouse says: Contrast too low. I am not going to argue here, but my designer has very strong opinions about this, so we had to set every -content color by hand...

[saadeghi]

What was the primary color?

[levino]

I will make reproduction and create a new discussion. It might take a while though.

[nnoromiv]

While searching for a solution to cross this border, I came across the top answer, but it didn't work for me. Instead, here's what worked:

Navigate to daisyui/src/theming/themes in node_modules where the colors are defined. Copy the colors from the desired theme you want to customize. Then, go to your tailwind.config.ts file and paste it as follows:

  daisyui: {
    themes: [
        {
          light: {
            ...require('daisyui/src/theming/themes')['[data-theme=light]'],
           // PASTE CODE HERE
          },
        },
        {
          dark: {
            ...require('daisyui/src/theming/themes')['[data-theme=dark]'],
               // PASTE CODE HERE
          }
        }
      
    ],
  },

Then you'd be able to easily customize theme color in my case

daisyui: {
  themes: [
      {
        light: {
          ...require('daisyui/src/theming/themes')['[data-theme=light]'],
          "primary": "rgb(200, 0, 0)",
          "secondary": "oklch(69.71% 0.329 342.55)",
          "secondary-content": "oklch(98.71% 0.0106 342.55)",
          "accent": "oklch(76.76% 0.184 183.61)",
          "neutral": "#2B3440",
          "neutral-content": "#D7DDE4",
          "base-100": "oklch(100% 0 0)",
          "base-200": "#F2F2F2",
          "base-300": "#E5E6E6",
          "base-content": "#1f2937",
        },
      },
      {
        dark: {
          ...require('daisyui/src/theming/themes')['[data-theme=dark]'],
          "primary": "rgb(200, 0, 0)",
          "secondary": "oklch(74.8% 0.26 342.55)",
          "accent": "oklch(74.51% 0.167 183.61)",
          "neutral": "#2a323c",
          "neutral-content": "#A6ADBB",
          "base-100": "#1d232a",
          "base-200": "#191e24",
          "base-300": "#15191e",
          "base-content": "#A6ADBB",
        }
      }
    
  ],
},

The primary color has been modified