bug: Improve base themes

[thewh1teagle]

What version of daisyUI are you using?

4.4.19

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://github.com/saadeghi/daisyui

Describe your issue

I believe that the library needs a major improvement in the base theme design (light/dark). Some colors lack proper contrast, and there are several other design issues, especially in the dark mode.

[github-actions[bot]]

Thank you @thewh1teagle for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

Can you please explain more?

Some colors

Which colors exactly?

several other design issues

Where?

[thewh1teagle]

All of these elements have bad contrast of colors And there's many more

too low

Close button bad contrast https://daisyui.com/components/card/#card-with-action-on-top

In general too much gray.

[thewh1teagle]

Everything in the default dark theme, I think that the chosen background color can be much better. I would take inspiration from MUI dark design https://mui.com/

[saadeghi]

All color pairs (background vs foreground) pass the accessibility test with a minimum contrast of 3:1
https://github.com/saadeghi/daisyui/actions/runs/7059175781/job/19216234352#step:6:101

You can use browser devtools on a button for example and it shows you that it passes WCAG accessibility contrast.

I'm not sure how do you measure the "bad contrast" you mentioned. If it's just your personal opinion, you can customize any theme or make your own theme easily.

You can even take MUI colors and make a daisyUI theme with them in less than a minute.

daisyUI provides 32 themes to choose from and there's also an easy API to make a custom theme. No other library does this so I'm not sure how I can provide more customizability with colors 😄

Let me know if you have a question.

[thewh1teagle]

[thewh1teagle]

[saadeghi]

Are you comparing the background color with background color? 🙃

[thewh1teagle]

I'm not sure if it's a problem or not, anyway I checked a lot of components, and you right most of them pass the checks.

I don't know what, but something in the dark design of daisyUI bother me, it doesn't matter which theme I use. I think it's the contrast between the buttons, but I'm not sure how can I control it in theme level, For example look at this button of MUI:

DaisyUI primary button: It doesn't look and feel primary. how can I make it more brighter in dark mode?

[thewh1teagle]

https://daisyui.com/components/stat/#with-custom-colors-and-button

[thewh1teagle]

If you think this feedback doesn't help much at this point, let me know, and I will stop.

[saadeghi]

how can I make it more brighter in dark mode?

How to customize an existing theme?

Example: https://play.tailwindcss.com/gRB5tLIDKW?file=config

[saadeghi]

https://daisyui.com/components/stat/#with-custom-colors-and-button

This is an issue 👍 Not from the daisyUI component itself, but from the custom colors I used for the example about using custom colors. I will fix it today.

[saadeghi]

I don't know what, but something in the dark design of daisyUI bother me

It's not "dark design of daisyUI"
daisyUI is the component library. Components are unopinionated about color values (they use semantic colors like primary, secondary, etc)

daisyUI built-in themes on the other hand are opinionated color palettes. There are 32 built-in themes where you can choose them if you like them, or you can make a custom theme and customize colors (every single color is customizable). [Docs]

[saadeghi]

If you think this feedback doesn't help much at this point, let me know, and I will stop.

Not at all. I really appreciate feedbacks.
However I think you didn't try to customize the colors at all. I understand that the built-in themes can not satisfy everyone (no matter how many themes we provide) That's why all colors are customizable and it's possible to make custom theme with custom colors.

[thewh1teagle]

So I made MUI theme for daisyUI (at least most of the colors I took from MUI website) both dark and light themes. Maybe I / you can Imrprove it and add it to the available themes https://play.tailwindcss.com/wrf7eO0Jf5 mui pallette