dile-components
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.
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-neutral-color | #2889a7 | |
| --dile-on-alert-color | #ffffff | |
| --dile-danger-color | #e31e1b | |
| --dile-on-danger-color | #ffffff |
Color variations
Sometimes we may use color variations on the components.
| Custom property | Default | Color |
|---|---|---|
| --dile-primary-light-color | #fbfbe9 | |
| --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 |