Colors
The default theme includes a palette of colors that work well together and satisfy user experience requirements. For details on creating or using themes, refer to Themes and styles.
|
Name |
Value |
Swatch |
|---|---|---|
|
--sdc-palette-common-black |
#000 |
|
|
--sdc-palette-common-white |
#FFF |
|
|
--sdc-palette-primary-main |
#5548D9 |
|
|
--sdc-palette-primary-light |
#EEECFB |
|
|
--sdc-palette-primary-dark |
#4A37D5 |
|
|
--sdc-palette-primary-contrastText |
#fff |
|
|
--sdc-palette-secondary-main |
#ff3d00 |
|
|
--sdc-palette-secondary-light |
#ff6e40 |
|
|
--sdc-palette-secondary-dark |
#dd2c00 |
|
|
--sdc-palette-secondary-contrastText |
#fff |
|
|
--sdc-palette-grey-100 |
#f5f5f5 |
|
|
--sdc-palette-grey-200 |
#ECECEC |
|
|
--sdc-palette-grey-300 |
#DDDDDD |
|
|
--sdc-palette-grey-400 |
#CFCFCF |
|
|
--sdc-palette-grey-500 |
#C0C0C0 |
|
|
--sdc-palette-grey-600 |
#B8B8B8 |
|
|
--sdc-palette-grey-700 |
#A7A7A7 |
|
|
--sdc-palette-grey-800 |
#979797 |
|
|
--sdc-palette-grey-900 |
#777777 |
|
|
--sdc-palette-info-main |
#0288d1 |
|
|
--sdc-palette-info-light |
#03a9f4 |
|
|
--sdc-palette-info-dark |
#01579b |
|
|
--sdc-palette-info-contrastText |
#fff |
|
|
--sdc-palette-success-main |
#2e7d32 |
|
|
--sdc-palette-success-light |
#4caf50 |
|
|
--sdc-palette-success-dark |
#1b5e20 |
|
|
--sdc-palette-success-contrastText |
#fff |
|
|
--sdc-palette-error-main |
#d32f2f |
|
|
--sdc-palette-error-light |
#ef5350 |
|
|
--sdc-palette-error-dark |
#c62828 |
|
|
--sdc-palette-error-contrastText |
#fff |
|
|
--sdc-palette-warning-main |
#ed6c02 |
|
|
--sdc-palette-warning-light |
#ff9800 |
|
|
--sdc-palette-warning-dark |
#e65100 |
|
|
--sdc-palette-warning-contrastText |
#fff |
|
|
--sdc-palette-text-primary |
| |
|
--sdc-palette-text-secondary |
| |
|
--sdc-palette-text-disabled |
|