# Theming

Shimoku allows a fairly wide level of aesthetic customization. Within these possibilities, from a single configuration file you can change:

* Palette (Main colors, greys…)
* Typography
* Custom (Logo, secondary colors, charts, shadows, radius…)
* Transitions
* zIndex<br>

To generate these changes it is necessary to understand which parts affect each platform.

It is recommended to view the page [Colors](https://docs.shimoku.com/dev/building-web-app/broken-reference) and [Titles and text](https://docs.shimoku.com/dev/building-web-app/broken-reference) as well as continue reading.&#x20;

Theme changes can be applied at the Domain, Universe and workspace level.&#x20;

For example, if we have a client like **Group Coca-Cola Company**. This client is possible to add a customization of both URL, logo and styles that will make up the **Domain**.&#x20;

Now **Group Coca-Cola Company** wants to keep its 10 by-products separate. **Fanta, Nestea,** etc. Each of them may have another customization at the **Workspace** level.&#x20;

Thus creating a product in which each company can have its own accesses and its own individual brand.

### Example

To change the theme of the workspace to adapt it more to the case needs. The function `s.workspaces.update_workspace` needs to be provided with a dictionary for all the options that want to be changed, this features options will be explained in detail in it's respective entry.&#x20;

An example on how to use it is:

```python
theme = {
        "palette": {
            "primary": {
                "main": "#FFA500",
            },
        },
        "typography": {
            "h1": {
                "fontSize": "60px",
            },
        },
        "custom": {
            "radius": {
                "xs": "0px",
                "s": "0px",
                "m": "0px",
                "l": "0px",
                "xl": "0px"
            },
            "logo": "https://pngimg.com/uploads/under_construction/under_construction_PNG63.png",
        }
    }

s.workspaces.update_workspace(
    uuid=uuid,
    theme=theme,
)
```

Another level where the theme can be set is at the board level, by creating it with the theme:

```python
s.boards.create_board(
    name=BOARD_NAME,
    theme=theme,
)
```

or by updating an existing board:

```python
s.boards.update_board(
    name=BOARD_NAME, 
    theme=theme,
)
```

This example contain production default styles:

{% file src="<https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2F9UdewGWlPLNdQZnHZj6B%2Ftheme_default_shimoku.json?alt=media&token=82df6bb2-4112-4501-8a06-8f4936d249fd>" %}

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2F4en9dqGGhzA0vJPtejIB%2FCaptura%20de%20Pantalla%202023-02-17%20a%20las%2011.52.54.png?alt=media&#x26;token=8c6d60d3-5e66-4452-b16d-96f59c04c6eb" alt="Dashboard with horizontal barchart to preview default styles"><figcaption></figcaption></figure>

This example contain custom styles:

{% file src="<https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FD2f9qi8MHywOFdds5VzS%2Ftheme_test_bright_shimoku.json?alt=media&token=9e72df62-15c8-4ae5-ac70-7a79ed342d60>" %}

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FtENZejrenIJh2oBPnL6f%2FCaptura%20de%20Pantalla%202023-02-17%20a%20las%2011.50.57.png?alt=media&#x26;token=d79c9b38-da29-4588-8d06-8aca4be02583" alt="Dashboard with customization colors"><figcaption></figcaption></figure>

This is the file to modify the aforementioned fields. It is a default theme with the same styles as Shimoku. From this json is modified to change the theme. If this file is tested directly as a functional test, the only thing that will change is the Shimoku logo in the side menu. This will become all black.