Customizing Variables Based on Custom Colors

[Marctoz]

Related to https://github.com/orgs/twbs/discussions/39551 but I think different enough.
I'd really like to be able to customize named colors ($primary, $secondary, etc) based on the selected theme with data-bs-theme. It seems as though re-defining a named variable inside a [data-bs-theme="custom"] does nothing, but defining it outside of that works fine for me.

Is there a way to have different values of named colors like $primary or other variables depending on the current data-bs-theme attribute or is that not yet possible in 5.3.3?
If not, is my only option to manually override a ton of styles like background-color in .btn-primary and other components that would be based on $primary?

Thanks!

Example code:

// $primary: limegreen; // Works great if commented in.

[data-bs-theme="custom"] {
    // Arbitrary colors for testing -- None of these variables do anything to change buttons across the website.
    --bs-primary: #ff0000;
    --bs-secondary: #0000ff;

    --bs-primary-color: #ffd800;
    --bs-secondary-color: #b6ff00;
    
    $blue: var(--bs-btn-bg);
    $primary: #ff69b4;
    $secondary: var(--bs-primary);
     // likewise other variables like $link-decoration don't matter if defined in here
	
    // Class overrides that works fine but are tedious
    .btn-info {
        background-color: var(--bs-white);
    }

    .input-group-text {
        background-color: #333
    }
}

[benabraham]

There’s a misunderstanding of how Sass variables work in general (not only with Bootstrap).

When you define Sass variables like $primary, $secondary, or $blue inside a CSS selector or pseudo-selector like [data-bs-theme="custom"], these variables are locally scoped. This means they won't be available outside those { }.

This works because $primary is defined locally but at the same place

selectorA {
    $primary: #ff69b4;
    color: $primary;
}

This works too because $primary is defined globally and is available everywhere

$primary: #ff69b4;
selectorA {
    color: $primary;
}

This doesn’t work because $primary is not defined in the scope (inside the same { }) nor globally.

selectorA {
    $primary: #ff69b4;
    color: $primary;
}
selectorB {
    background-color: $primary;
}

And this doesn’t work for the same reason.

selectorA {
    $primary: #ff69b4;
    color: $primary;
}
selectorA {
    background-color: $primary;
}

This is different from CSS custom properties (“variables”) because they are set to any element that matches the selector so this works:

selectorA {
    --primary: #ff69b4;
    color: var(primary);
}
selectorA {
    background-color: var(--primary);
}

CSS is applied to elements at runtime. Sass is compiled before, without any knowledge of elements in the so even in the case of the same selector it just doesn’t “connect the dots”.

You can check the example in Sass playground.

So you can’t just define data-bs-theme="custom"] { sass variables here } and call it a day as they are available only inside that part of your code.

[benabraham]

How to actually create a theme is described in the documentation.

Check the code in scss/_root.scss, scss/_variables-dark.scss and scss/_maps.scss that is used to create the built-in dark theme. Also check where these files are used in scss/bootstrap.scss

As it’s the best practice to not change the original files you could do something like that to compile Bootstrap with mytheme added.

@import "node_modules/bootstrap/scss/mixins/banner";

@include bsBanner("");

// Configuration
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/variables-dark";
@import "variables-mytheme";
@import "node_modules/bootstrap/scss/maps";
@import "maps-mytheme";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";

// Layout & components and their customizations
@import "node_modules/bootstrap/scss/root";
@import "mytheme-root.scss";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/containers";
@import "node_modules/bootstrap/scss/grid";

// the rest of the files…

This new theme should look exactly like dark theme. I didn’t bother to change the actual colors.

_variables-mytheme.scss

// mytheme color mode variables
//
// Custom variables for the `[data-bs-theme="mytheme"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-mytheme.scss` and adding the variables you need.

//
// Global colors
//

$primary-text-emphasis-mytheme:        tint-color($primary, 40%);
$secondary-text-emphasis-mytheme:      tint-color($secondary, 40%);
$success-text-emphasis-mytheme:        tint-color($success, 40%);
$info-text-emphasis-mytheme:           tint-color($info, 40%);
$warning-text-emphasis-mytheme:        tint-color($warning, 40%);
$danger-text-emphasis-mytheme:         tint-color($danger, 40%);
$light-text-emphasis-mytheme:          $gray-100;
$mytheme-text-emphasis-mytheme:           $gray-300;

$primary-bg-subtle-mytheme:            shade-color($primary, 80%);
$secondary-bg-subtle-mytheme:          shade-color($secondary, 80%);
$success-bg-subtle-mytheme:            shade-color($success, 80%);
$info-bg-subtle-mytheme:               shade-color($info, 80%);
$warning-bg-subtle-mytheme:            shade-color($warning, 80%);
$danger-bg-subtle-mytheme:             shade-color($danger, 80%);
$light-bg-subtle-mytheme:              $gray-800;
$mytheme-bg-subtle-mytheme:               mix($gray-800, $black);

$primary-border-subtle-mytheme:        shade-color($primary, 40%);
$secondary-border-subtle-mytheme:      shade-color($secondary, 40%);
$success-border-subtle-mytheme:        shade-color($success, 40%);
$info-border-subtle-mytheme:           shade-color($info, 40%);
$warning-border-subtle-mytheme:        shade-color($warning, 40%);
$danger-border-subtle-mytheme:         shade-color($danger, 40%);
$light-border-subtle-mytheme:          $gray-700;
$mytheme-border-subtle-mytheme:           $gray-800;

