How to deal with background colors?

[saadeghi]

From X:
https://twitter.com/alexeistrasser/status/1745028481035940004

I'm wondering: How do you conceptually deal with creating contrast between backgrounds of the same nature like between a card (with default bg-base-100) and your base background (also bg-base-100)?

A shadow alone, especially in dark mode, is barely visible and seems insufficient.

I tend towards creating a bg-white (light) and bg-black (dark) - or let's call them bg-base-0 - to have some room to play between base page background (bg-base-100) and base content backgrounds (bg-base-0).

My main question is whether my general thinking is conceptually right. 😊

[saadeghi]

A good practice is to have a consistent darkening among dark and light themes.

• So if light theme shows white card on a light gray background, dark theme should show dark gray card on black.
• Or if light theme shows light gray card on a white background, dark theme should show black card on dark gray.

See this 👇 good screenshot from an example on Tailwind CSS website and how good it looks when the card is lightened on both light and dark mode. Most UIs don't bother about this detail and they just invert the color which won't look good because on one theme, your card is darker and on the other theme it's suddenly lighter…

This practice is included in daisyUI themes. For example, in both dark and light themes, base-100 is brighter and base-300 is darker

Example with cards: https://play.tailwindcss.com/0E5PhruZnX

How do you conceptually deal with creating contrast between backgrounds of the same nature like between a card (with default bg-base-100) and your base background (also bg-base-100)?

card class doesn't come with a background color by default. There's an additional bg-base-100 used alongside card class in the examples but you can use another color for it if needed (or you can even remove it and the card will be transparent).

For example, you can set bg-base-100 for the background of page and bg-base-200 or bg-base-300 for the card, which makes it darker than background.
Or you can set bg-base-200 or bg-base-300 for the background of page and bg-base-100 for the card, whcih makes it lighter than background.

daisyUI doesn't have any opinions about box shadows either, so you can use Tailwind CSS shadow utility classes. They are black by default, but you can use other colors (you can use daisyUI colors as well: shadow-primary, etc)

Of course if the background is really dark, the default black shadow wont' be visible. You can change the box shadow color of course, but I would suggest to keep it black because shadows are supposed to be dark. If it's light shadow on a dark background, it's not shadow. It's a glow.
Example: : https://play.tailwindcss.com/yGQE0o3yz8

Avid using absolute color values like bg-white and bg-black with daisyUI because bg-white will be white on both dark and light theme and that's not something you would want (usually)

Use bg-base-100 or bg-base-200 or bg-base-300

You can also add a new color name to daisyUI if needed. For example base-400 (or anything):
https://daisyui.com/blog/how-to-add-new-colors-to-daisyui/

Let me know if you have a question.

[saadeghi]

No problem. I'd be happy to help.
Can you give me a screenshot or a demo of what you're trying to achieve with a full palette?

[thiagomajesk]

Hi! Thanks so much. I don't have a screenshot that I can share, but I'm using the material design documentation as a reference: https://m3.material.io/styles/elevation/overview. I think this is related to your previous statement about having consistent darkening/ lightening to display elevation, which I 100% agree with.

Let's say you have your page set to bg-base-300, a form set to bg-base-200 and you have a specific section inside the form set to bg-base-100. For complex forms that have a lot of nesting or sub-components, you might need additional colors to properly display the hierarchy. The example I can come up with ATM is a silly one: https://play.tailwindcss.com/CisJWlTo4J.

I'm able to get around the current "limitation" by doing two things:

• Defining a custom --background-content variable for the background which frees the three levels of base-* to be used elsewhere. However, this makes the styling incompatible with DaisyUI default themes that don't have that variable.
• The other trick is to use opacity on some base-* so you get additional levels without having to add custom colors

---

In my case, for dark mode, I'm starting from dark to light, which makes it trickier considering that the darkest available color "level" is capped at 300. If I were going from light to dark, I could add additional colors at the end (at the expense of making theming incompatible) - since the palette increases light by default.

