Using dynamic CSS variables broke some of Bootstrap themes

Question

Using Angular / Bootstrap, I changed CSS variables at runtime, using this line of code :

document.documentElement.style.setProperty(`--${property.name}`, property.value);

for reference, i used this example to deal with bootstrap SCSS imports : https://blog.wick.technology/runtime-dynamic-bootstrap-theme/

It does work, but some of Bootstrap' styles in bootstrap are broken :

I guess that's because the calc function does not support my dynamic vars :

.btn-primary {
    color: hsla(0, 0%, calc(-100 * calc(var(--primary-l) - 58.59375%)), 1);
    background-color: var(--primary);
    border-color: var(--primary);
}

Is there any way that I can fix this behaviour ? Can I overload a new definition of btn-primary ?

Salahuddin Ahmed · Accepted Answer · 2021-08-08 05:17:28Z

0

I'm not sure if you already solved your problem or not, but I had the same problem and I feel like I solved it.

I basically decided to create the variables "${variable}-h",${variable}-s", ${variable}-l", which are calculated at runtime when defining the variable, converting the RGB color to the different HSL color components.

edited Aug 8, 2021 at 5:17

Salahuddin Ahmed

5,7344 gold badges20 silver badges40 bronze badges

answered Aug 6, 2021 at 16:47

afd.rodrigues

11 bronze badge

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

Collectives™ on Stack Overflow

Using dynamic CSS variables broke some of Bootstrap themes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related