Theming Bootstrap(4) Using CSS Vars in SCSS-CodePudding

I'm trying to implement Bootstrap on a site where the user can dynamically change the colour scheme.
I've done this using CSS vars, following this guide.
It generally works, but when anything uses the lighten or darken functions (alerts for example) it doesn't work.

The CSS vars are declared in the head of the HTML like so;

<style type="text/css">
:root {
    --primary: #3490dc;
    --primary-h: 207;
    --primary-s: 71%;
    --primary-l: 53%;
    --primary-a: 1;
    --secondary: #6c757d;
    --secondary-h: 207;
    --secondary-s: 71%;
    --secondary-l: 53%;
    --secondary-a: 1;
    --success: hsl(207, 71%, 53%);
    --success-h: 207;
    --success-s: 71%;
    --success-l: 53%;
    --success-a: 1;
    --info: #17a2b8;
    --info-h: 188;
    --info-s: 78%;
    --info-l: 41%;
    --info-a: 1;
    --warning: #ffc107;
    --warning-h: 188;
    --warning-s: 78%;
    --warning-l: 41%;
    --warning-a: 1;
    --danger: #dc3545;
    --danger-h: 188;
    --danger-s: 78%;
    --danger-l: 41%;
    --danger-a: 1;
    --light: #f8f9fa;
    --light-h: 188;
    --light-s: 78%;
    --light-l: 41%;
    --light-a: 1;
    --dark: #343a40;
    --dark-h: 188;
    --dark-s: 78%;
    --dark-l: 41%;
    --dark-a: 1;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace;
}
</style>

When I inspect the alert element the console is showing;

.alert-success {
    color: hsla(calc((
0deg   var(--success-h)) / 2), calc((0%   var(--success-s)) / 2), calc((0%   var(--success-l)) / 2), calc((1   var(--success-a, 1)) / 2));
    background-color: hsla(calc((
0deg   var(--success-h)) / 2), calc((0%   var(--success-s)) / 2), calc((100%   var(--success-l)) / 2), calc((1   var(--success-a, 1)) / 2));
    border-color: hsla(calc((
0deg   var(--success-h)) / 2), calc((0%   var(--success-s)) / 2), calc((100%   var(--success-l)) / 2), calc((1   var(--success-a, 1)) / 2));
}

But the computed it showing;

background-color: rgba(0, 0, 0, 0)

Hence no colour on the alert background.

CodePudding user response：

I'm not sure about the 0deg stuff.

However. i managed to get it to work if i replace 0deg with just 0.

.alert-success {
    color: hsla(calc((
0   var(--success-h)) / 2), calc((0%   var(--success-s)) / 2), calc((0%   var(--success-l)) / 2), calc((1   var(--success-a, 1)) / 2));
    background-color: hsla(calc((
0   var(--success-h)) / 2), calc((0%   var(--success-s)) / 2), calc((100%   var(--success-l)) / 2), calc((1   var(--success-a, 1)) / 2));
    border-color: hsla(calc((
0   var(--success-h)) / 2), calc((0%   var(--success-s)) / 2), calc((100%   var(--success-l)) / 2), calc((1   var(--success-a, 1)) / 2));
}

CodePudding user response：

So you do actually want to keep the deg. Rather than removing that from Bootstrap, you just need to update your variable to include the same deg units as well.

As your code stands now, you are adding 0deg 207, but you should be adding 0deg 207deg. Adding these units will cause your styles to start working properly.

As a rule of thumb, all of your styles should include their appropriate units, matching what Bootstrap already has in place:

:root {
  --success-h: 207deg;
  --success-s: 71%;
  --success-l: 53%;
  --success-a: 1;
}

The only other call-out I'd make is that for your opacity value, you are currently adding 1 1 which results in an opacity of 2, which exceeds the cap of 1 by 100%.

If you are adding 1 your variable value simply as a fall-back in case the value doesn't exist, you may want to consider using default values. Your code in its current state would require a negative opacity value (e.g. -.5) to make a color translucent. If you would prefer to use 1 as a fallback value for when the variable doesn't exist, you can do so by putting the default value after a comma in your variable reference like this:

.alert-success {
  color: hsla(calc(var(--success-h, 0deg) / 2), calc(var(--success-s, 0%) / 2), calc(var(--success-l, 0%) / 2), calc(var(--success-a, 1) / 2));
  background-color: hsla(calc(var(--success-h, 0deg) / 2), calc(var(--success-s, 0%) / 2), calc(var(--success-l, 100%) / 2), calc(var(--success-a, 1) / 2));
  border-color: hsla(calc(var(--success-h, 0deg) / 2), calc(var(--success-s, 0%) / 2), calc(var(--success-l, 100%) / 2), calc(var(--success-a, 1) / 2));
}

If all your additions were intentional, simply disregard this last bit.