Colors

Variable defaults

Every SASS variable in Upgency includes the !default flag allowing you to override the variable's default value in your own SASS without modifying Upgency 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 Upgency.

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 Upgency SASS files.

Modify map

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

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

Add to map

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

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

Required keys

Upgency 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

Upgency inherits the Bootstrap's $theme-colors colors map and modifies them with our alternatively picked colors. Upgency 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.

Background Gradient

We use background gradient for parimary and secondary color. You can editing this from scss/upgency/_kit.scss file.

Components

Many of Upgency 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 src/scss/_variables.scss and editing following scss

            
              // Default theme color 
$primary-color:                                              $indigo !default;
$accent-color:                                               $yellow !default;
$secondary-color:                                            #161e2e !default;