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

Question

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

alex · Accepted Answer · 2022-05-17 13:00:52Z

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/[email protected]/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>

answered May 17, 2022 at 13:00

alex

862 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oleg Antonyan Over a year ago

Is there a way to set primary color globally on root this way? :root { --bs-primary: #274E13 } doesn't work

Pedro Elton · Accepted Answer · 2022-05-10 13:58:12Z

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.

answered May 10, 2022 at 13:58

Pedro Elton

461 silver badge5 bronze badges

4 Comments

maxshuty Over a year ago

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.

Pedro Elton Over a year ago

In this case, I would use it with the CDN, and your css would have priority.

Pedro Elton Over a year ago

This post might help as well stackoverflow.com/questions/20721248/…

maxshuty Over a year ago

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

Carol Skelly · Accepted Answer · 2022-05-11 13:44:22Z

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

edited May 11, 2022 at 13:44

answered May 10, 2022 at 16:28

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

1 Comment

maxshuty Over a year ago

Based on reading your answer here and here 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?

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related