In Scandi, the
style directory defines the overall look of your application - the theme colors, fonts, and some HTML element styling, along with CMS content styles. Often, when customizing a theme, these styles are the first thing to be changed.
Let's change the theme colors of the application. To override a style file, you will need to copy it from the base theme (which you can find in
node_modules/@scandipwa/scandipwa) to your
src directory, under the same path. In this case, the file we want to override is
node_modules/@scandipwa/scandipwa/src/style/abstract/_variables.scss, because this is where the theme color variables are defined. Copy this file to
src/style/abstract/_variables.scss. Now we are ready to customize the color variable declarations:
src/style/abstract/_variables.scss$white: #FFF;$black: #0D2E41;$default-primary-base-color: #44AD9F;$default-primary-dark-color: #00798A;$default-primary-light-color: #87DEC7;$default-secondary-base-color: #F8AF2C;$default-secondary-dark-color: #FA6135;$default-secondary-light-color: #FFE357;
However, you will notice that changes are not yet applied. This is because we also need to override the files in the import chain of the file. Inspecting the codebase, we see that
_variables.scss is imported in
_abstract.scss, which is in turn imported in
src/style/main.scss. Therefore, we also need to copy over
main.scss from the base theme.
Now, the global style changes should be applied. Indeed, if we check our app, we can see the new colors:
Exercise: So far, we only changed the theme colors. Take a look around the
style directory and see if there is anything else you'd like to change. Perhaps change the loader background style, or the spacing in lists?