Global colors

There are 2 ways of customizing Around 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 Around/src/scss/_variables.scss file and paste to Around/src/scss/_user-variables.scss, then compile new theme.min.css file either using Visual Studio Code Sass Compiler, Prepros app or Gulp. Check Using Pug & Sass and / or Working with Gulp 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 v3.0.0 Around 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 Around/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: