# Design Settings (extension)

Extensions use the same principles as themes, you can use the "Design Settings" the same way.

{% content-ref url="../cms/sass/design-settings" %}
[design-settings](https://galaxy-cms.gitbook.io/project/cms/sass/design-settings)
{% endcontent-ref %}

### Where to find them in the BO?

We use the same place for extensions and themes design settings: Website > Design > Color groups (or other tab)

See [using theme extensions](https://galaxy-cms.gitbook.io/project/about-theme-extensions#edit-design-settings) to see how to filter only them.

### Map Design Settings Binding between the extension and the theme

* Your theme already has design settings (for example primary color, the font, etc..)
* Your extension also has design settings

You can bind your extensions variables to existing variables from themes

**This is a backoffice configuration**

At platform level, **Galaxy > Theme > your extension**, tab "**Design**"

This lists all the design settings defined in the extension.

For each design setting from the extension, you can add "bindings" to design settings from themes, to take by default the value of the design setting from the theme.\
For example saying that a variable **`ibe_cards_background_color`** should use the color from a theme

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYM6a76uZePOTen0dIw-887967055%2Fuploads%2FcxZNNHU7EQhPNA08llLP%2FCleanShot%202022-01-27%20at%2009.20.31%402x.png?alt=media\&token=a2cdedbb-a55a-4137-95c9-0424b9b5c53f)

User can disable the toggle to "unbind the variables at website level". This way, the user can put a specific color instead of using the binding defined

### Binding Design Settings - Step by step

1 - Define with design team what should be the design mapping

2 - On the platform, go to the list of themes & extensions, and select your extension

3 - Go to the tab "Design"

*it displays the list of all design variables inside your extension*

4 - Choose the variable you want to bind to another variable from a theme

5 - After clicking on it, go to the tab "Binding"

*It list all the binding between this variable and design settings from other themes*

6 - Click on ADD and select the theme design setting.&#x20;

*The dropdown shows all **design settings of the same type**.*

The binding can only exist between **variables of the same type** (you can not link a `color` variable from your extension to a `font` variable from a theme)

{% hint style="info" %}
Contact us before using it, as this is beta feature
{% endhint %}
