How can I set Bootstrap 5's CSS variables using :root?-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<button >
  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?

CodePudding user response：

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.

CodePudding user response：

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