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

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

It is recommended to view the page Colors and Titles and text as well as continue reading.

Theme changes can be applied at the Domain, Universe and workspace level.

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.

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.

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.

An example on how to use it is:

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:

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

or by updating an existing board:

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

This example contain production default styles:

8KB

theme_default_shimoku.json

This example contain custom styles:

8KB

theme_test_bright_shimoku.json

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.