Colors

On this page you will find the CSS Custom Properties used to create the color theme for the Dile components catalog.

You can overwrite any of these CSS Custom Properties in your own CSS style declarations to customize the theme of the components on your websites and applications.

If you'd rather pick your colors visually and preview them live on real components, try the Theme Builder tool.

Main colors

These are the main color custom properties of the default theme for the Dile components.

Custom property	Default	Color
--dile-background-color	#ffffff
--dile-on-background-color	#303030
--dile-primary-color	#f3f3ae
--dile-on-primary-color	#303030
--dile-secondary-color	#27a744
--dile-on-secondary-color	#ffffff
--dile-terciary-color	#2789a7
--dile-on-terciary-color	#ffffff
--dile-neutral-color	#f4f4f4
--dile-on-neutral-color	#303030
--dile-alert-error-color	#cf3535
--dile-alert-success-color	#00900f
--dile-alert-warning-color	#d7b740
--dile-alert-neutral-color	#2889a7
--dile-on-alert-color	#ffffff
--dile-danger-color	#e34a1b
--dile-on-danger-color	#ffffff
--dile-link-color	#3399ff
--dile-gray-very-light-color	#f5f5f5
--dile-on-gray-very-light-color	#303030

Color variations

Sometimes we may use color variations on the components.

Custom property	Default	Color
--dile-primary-light-color	#fafadf
--dile-on-primary-light-color	#303030
--dile-primary-dark-color	#d7d353
--dile-on-primary-dark-color	#303030
--dile-secondary-light-color	#beed8e
--dile-on-secondary-light-color	#303030
--dile-secondary-dark-color	#43842e
--dile-on-secondary-dark-color	#ffffff
--dile-terciary-light-color	#85d4f0
--dile-on-terciary-light-color	#303030
--dile-terciary-dark-color	#125462
--dile-on-terciary-dark-color	#ffffff
--dile-gray-dark-color	#555555
--dile-on-gray-dark-color	#ffffff