# Colors

Two globally used colors are required. More colors can be overridden on separate elements.

This is done with [Sass](https://sass-lang.com/) (sass-lang.com) variables in your own style configuration file `style.scss`.

## Required configuration

| Color                                                                                                                                    | Sass variable |
| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| **Primary color** is most visible as the menu and footer background color and some graphical elements all over the site. Some link text. | `$primary`    |
| **Secondary color** appears on active menu item, metadata, buttons, things like that. Some link text.                                    | `$secondary`  |

## Example

{% code title="<your-child-theme>/assets/scss/style.scss" %}

```css
// Bootstrap variables with base theme colors
// ======================================================

// Colors from style guide
$primary: #35276c;
$secondary: #7a6640;

$section-colors: (
    default: #a596fa
);

@import '../../../everyware-theme-base-2/assets/scss/style';
```

{% endcode %}

![Example colors](https://3066417513-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_HLbYnejnUK_QQoiMy%2F-MS3RuswDoMGQR0Is1L9%2F-MS3SOpNxCqC5IKk_GL0%2Fimage.png?alt=media\&token=b519e89e-7c68-44ae-8608-a36f13c340ca)