Background Color
Utilities for controlling an element's background color.
Class | Properties | |
---|---|---|
bg-transparent | color: 'transparent' | |
bg-black | color: '#22292f' | |
bg-grey-darkest | color: '#3d4852' | |
bg-grey-darker | color: '#606f7b' | |
bg-grey-dark | color: '#8795a1' | |
bg-grey | color: '#b8c2cc' | |
bg-grey-light | color: '#dae1e7' | |
bg-grey-lighter | color: '#f1f5f8' | |
bg-grey-lightest | color: '#f8fafc' | |
bg-white | color: '#ffffff' | |
bg-red-darkest | color: '#3b0d0c' | |
bg-red-darker | color: '#621b18' | |
bg-red-dark | color: '#cc1f1a' | |
bg-red | color: '#e3342f' | |
bg-red-light | color: '#ef5753' | |
bg-red-lighter | color: '#f9ac' | |
bg-red-lightest | color: '#fcebea' | |
bg-orange-darkest | color: '#462a16' | |
bg-orange-darker | color: '#613b1f' | |
bg-orange-dark | color: '#de751f' | |
bg-orange | color: '#f6993f' | |
bg-orange-light | color: '#fd63' | |
bg-orange-lighter | color: '#fcd9b6' | |
bg-orange-lightest | color: '#fff5eb' | |
bg-yellow-darkest | color: '#453411' | |
bg-yellow-darker | color: '#684f1d' | |
bg-yellow-dark | color: '#f2d024' | |
bg-yellow | color: '#ffed4a' | |
bg-yellow-light | color: '#fff382' | |
bg-yellow-lighter | color: '#fff9c2' | |
bg-yellow-lightest | color: '#fcfbeb' | |
bg-green-darkest | color: '#0f2f21' | |
bg-green-darker | color: '#1a4731' | |
bg-green-dark | color: '#1f9d55' | |
bg-green | color: '#38c172' | |
bg-green-light | color: '#51d88a' | |
bg-green-lighter | color: '#a2f5bf' | |
bg-green-lightest | color: '#e3fcec' | |
bg-teal-darkest | color: '#0d3331' | |
bg-teal-darker | color: '#20504f' | |
bg-teal-dark | color: '#38a89d' | |
bg-teal | color: '#4dc0b5' | |
bg-teal-light | color: '#64d5ca' | |
bg-teal-lighter | color: '#a0f0ed' | |
bg-teal-lightest | color: '#e8fffe' | |
bg-blue-darkest | color: '#12283a' | |
bg-blue-darker | color: '#1c3d5a' | |
bg-blue-dark | color: '#2779bd' | |
bg-blue | color: '#3490dc' | |
bg-blue-light | color: '#6cb2eb' | |
bg-blue-lighter | color: '#bcdefa' | |
bg-blue-lightest | color: '#eff8ff' | |
bg-indigo-darkest | color: '#191e38' | |
bg-indigo-darker | color: '#2f365f' | |
bg-indigo-dark | color: '#5661b3' | |
bg-indigo | color: '#6574cd' | |
bg-indigo-light | color: '#7886d7' | |
bg-indigo-lighter | color: '#b2b7ff' | |
bg-indigo-lightest | color: '#e6e8ff' | |
bg-purple-darkest | color: '#21183c' | |
bg-purple-darker | color: '#382b5f' | |
bg-purple-dark | color: '#794acf' | |
bg-purple | color: '#9561e2' | |
bg-purple-light | color: '#a779e9' | |
bg-purple-lighter | color: '#d6bbfc' | |
bg-purple-lightest | color: '#f3ebff' | |
bg-pink-darkest | color: '#451225' | |
bg-pink-darker | color: '#6f213f' | |
bg-pink-dark | color: '#eb5286' | |
bg-pink | color: '#f66d9b' | |
bg-pink-light | color: '#fa7ea8' | |
bg-pink-lighter | color: '#ffbbca' | |
bg-pink-lightest | color: '#ffebef' |
Usage
Control the background color of an element using the bg-{color}
utilities.
Customizing
Background Colors
By default BinStorm makes the entire default color palette available as background colors.
You can customize your color palette by editing the colors variable in your BinStorm config file, or customize just your background colors using the backgroundColors
section of your BinStorm config.
{
// ...
backgroundColors: {
- ...colors,
+ 'primary': '#3490dc',
+ 'secondary': '#ffed4a',
+ 'danger': '#e3342f',
}
}
Disabling
If you don't plan to use the bg-{color}
utilities in your project, you can disable them entirely by removing the backgroundColors
property in the modules
section of your config file:
{
// ...
modules: {
// ...
- backgroundColors: {
- prefix: 'bg',
- propertyName: 'backgroundColor'
- }
}
}