As described at the beginning of this chapter, any additional CSS should be included in the files contained in the theme/
folder.
theme/
has the same structure of core/
, and it’s the place where you can override the core style or extend it by adding custom CSS.
Let’s suppose you want to replace the default color of the <h2> tag only preserving the color of the other headings. Open the theme/base/_typography.scss
file and type 👇
h2, .h2 {
color: get-color(primary, 1);
}
Now, let’s suppose you want to add some shadow to the buttons. Open the theme/elements/_buttons.scss
file and type 👇
.button {
box-shadow: 0 8px 20px rgba(get-color(dark, 1), .1);
}
For the cascading priorities of CSS, all changes made in the theme/
folder will override the core/
style.