Background Color
The
background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin).|
Class
|
Properties
|
|
|---|---|---|
|
|
bg-color |
background-color: theme('color', 'background') |
|
|
bg-grey |
background-color: color.$grey |
|
|
bg-white |
background-color: white |
|
|
bg-black |
background-color: black |
|
|
bg-primary |
background-color: theme('color', 'primary') |
|
|
bg-success |
background-color: theme('color', 'success') |
|
|
bg-warning |
background-color: theme('color', 'warning') |
|
|
bg-error |
background-color: theme('color', 'error') |
|
|
bg-dark |
background-color: theme('color', 'dark') |
| Color | Class | Class | ||
|---|---|---|---|---|
| Primary | bg-primary-lighten-5 |
bg-primary-darken-5 |
||
bg-primary-lighten-10 |
bg-primary-darken-10 |
|||
bg-primary-lighten-15 |
bg-primary-darken-15 |
|||
bg-primary-lighten-20 |
bg-primary-darken-20 |
|||
bg-primary-lighten-25 |
bg-primary-darken-25 |
|||
bg-primary-lighten-30 |
bg-primary-darken-30 |
|||
bg-primary-lighten-35 |
bg-primary-darken-35 |
|||
bg-primary-lighten-40 |
bg-primary-darken-40 |
|||
bg-primary-lighten-45 |
bg-primary-darken-45 |
|||
bg-primary-lighten-50 |
bg-primary-darken-50 |
|||
| Success | bg-success-lighten-5 |
bg-success-darken-5 |
||
bg-success-lighten-10 |
bg-success-darken-10 |
|||
bg-success-lighten-15 |
bg-success-darken-15 |
|||
bg-success-lighten-20 |
bg-success-darken-20 |
|||
bg-success-lighten-25 |
bg-success-darken-25 |
|||
bg-success-lighten-30 |
bg-success-darken-30 |
|||
bg-success-lighten-35 |
bg-success-darken-35 |
|||
bg-success-lighten-40 |
bg-success-darken-40 |
|||
bg-success-lighten-45 |
bg-success-darken-45 |
|||
bg-success-lighten-50 |
bg-success-darken-50 |
|||
| Warning | bg-warning-lighten-5 |
bg-warning-darken-5 |
||
bg-warning-lighten-10 |
bg-warning-darken-10 |
|||
bg-warning-lighten-15 |
bg-warning-darken-15 |
|||
bg-warning-lighten-20 |
bg-warning-darken-20 |
|||
bg-warning-lighten-25 |
bg-warning-darken-25 |
|||
bg-warning-lighten-30 |
bg-warning-darken-30 |
|||
bg-warning-lighten-35 |
bg-warning-darken-35 |
|||
bg-warning-lighten-40 |
bg-warning-darken-40 |
|||
bg-warning-lighten-45 |
bg-warning-darken-45 |
|||
bg-warning-lighten-50 |
bg-warning-darken-50 |
|||
| Error | bg-error-lighten-5 |
bg-error-darken-5 |
||
bg-error-lighten-10 |
bg-error-darken-10 |
|||
bg-error-lighten-15 |
bg-error-darken-15 |
|||
bg-error-lighten-20 |
bg-error-darken-20 |
|||
bg-error-lighten-25 |
bg-error-darken-25 |
|||
bg-error-lighten-30 |
bg-error-darken-30 |
|||
bg-error-lighten-35 |
bg-error-darken-35 |
|||
bg-error-lighten-40 |
bg-error-darken-40 |
|||
bg-error-lighten-45 |
bg-error-darken-45 |
|||
bg-error-lighten-50 |
bg-error-darken-50 |
|||
| Dark | bg-dark-lighten-5 |
bg-dark-darken-5 |
||
bg-dark-lighten-10 |
bg-dark-darken-10 |
|||
bg-dark-lighten-15 |
bg-dark-darken-15 |
|||
bg-dark-lighten-20 |
bg-dark-darken-20 |
|||
bg-dark-lighten-25 |
bg-dark-darken-25 |
|||
bg-dark-lighten-30 |
bg-dark-darken-30 |
|||
bg-dark-lighten-35 |
bg-dark-darken-35 |
|||
bg-dark-lighten-40 |
bg-dark-darken-40 |
|||
bg-dark-lighten-45 |
bg-dark-darken-45 |
|||
bg-dark-lighten-50 |
bg-dark-darken-50 |
|||
| Grey | bg-grey-lighten-5 |
bg-grey-darken-5 |
||
bg-grey-lighten-10 |
bg-grey-darken-10 |
|||
bg-grey-lighten-15 |
bg-grey-darken-15 |
|||
bg-grey-lighten-20 |
bg-grey-darken-20 |
|||
bg-grey-lighten-25 |
bg-grey-darken-25 |
|||
bg-grey-lighten-30 |
bg-grey-darken-30 |
|||
bg-grey-lighten-35 |
bg-grey-darken-35 |
|||
bg-grey-lighten-40 |
bg-grey-darken-40 |
|||
bg-grey-lighten-45 |
bg-grey-darken-45 |
|||
bg-grey-lighten-50 |
bg-grey-darken-50 |
|||
|
Since the default theme's background color is white, it does not include a class for its lighter tones.
Therefore, the following light tone classes will not work for default theme. |
||||
| BG Color | bg-color-lighten-5 |
bg-color-darken-5 |
||
bg-color-lighten-10 |
bg-color-darken-10 |
|||
bg-color-lighten-15 |
bg-color-darken-15 |
|||
bg-color-lighten-20 |
bg-color-darken-20 |
|||
bg-color-lighten-25 |
bg-color-darken-25 |
|||
bg-color-lighten-30 |
bg-color-darken-30 |
|||
bg-color-lighten-35 |
bg-color-darken-35 |
|||
bg-color-lighten-40 |
bg-color-darken-40 |
|||
bg-color-lighten-45 |
bg-color-darken-45 |
|||
bg-color-lighten-50 |
bg-color-darken-50 |
|||
| White | - | - | bg-white-darken-5 |
|
| - | - | bg-white-darken-10 |
||
| - | - | bg-white-darken-15 |
||
| - | - | bg-white-darken-20 |
||
| - | - | bg-white-darken-25 |
||
| - | - | bg-white-darken-30 |
||
| - | - | bg-white-darken-35 |
||
| - | - | bg-white-darken-40 |
||
| - | - | bg-white-darken-45 |
||
| - | - | bg-white-darken-50 |
||
| Black | bg-black-lighten-5 |
- | - | |
bg-black-lighten-10 |
- | - | ||
bg-black-lighten-15 |
- | - | ||
bg-black-lighten-20 |
- | - | ||
bg-black-lighten-25 |
- | - | ||
bg-black-lighten-30 |
- | - | ||
bg-black-lighten-35 |
- | - | ||
bg-black-lighten-40 |
- | - | ||
bg-black-lighten-45 |
- | - | ||
bg-black-lighten-50 |
- | - | ||
utilities.scss API