All style attributes and variables are defined in Sass files. It is quite hard to identify all colors, sizes, paddings, fonts etc. in one large file generated by Sass so it is always better to compile your own stylesheet. We are using pure Sass without any other libraries. For compiling we decided to use the gulp which is pretty fast. Gulpfile with prepared actions is located in theme root.

Note

Editing default theme appearance using custom stylesheet requires some basic coding skills and you should be familiar with CSS3 rules and principles.

After successful compilation copy assets/css/superlist-custom.css to your child theme (e.g. superlist-child/superlist-custom.css). Now you need to tell your child theme to use your new color combination.

If you are using custom stylesheet, you will need to regenerate the file every time a new theme update releases to cover all new elements and components of course. Otherwise your stylesheet won’t “know” how to render theme and it can look ugly. Makes sense, right? Or, you can skip dequeuing original stylesheet and theme will inherit appearance from it.

If you are not familiar with Sass nor gulp, you can still write your own plain CSS into custom stylesheet.
To override original theme appearance you will need to use stronger selector in your .css file. Learn more about Calculating a selector’s specificity.

To find out a selector of specific element in the HTML DOM you can use Inspector Development Tool in your browser.