> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/shopware-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/shopware-theme/en/for-developers/child-theme/individual-scss.md).

# Individual SCSS

{% hint style="info" %}
As a basis, you should have read and internalized the corresponding [article in the official Shopware documentation](https://developer.shopware.com/docs/guides/plugins/themes/add-css-js-to-theme.html).
{% endhint %}

In this example, I will only go into the previously created configuration variable:

{% content-ref url="/pages/dZAi0uQz1r2Z43OwVvYk" %}
[Extend configuration](/shopware-theme/en/for-developers/child-theme/extend-configuration.md)
{% endcontent-ref %}

### Edit and compile SCSS

You can now use the configuration variable to design your child theme. In this example, I will give the header the background color of the configuration field:

```
// src/Resources/app/storefront/src/scss/base.scss

.header-main{
  background-color: $rhweb-custom-color-field;
}
```

To compile your child theme, you can either **save** the theme configuration from the Shopware backend or use the console command `bin/console theme:compile`.