Customizing the Global Styles

Define the overall look of your application

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 _abstract.scss and 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?