# Customizing the Global Styles

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:

{% code title="src/style/abstract/\_variables.scss" %}

```css
$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;
```

{% endcode %}

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:

![](/files/-MbpYlVwui5Mp_48lqp3)

**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?**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.scandipwa.com/tutorials/customizing-your-theme/styling/customizing-the-global-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.