Global colors

There are 2 options to customize Silicon global colors:

1. Customize global colors via Sass variables
2. Customize global colors via CSS Custom properties (variables)

Customize global colors via Sass variables

In case you want to create your own color scheme - the fastest and painless way to do that is via Sass variables.

Simply copy necessary variable from Silicon/assets/scss/_variables.scss file and paste to Silicon/assets/scss/_user-variables.scss, then compile new theme.min.css file either using Visual Studio Code Sass Compiler or Npm command. Check Using Sass (Scss) and / or Npm commands (scripts) sections for instructions.

Blelow is the screenshot of the part of Sass variables file responsible for global colors:

Customize global colors via CSS custom properties (variables)

Since v1.2.0 Silicon offers CSS Custom Properties (variables) for every component as well as global variables which you can customize. These varibles cover almost every style from sizes, spacing to colors. The easiest way to learn what variables are available for certain component is to highlight the target component with browser inspector. You can also open the component .scss file (inside src/scss/components folder) with your editor to learn about available CSS variables. Most of the time they are listed at the top level (parent wrapper). Refer to the screenshot from browser inspector below: