0

I have a Bootstrap 5 application that consumes a bunch of web components and all of the components use Bootstrap 5. I need to customize the theme on the fly inside of the parent that consumes all of these web components. My basic structure is like this:

<div>
  <div>I'm the wrapper around many web components</div>
  <abc-comp />
  <xyz-comp />
</div>

I would like to be able to pierce the shadow DOM of abc-comp and xyz-comp by setting Bootstrap's variables in the consumer.

I see that Bootstrap 5 has CSS variables so I am trying to override those variables by setting them in my own CSS :root styling like this:

:root {
  --bs-primary: tomato;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<button class="btn btn-primary">
  Why is my color not tomato?
</button>

How can I set Bootstrap's CSS variables in my own stylesheets where I consume many web components that all have bootstrap as a dependency?

maxshuty
  • 9,708
  • 13
  • 64
  • 77

3 Answers3

3

The version of Bootstrap you are using apparently doesn't support customization via custom variables. At least for customization of button colors. Try using v. 5.2 which is beta for now: https://getbootstrap.com/docs/5.2/getting-started/introduction/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />

<style>
.btn-primary {
  --bs-btn-bg: tomato;
  --bs-btn-border-color: tomato;
}
</style>

<button class="btn btn-primary">
 I like tomato!
</button>
alex
  • 76
  • 2
0

I'm not sure if it helps... But you can edit the sass file inside the bootstrap folder that it's on your node_module folder.

They have there lots of variables and you can add your styles the standard.

Your colors, for example.

Pedro Elton
  • 36
  • 1
  • 5
  • Thanks, however, I need to be able to _override_ the defaults and change them on the fly. I still want the default colors to stay. – maxshuty May 10 '22 at 14:04
  • In this case, I would use it with the CDN, and your css would have priority. – Pedro Elton May 10 '22 at 14:13
  • This post might help as well https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles – Pedro Elton May 10 '22 at 14:13
  • how can I override it with the fiddle I provided in the question? That is using a CDN and I cannot override the bootstrap variables – maxshuty May 10 '22 at 14:19
0

This is basically a duplicate of Bootstrap: setting custom colors

The :root CSS variables are read-only and can't be changed at "runtime". The only way to do what you want is to re-define the CSS variable using SASS

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Based on reading [your answer here](https://stackoverflow.com/a/50253707/4826740) and [here](https://stackoverflow.com/a/50973207/4826740) it seems like the way that this could be done and still pierce the shadow DOM would be to create _my own_ theme variables outside of the shadow DOM and then before I import bootstrap but after I've imported the necessary bootstrap files like `variables` and `functions` I could do something like `$theme-colors: (primary: --theme-primary;);` where `--theme-primary` is set in my own `:root` right? – maxshuty May 10 '22 at 17:21