Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap v4: What's the point of theme-color vs. standard color variable?

In Bootstrap v4.0.0.beta.2 they are using color maps too which allow us to use colors like theme-color("primary") instead of $brand-primary now.

My question is when I am adding my own custom CSS and want to use the colors from bootstrap, what advantage is there for me to use the theme-color function instead of just grabbing the variable that it is based on such as $primary?

Inside the bootstrap variables file they have:

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
), $theme-colors);

Why wouldn't I just use $primary? or $gray-300?

I'm not doing any fancy SASS stuff in my custom file, just standard CSS with these variables.

like image 705
BlueCaret Avatar asked Oct 31 '17 16:10

BlueCaret


People also ask

How do I override a Bootstrap SCSS variable?

Override Variables Bootstrap has its own “_variables. scss” in the “scss” folder, which contains all variables used in Bootstrap. Now, add the “abstracts” name folder in your scss folder and create “_custom-variables. scss” in that folder.

How do I change primary color in Bootstrap 4?

I've created this tool: https://lingtalfi.com/bootstrap4-color-generator, you simply put primary in the first field, then choose your color, and click generate. Then copy the generated scss or css code, and paste it in a file named my-colors. scss or my-colors. css (or whatever name you want).

Does Bootstrap 4 support Sass?

Sass optionsCustomize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable's value and recompile with npm run test as needed. You can find and customize these variables for key global options in Bootstrap's scss/_variables.


1 Answers

theme-colors() is mostly used by Bootstrap internally to iterate all of the theme colors. There are a bunch of components like buttons, badges, alerts, etc.. that are "built" in CSS for each theme color. Instead of doing..

   .badge-danger {
        @include badge-variant($danger);
   }
   .badge-warning {
        @include badge-variant($warning);
   }
   ...(repeat for each color)

This is much easier...

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
}

This would also make it easier to utilize the when extending or customizing Bootstrap (like this for example) with new elements that need use of all the theme colors.

But, if you're "not doing any fancy SASS stuff in my custom file, just standard CSS with these variables" it would be easiest to just reference the color variable...

$primary, $gray-300, etc...

Related: How to change the bootstrap primary color?

like image 65
Zim Avatar answered Oct 14 '22 16:10

Zim