> 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/fur-entwickler/child-theme/individuelles-scss.md).

# Individuelles SCSS

{% hint style="info" %}
Als Grundlage solltest du den entsprechenden [Artikel der offiziellen Shopware Dokumentation](https://developer.shopware.com/docs/guides/plugins/themes/add-css-js-to-theme) gelesen und verinnerlicht haben.
{% endhint %}

In diesem Beispiel gehe ich lediglich auf die zuvor angelegte Konfigurationsvariable ein:

{% content-ref url="/pages/dZAi0uQz1r2Z43OwVvYk" %}
[Konfiguration erweitern](/shopware-theme/fur-entwickler/child-theme/konfiguration-erweitern.md)
{% endcontent-ref %}

### SCSS bearbeiten und kompilieren

Die Konfigurationsvariable kannst du jetzt nutzen, um dein Child-Theme zu gestalten. In diesem Beispiel werde ich dem Header die Hintergrundfarbe des Konfigurationsfeldes geben:

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

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

Um dein Child-Theme zu kompilieren, kannst du entweder die Theme-Konfiguration aus dem Shopware Backend heraus **abspeichern**, oder den Konsolenbefehl `bin/console theme:compile` verwenden.