There are 2 ways of customizing Around global colors:
If you wish to create your own custom color scheme, the quickest and most straightforward method is by utilizing Sass variables.
To customize your theme, follow these steps:
theme.min.css file using either an Npm command or the Visual Studio Code Sass Compiler.
Blelow is the screenshot of the part of Sass variables file responsible for global colors:
Since v3.0.0 Around offers CSS Custom Properties (aka variables) for every component as well as global variables which you can customize. These varibles cover almost every style from sizes and 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. They are typically listed at the top level, which corresponds to the parent wrapper. You can find a visual representation of this in the screenshot from the browser inspector below: