arundhaj

all that is technology

Customizing AWS Amplify color scheme for Angular

 

In this article, I'll show you how to customize AWS Amplify color scheme for Angular apps.

Following are the list of variables with the default values exposed by AWS Amplify for customization.

:root {
  --amplify-primary-color: #ff9900
  --amplify-primary-contrast: var(–amplify-white)
  --amplify-primary-tint: #ffac31
  --amplify-primary-shade: #e88b01
  --amplify-secondary-color: #152939
  --amplify-secondary-contrast: var(–amplify-white)
  --amplify-secondary-tint: #31465f
  --amplify-secondary-shade: #1F2A37
  --amplify-tertiary-color: #5d8aff
  --amplify-tertiary-contrast: var(–amplify-white)
  --amplify-tertiary-tint: #7da1ff
  --amplify-tertiary-shade: #537BE5
  --amplify-grey: #828282
  --amplify-light-grey: #c4c4c4
  --amplify-white: #ffffff
  --amplify-red: #dd3f5b
}

You can overwrite these variables with your custom colors by defining :root class in styles.scss file.

Hope this helps!

Comments