Bootstrap has too much colors. We need only one.

[AucT]

v5.3 is going in right direction and I think we should make some rapid change, so bootstrap could be customized without any of sass generation with new css hsl functions.

I think this is important topic to discuss for v6 version

My idea is to make 1 changeble color.
For example, you change in css
:root {--bs-primary: #123123}
and everything should change

I think we should lean towards more dynamic coloring with the least powerful tool (css).

I really like how material design make it. You give 1 color and android make 13 colors from it.
https://m3.material.io/styles/color/the-color-system/key-colors-tones

discuss

[yugabe]

I had a similar idea, but I need to configure (exactly) two brand colors.

A major issue I have with 5.3.0 is that just to configure ONE color to be primary, now I have to override it at tons of places. It's a joke. Even the $primary-text variable references $blue instead of $primary. So I have to comb through the source and override everything myself? Bootstrap was supposed to be configurable. Now good luck if someone wants to change the colors without messing it up and leaving some colors as they were, because it's implemented very badly.

They should've pivoted to using CSS variables instead of putting in even more unusable SCSS variables.

Oh, and I already had a dark mode with 5.2 implemented myself, manually. It was a lot more robust than whatever 5.3 is trying. 5.3.0 seriously made me consider switching the whole UI framework for something else.

Edit: And I almost forgot, modifying JUST the primary color for light and dark modes now is a joke. I won't even consider how unintuitive and hacky it is to even add another theme color to the color maps, everything will get messed up.

[AucT]

Yup, to recolor primary color I change $blue.

sometimes wanna scream to bootstrap authors https://www.youtube.com/watch?v=3tmd-ClpJxA

[yugabe]

I thought about that too... it hurts.

Also, now trying to position "secondary" as something other than most EVERYONE used it for (you know, a secondary color, of which "gray" isn't)... I'm not sure I'm excited for what the future brings here.

[AucT]

I've created discussion to add LightDark and DarkLight buttons #37885

Not sure if it what you want, but I think it is very important to have this.

Also I remember I really liked btn-default https://getbootstrap.com/docs/3.4/css/#buttons

[mdo]

Regarding generating an entire palette from one color, I don’t think we’ll ever do that ourselves. Not our style or approach with what we’re doing in Bootstrap.

But in regards to variables and customizations, that’s definitely something to improve. With v5.3.0, we’re trying to balance adding color mode support in v5, using more CSS variables, and still supporting a Sass based approach. The intention is to give even more customization options without the need for Sass, but that’s a little difficult given lack of browser support for color manipulation (e.g., lighten or darken that background-color 10% based on a foreground color).

The new color mode responsive utilities in v5.3.0 are also meant to paint a picture of what future updates to the theming and utilities will look like in v6, which we want to get onto next after v5.3.0 goes stable. We want core theme colors ($theme-colors) that aren’t necessarily tied to minimum color contrast as text again white background (e.g., green, teal, yellow, etc could all be better defaults if they didn’t have to be used as body text colors). And from those colors, we want more subtle options. The downside here is that Sass never allows for variable generation, so we can’t make more Sass variables without writing them ourselves. I digress though, lots of little challenges and always more we can do :).

Feel free to keep sharing ideas here, we’d love to hear them!

[yugabe]

Thanks for the reply (I'm not the OP), great to hear you're aware of possible improvements. I opened an issue outlining my current problem regarding how variables are defined: #37949.

I think it would be great to extend the $theme-colors, which is currently possible, and kind-of supported, but it's usually not straightforward. I started using "var-var" variables in my project. You could consider doing something of the like in Bootstrap:

$primary-var: var(--bs-primary); // or interpolate with $prefix

The issue with SCSS variables is that if you use them in some (any?) places, overriding the corresponding CSS variable will do nothing. A different approach might be if you only used "var-var" variables as above, and users wouldn't have to redefine them, simply overriding the CSS variables at :root would suffice.