Colors

Many of Onekit various components and utilities are built through a series of colors defined in a SASS map. This map can be looped over in SASS to quickly generate a series of rulesets.

Variable defaults

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

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 Onekit 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

Onekit 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

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

Primary

Success

Info

Warning

Danger

Secondary

Dark

White

Black

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

Color Level

Color level is a scss color generator from Bootstrap 5 (all color) system. We use this color system only in primary and secondary color. Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.

$Primary #5b2be0

$Primary-50

$Primary-100

$Primary-200

$Primary-300

$Primary-400

$Primary-500

$Primary-600

$Primary-700

$Primary-800

$Primary-900

$secondary #222b46

$secondary-50

$secondary-100

$secondary-200

$secondary-300

$secondary-400

$secondary-500

$secondary-600

$secondary-700

$secondary-800

$secondary-900

Background Gradient

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

.bg-gradient-Primary

.bg-gradient-secondary

Components

Many of Onekit 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:                                               $purple !default;
$accent-color:                                                $yellow !default;
$secondary-color:                                             $navy !default;