how to simply have a dark variable for --box-shadow

[jipexu]

Hi
as it seems that box-shadow are not consider in the data-bs-them dark and light, how to simply (after compilation) add/modify (in an extra css) those variables to meet the system of them ?
Is this planned to include this variable in the dark/light them system in future ?
Thanks for your light or dark answer !

[julien-deramond]

Hi @jipexu,

I'll try to bring some first answers, but they are partial and could help or not depending on your use cases.

The first thing that is customizable from outside is the CSS variables linked to the box shadows, you could for instance do something like that to have red shadows in light mode and green in dark mode:

:root {
  --bs-box-shadow: 0 .5rem 1rem rgba(255, 0, 0, .15);
  --bs-box-shadow-sm: 0 .125rem .25rem rgba(255, 0, 0, .075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(255, 0, 0, .175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(255, 0, 0, .075);
}

[data-bs-theme="dark"] {
  --bs-box-shadow: 0 .5rem 1rem rgba(0, 255, 0, .15);
  --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 255, 0, .075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 255, 0, .175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 255, 0, .075);
}

It would for instance change the rendering of the Shadow utilities.

However, for the components, most are rendering shadows only if Bootstrap has been compiled with $enable-shadows: true (which is not the default value).

Enables predefined decorative box-shadow styles on various components. Does not affect box-shadows used for focus states.

So, if it's compiled like that, some components will have their colored shadows automatically. Otherwise, they won't have shadows.

For these cases, and other components whose are not linked directly to these CSS variables, I'm afraid that you'll need to override the CSS yourself.

Is this planned to include this variable in the dark/light them system in future ?

For now, I don't think anything is planned especially for this.

[jipexu]

@julien-deramond
many thank for the answer this way works perfectly ...

Howewer in my opinion this particular variable(s), this shadow , should be integrated into the dark/light system because it too is either dark or light... and therefore perfectly necessary ...

[julien-deramond]

Yes, we'll keep that in mind for the next versions, thank you for your feedback @jipexu
It might be related to #39053 at some point too