Colors

Variable defaults

Every SASS variable in bootnews includes the !default flag allowing you to override the variable's default value in your own SASS without modifying bootnews's source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values in bootnews.

Variable overrides within the same SASS file can come before or after the default variables. However, when overriding across SASS files, your overrides must come before you import bootnews's SASS files.

Modify map

To modify an existing color in our $theme-colors map, add the following to your custom SASS file:

            
              $theme-colors: (
                "primary": #377dff,
                "danger": #de4437
              );
            
          

Add to map

To add a new color to $theme-colors, add the new key and value:

            
              $theme-colors: (
                "custom-color": #900
              );
            
          

Required keys

Bootnews assumes the presence of some specific keys within SASS maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific SASS map's key is being used.

For example, we use the primary, success, and danger keys from $theme-colors for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause SASS compilation issues. In these instances, you'll need to modify the SASS code that makes use of those values.

Colors

Bootnews inherits the Bootstrap's $theme-colors colors map and modifies them with our alternatively picked colors. bootnews also includes several other colors which are located and can be modified in _variables.scss.

Theme colors

We use a subset of all colors (Bootstrap's method) to create a smaller color palette for generating color schemes, also available as SASS variables scss/_variables.scss file.

Add, remove, or modify values within the map to update how they're used in many other components.

Components

Many of bootnews's components and utilities are built with @each loops that iterate over a SASS map. This is especially helpful for generating variants of a component by our $theme-colors and creating responsive variants for each breakpoint. As you customize these SASS maps and recompile, you'll automatically see your changes reflected in these loops.

Customize Color

In this package, you can editing theme color for easy. Just editing assets/scss/_variables.scss and editing following scss

            
              // primary Theme color
              $primary:       $blue !default;
              $secondary:     $black !default;
              $dark:          #1b1b1b !default;
              $light:         $gray-100 !default;

              // Other color
              $success:       $green !default;
              $info:          $cyan !default;
              $warning:       $yellow !default;
              $danger:        #d90018 !default;
            
          

You also can editing other color from here

            
              $blue:    #2196f3 !default;
              $indigo:  #6610f2 !default;
              $purple:  #7952B3 !default;
              $pink:    #e83e8c !default;
              $red:     #f40d27 !default;
              $orange:  #fd7e14 !default;
              $yellow:  #ffc107 !default;
              $green:   #28a745 !default;
              $teal:    #20c997 !default;
              $cyan:    #17a2b8 !default;