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

rgba(0, 0, 0, 0.87)

--sdc-palette-text-secondary

rgba(0, 0, 0, 0.6)

--sdc-palette-text-disabled

rgba(0, 0, 0, 0.38)

Do you have some feedback for us?

If you have suggestions for improving this article,