Multiple color palettes across site

[joeyjurjens]

Hello,

Bootstrap(5) has a color system, these can be modified by scss but also by css. Bootstrap components then use those colors to try and "fit" in.

I'm trying to have multiple color palettes on my site, and I have something like this;

@if $palettes {
    @each $palette-pk, $palette in $palettes {
        .color-palette-#{$palette-pk} {
            $colors: map-get($palette, colors);

            @if $colors {
                $palette-background: map-get($colors, background);
                $palette-text: map-get($colors, text);
                $palette-links: map-get($colors, links);
                $palette-icons: map-get($colors, icons);
                $palette-primary: map-get($colors, primary);
                $palette-primary-text: map-get($colors, primary_text);
                $palette-primary-border: map-get($colors, primary_border);
                $palette-secondary: map-get($colors, secondary);
                $palette-secondary-text: map-get($colors, secondary_text);
                $palette-secondary-border: map-get($colors, secondary_border);
            }
        }
    }
}

I'm trying to come up with a solutin, when a class like;

.color-palette-1 {

}

Is on a div, to set colors like primary & secondary (but also BG, text color) and components would then "read' those values, rather than the ones in :root.

For example, I have one "default" color palette in my site, which is applied like how you normally do so

$primary: $theme-primary;
$secondary: $theme-secondary;
$success: map-get($theme-semantic-colors, success);
$info: map-get($theme-semantic-colors, info);
$warning: map-get($theme-semantic-colors, warning);
$danger: map-get($theme-semantic-colors, danger);
$body-bg: map-get($theme-palette-roles, background);
$body-color: map-get($theme-palette-roles, text);
$link-color: map-get($theme-palette-roles, links);

This works fine, components inherit this correctly which is as expected.

But I'm looking for a way to make components work based on the color palette class, without having to manually set ALL those possible css classes, but rather being able to just set some colors like above.

Is this possible?

[mcortezv]

Yes, it’s possible. You just need to use CSS variables (--bs-*) instead of SCSS variables ($primary) and scope them inside your palette class. For example:

.color-palette-1 {
  --bs-primary: #ff5733;
  --bs-secondary: #33c1ff;
  --bs-body-bg: #f8f9fa;
  --bs-body-color: #212529;
  --bs-link-color: #ff5733;
}

Then, any Bootstrap component inside .color-palette-1 will automatically use these colors without manually redefining all classes. Your SCSS loop can dynamically generate these variables from your palette map.

[joeyjurjens]

Yes, it’s possible. You just need to use CSS variables (--bs-*) instead of SCSS variables ($primary) and scope them inside your palette class. For example:

.color-palette-1 {

  --bs-primary: #ff5733;

  --bs-secondary: #33c1ff;

  --bs-body-bg: #f8f9fa;

  --bs-body-color: #212529;

  --bs-link-color: #ff5733;

}

Then, any Bootstrap component inside .color-palette-1 will automatically use these colors without manually redefining all classes. Your SCSS loop can dynamically generate these variables from your palette map.

Okay. That's cool. But what about about things like this;

https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#L1383

As the -subtle colors are generated with scss right? So even if I set primary css variable, variants on these won't work I guess?

Edit:

I just tried your solution as following;

@if $palettes {
    @each $palette-pk, $palette in $palettes {
        .color-palette-#{$palette-pk} {
            $colors: map-get($palette, colors);

            @if $colors {
                $palette-background: map-get($colors, background);
                $palette-text: map-get($colors, text);
                $palette-links: map-get($colors, links);
                $palette-icons: map-get($colors, icons);
                $palette-primary: map-get($colors, primary);
                $palette-primary-text: map-get($colors, primary_text);
                $palette-primary-border: map-get($colors, primary_border);
                $palette-secondary: map-get($colors, secondary);
                $palette-secondary-text: map-get($colors, secondary_text);
                $palette-secondary-border: map-get($colors, secondary_border);

                @if $palette-background {
                    --bs-body-bg: $palette-background;
                }
                @if $palette-text {
                    --bs-body-color: $palette-text;
                }

                @if $palette-primary {
                    --bs-primary: $palette-primary;
                }

                @if $palette-secondary {
                    --bs-secondary: $palette-secondary;
                }

                $link-color: if($palette-links, $palette-links, $palette-primary);
                --bs-link-color: $link-color;
            }
        }
    }
}

And some of it works, however, for example a primary button does not take the color from:

--bs-primary: $palette-primary;

I takes the one which is set as the default one (which I compiled with scss). Same for my accordion, the header by default is being generated from the primary color, and then a subtle version. So when setting the css variables you mentioned above doesn't really seem to have effect on components. I would likely need to manually set those css variables for all those components, which is quite some work, thought it would be fine if there would be a list documented for all the sort of colors which can be set. Then it'd be a bit easier.

But maybe I'm not doing something fully correct?

[joeyjurjens]

@mcortezv Any suggestions for above?