$body-color-mytheme:                   $gray-300;
$body-bg-mytheme:                      $gray-900;
$body-secondary-color-mytheme:         rgba($body-color-mytheme, .75);
$body-secondary-bg-mytheme:            $gray-800;
$body-tertiary-color-mytheme:          rgba($body-color-mytheme, .5);
$body-tertiary-bg-mytheme:             mix($gray-800, $gray-900, 50%);
$body-emphasis-color-mytheme:          $white;
$border-color-mytheme:                 $gray-700;
$border-color-translucent-mytheme:     rgba($white, .15);
$headings-color-mytheme:               inherit;
$link-color-mytheme:                   tint-color($primary, 40%);
$link-hover-color-mytheme:             shift-color($link-color-mytheme, -$link-shade-percentage);
$code-color-mytheme:                   tint-color($code-color, 40%);
$mark-color-mytheme:                   $body-color-mytheme;
$mark-bg-mytheme:                      $yellow-800;


//
// Forms
//

$form-select-indicator-color-mytheme:  $body-color-mytheme;
$form-select-indicator-mytheme:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-mytheme}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");

$form-switch-color-mytheme:            rgba($white, .25);
$form-switch-bg-image-mytheme:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-mytheme}'/></svg>");

$form-valid-color-mytheme:             $green-300;
$form-valid-border-color-mytheme:      $green-300;
$form-invalid-color-mytheme:           $red-300;
$form-invalid-border-color-mytheme:    $red-300;


//
// Accordion
//

$accordion-icon-color-mytheme:         $primary-text-emphasis-mytheme;
$accordion-icon-active-color-mytheme:  $primary-text-emphasis-mytheme;

$accordion-button-icon-mytheme:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-mytheme}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");
$accordion-button-active-icon-mytheme:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-mytheme}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");

_maps-mytheme.scss

$theme-colors-text-mytheme: (
        "primary": $primary-text-emphasis-mytheme,
        "secondary": $secondary-text-emphasis-mytheme,
        "success": $success-text-emphasis-mytheme,
        "info": $info-text-emphasis-mytheme,
        "warning": $warning-text-emphasis-mytheme,
        "danger": $danger-text-emphasis-mytheme,
        "light": $light-text-emphasis-mytheme,
        "dark": $mytheme-text-emphasis-mytheme,
);

$theme-colors-bg-subtle-mytheme: (
        "primary": $primary-bg-subtle-mytheme,
        "secondary": $secondary-bg-subtle-mytheme,
        "success": $success-bg-subtle-mytheme,
        "info": $info-bg-subtle-mytheme,
        "warning": $warning-bg-subtle-mytheme,
        "danger": $danger-bg-subtle-mytheme,
        "light": $light-bg-subtle-mytheme,
        "dark": $mytheme-bg-subtle-mytheme,
);

$theme-colors-border-subtle-mytheme: (
        "primary": $primary-border-subtle-mytheme,
        "secondary": $secondary-border-subtle-mytheme,
        "success": $success-border-subtle-mytheme,
        "info": $info-border-subtle-mytheme,
        "warning": $warning-border-subtle-mytheme,
        "danger": $danger-border-subtle-mytheme,
        "light": $light-border-subtle-mytheme,
        "dark": $mytheme-border-subtle-mytheme,
);

_mytheme-root.scss

@include color-mode(mytheme, true) {
    color-scheme: dark; // check https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme for values

    --#{$prefix}body-color: #{$body-color-mytheme};
    --#{$prefix}body-color-rgb: #{to-rgb($body-color-mytheme)};
    --#{$prefix}body-bg: #{$body-bg-mytheme};
    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-mytheme)};

    --#{$prefix}emphasis-color: #{$body-emphasis-color-mytheme};
    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-mytheme)};

    --#{$prefix}secondary-color: #{$body-secondary-color-mytheme};
    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-mytheme)};
    --#{$prefix}secondary-bg: #{$body-secondary-bg-mytheme};
    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-mytheme)};

    --#{$prefix}tertiary-color: #{$body-tertiary-color-mytheme};
    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-mytheme)};
    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-mytheme};
    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-mytheme)};

    @each $color, $value in $theme-colors-text-mytheme {
        --#{$prefix}#{$color}-text-emphasis: #{$value};
    }

    @each $color, $value in $theme-colors-bg-subtle-mytheme {
        --#{$prefix}#{$color}-bg-subtle: #{$value};
    }

    @each $color, $value in $theme-colors-border-subtle-mytheme {
        --#{$prefix}#{$color}-border-subtle: #{$value};
    }

    --#{$prefix}heading-color: #{$headings-color-mytheme};

    --#{$prefix}link-color: #{$link-color-mytheme};
    --#{$prefix}link-hover-color: #{$link-hover-color-mytheme};
    --#{$prefix}link-color-rgb: #{to-rgb($link-color-mytheme)};
    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-mytheme)};

    --#{$prefix}code-color: #{$code-color-mytheme};
    --#{$prefix}highlight-color: #{$mark-color-mytheme};
    --#{$prefix}highlight-bg: #{$mark-bg-mytheme};

    --#{$prefix}border-color: #{$border-color-mytheme};
    --#{$prefix}border-color-translucent: #{$border-color-translucent-mytheme};

    --#{$prefix}form-valid-color: #{$form-valid-color-mytheme};
    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-mytheme};
    --#{$prefix}form-invalid-color: #{$form-invalid-color-mytheme};
    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-mytheme};
}

[benabraham]

Disclaimer: I didn’t actually run the code, so not sure if it would run without any errors.

[Marctoz]

That generally makes sense and is reasonable. The part I've specifically struggled with is changing the color-map values and their dependents based on the theme. Dark mode doesn't actually seem to change the value of $primary of $secondary for example, and those are what I want to change and then everything dependent on those would be re-evaluated.