Additionally, I also think this might be a bit conceptual on how theme configurations are handled. For instance, instead of having something like base-100 , base-200, base-300 that consistently goes from light to dark, it might be more useful to break with the idea of a color palette and have base-1 , base-2, base-3 (as in levels) where in light themes it goes from light to dark and in dark themes it goes from dark to light (so you don't have to change how the classes are used).

This is a bit tricky and I honestly don't have an answer, but I saw a couple of nice tricks online where opacity is used as an elegant way to solve elevation issues (I'm not sure how much of this you can apply to DaisyUI, but I'm sharing just in case):

• https://x.com/romanshamin_en/status/1808902118268432488
• https://x.com/AdhamDannaway/status/1704156491949691083

[saadeghi]

Thanks for the details and for the link, but I need a real life example. because this is not a realistic UI, in fact, if you ask me, if you ever needed to use this many level's of elevations in one page, there's something wrong with the UI.

Tailwind CSS (or Material or any general purpose library) provides all possible colors with all possible lightness values, but daisyUI aims to provide you a practical set of color names that you would need to use in one project. It's not about being able to use any number of elevations, it's about being able to use as the right amount of elevations.

Adham Dannaway's example image is actually very similar to what daisyUI provides. base-100, base-200, base-300, get darker in light theme, with the same order they get darker in a dark theme.

You can use color opacity to get any level of elevation the way Roman Shamin showed as an experiment
Example: https://play.tailwindcss.com/0S8IML7sIY
But even this is not realistic. You would never need this many levels of elevations in one page. the only scenario I can think of would be if you put 10 cards inside each other (which is not a good decision in any situation)

Let me know if there's a real life UI scenario where using these many elevations on the same page is required, because, I'm sure there's a better way to design that page 🤠

[thiagomajesk]

Hi @saadeghi! I agree with you, realistically speaking you wouldn't need that many levels, but it might still be useful for when you do. It's true that for the majority of use cases, just three levels might be enough, but it also seems kinda arbitrary, so where do we draw the line exactly?

You can use color opacity to get any level of elevation the way Roman Shamin showed as an experiment
Example: https://play.tailwindcss.com/0S8IML7sIY

This is actually a beautiful example, thanks! I'll give it a try. I know this is kinda controversial, but have you tried this with DaisyUI so we get automatic elevation for every component?

But even this is not realistic. You would never need this many levels of elevations in one page. the only scenario I can think of would be if you put 10 cards inside each other (which is not a good decision in any situation)

10 cards inside each other might not be realistic (that's why I mentioned it was a silly example), but 4 or 5 might. Today you only get three or four levels depending on whether you use a separate background color for the page or not, which goes back to my point: where do we draw the line? I get that DaisyUI is opinionated, and I can extend the themes, but the default experience seems too restrictive (the UI being optimal or not 😅) .

[saadeghi]

have you tried this with DaisyUI so we get automatic elevation for every component?

It's not an engineering decision, it's a design decision.
In the code we may have 10 divs inside each other, but do we want them to automatically have a darker color in the UI each time there's a div in a div? 😅

where do we draw the line?

I decided at 3 (base-100, base-200, base-300). Not as a random number, but after reviewing thousands of UI designs, and based my years of experience in designing and developing websites, as a freelancer and as a startup founder.

Right now you can check any UI available on the internet. All the good ones have 3 darkness levels for background color at max. If you ever need a 4th level of darkness for a background color, it's either a really specific piece of UI, or it's not a good UI decision.

The same argument applies about the limitation of brand colors (primary, secondary, accent). What if some day a website needs a 4th brand color? If you ask me, it's probably not a good decision to use 4 brand colors in a UI in the first place (I'm not talking about logo or branding/marketing graphics. Only UI)

but the default experience seems too restrictive

Yes, and it should be. The same way a professional designer limits themselves to a specific color palette in the beginning of the design project.
Are they free to use 50 colors in one UI? Yes. Should they do it? No 😁

[alexeigs]

Thanks for this in-depth answer, much appreciated. Conceptually it all makes sense to me. So I guess in the example of the cards, and in line with also the tailwind example, I could do something like the following, which then would also align with the dev experience daisyUI wants to create, right?

Either calling it base-100-lighter or base-100-focus or something...

 themes: [
      {
        cupcake: {
          ...themes['cupcake'],
          success: '#4ade80',
          error: '#f87171',
          // base-100: 0.977882 0.00418 56.3756
          // L + 0.01
          '--base-100-lighter': '0.98882 0.00418 56.3756',
        },
        dim: {
          ...themes['dim'],
          // base-100: 0.308577 0.023243 264.15
          // L + 0.02
          '--base-100-lighter': '0.328577 0.023243 264.15',
        },
      },
    ],

[saadeghi]

Yes, that would work.

I would call it base-50

Let me know if you have a question.