# Customizing Theme Styles

Customization involves redefining the application's color palette and replacing its images.

The following code is a complete example of the default Light theme. Many of its colors reference predefined CSS variables in RGB or RGBA format, which can be easily replaced. This example also shows the required CSS file structure for building a custom theme.

Below is the complete list of available variables, their default values, and usage examples.

```css
.MyOwnTheme {
    --primary-color: #YourPrimary;
    --dark-primary-color: #DarkPrimary;
    --primary-background: #DBDBDB;
    --login-logo: url("<%=BASEURL%>__themes__/LoginLogo.png");
    --desktop-logo: url("<%=BASEURL%>__themes__/DesktopLogo.png");
    --mobile-logo: url("<%=BASEURL%>__themes__/LoginLogo.png");
}

.MyOwnDarkTheme {
    --primary-color: #YourPrimary;
    --dark-primary-color: #DarkPrimary;
    --primary-background: #000000;
    --login-logo: url("<%=BASEURL%>__themes__/LoginLogo-white.png");
    --desktop-logo: url("<%=BASEURL%>__themes__/DesktopLogo-white.png");
    --mobile-logo: url("<%=BASEURL%>__themes__/LoginLogo-white.png");
}
```

It is not necessary to redefine all variables. By default, the Light theme is applied; any definitions added will simply overwrite the redefined values. Redefining the values shown in the example above is enough to quickly change the appearance of the interface.

### Core Theme Variables

{% tabs %}
{% tab title="Main and General" %}

<table><thead><tr><th width="205.20001220703125">Variable</th><th width="128.79998779296875">Default Value</th><th>Scope</th></tr></thead><tbody><tr><td><code>--primary-color</code></td><td>#007DC1</td><td>Buttons, links, highlights, icons.</td></tr><tr><td><code>--dark-primary-color</code></td><td>#004468</td><td>Hover on buttons, titles, and active tabs.</td></tr><tr><td><code>--light-primary-color</code></td><td>#CEE8F6</td><td>Hover on menus, dark-primary-color background.</td></tr><tr><td><code>--secondary-color</code></td><td>#4ECC64</td><td>-</td></tr><tr><td><code>--tertiary-color</code></td><td>#DA9963</td><td>-</td></tr></tbody></table>
{% endtab %}

{% tab title="Background Colors" %}

<table><thead><tr><th width="240.199951171875">Variable</th><th width="221.5999755859375">Default Value</th><th>Scope</th></tr></thead><tbody><tr><td><code>--hover-bgcolor</code></td><td>#F2F2F2</td><td>Profile hover, float menu, items hover.</td></tr><tr><td><code>--header-bgcolor</code></td><td><code>--primary-bgcolor</code></td><td>App header.</td></tr><tr><td><code>--toolbar-bgcolor</code></td><td><code>--tertiary-bgcolor</code></td><td>Toolbar.</td></tr><tr><td><code>--sidepanel-header-bgcolor</code></td><td><code>--header-bgcolor</code></td><td>Side Panel header.</td></tr><tr><td><code>--sidepanel-bgcolor</code></td><td><code>--secondary-bgcolor</code></td><td>Side Panel background color.</td></tr><tr><td><code>--menu-bgcolor</code></td><td><code>--secondary-bgcolor</code></td><td>Side menu.</td></tr><tr><td><code>--dialog-bgcolor</code></td><td><code>--secondary-bgcolor</code></td><td>-</td></tr><tr><td><code>--submenu-bgcolor</code></td><td><code>--tertiary-bgcolor</code></td><td>-</td></tr><tr><td><code>--light-mode-entity-bg</code></td><td><code>#5DB3E216</code></td><td>Profile background with custom icon. Replace light-mode with the appropriate theme class: <code>--MyOwnTheme-entity-bg</code>. This is a dynamic class and is built from the theme class that uses it</td></tr><tr><td><code>--bg-image</code></td><td><code>url("%=@BASEURL%>__themes__/BackgroundImg.png "</code></td><td>URL of the main panel background image. Replace <code>BackgroundImg.png</code> with the appropriate filename.</td></tr><tr><td><code>--bg-size</code></td><td><code>contain</code></td><td>Size of the background image: auto/contain/cover/inherit/initial/revert/unset.</td></tr><tr><td><code>--bg-blend-mode</code></td><td><code>none</code></td><td>Background image blend mode (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode">See demo</a>).</td></tr></tbody></table>
{% endtab %}

{% tab title="Buttons" %}

<table><thead><tr><th width="237.79998779296875">Variable</th><th>Default Value</th><th>Scope</th></tr></thead><tbody><tr><td><code>--button-bgcolor</code></td><td><code>--primary-color</code></td><td>Background color of the primary action button.</td></tr><tr><td><code>--button-txtcolor</code></td><td>#FFFFFF</td><td>Text color.</td></tr><tr><td><code>--button-bgcolor-h</code></td><td><code>--dark-primary-color</code></td><td>Background color on hover.</td></tr><tr><td><code>--button-txtcolor-h</code></td><td>#FFFFFF</td><td>Text color on hover.</td></tr><tr><td><code>--outline-button-color</code></td><td><code>--button-bgcolor</code></td><td>Text color and border of the secondary action button.</td></tr><tr><td><code>--outline-button-bgcolor-h</code></td><td><code>--button-bgcolor-h</code></td><td>Background color on hover.</td></tr><tr><td><code>--outline-button-color-h</code></td><td><code>--button-txtcolor-h</code></td><td>Text color on hover.</td></tr><tr><td><code>--special-button</code></td><td>#FFFFFF</td><td>-</td></tr><tr><td><code>--switcher-button</code></td><td>#ADADAD</td><td>-</td></tr></tbody></table>
{% endtab %}

{% tab title="Texts" %}

<table><thead><tr><th width="208.39996337890625">Variable</th><th width="185.60003662109375">Default Value</th><th>Scope</th></tr></thead><tbody><tr><td><code>--primary-txtcolor</code></td><td><code>--bgcolor</code></td><td>Menu, general texts, Access Profile names.</td></tr><tr><td><code>--secondary-txtcolor</code></td><td>#ADADAD</td><td>Clearer texts, for example the icons that appear below the Access Profiles.</td></tr><tr><td><code>--heading-color</code></td><td><code>--dark-primary-color</code></td><td>Headers.</td></tr><tr><td><code>--border-color</code></td><td>#ADADAD</td><td>Borders.</td></tr><tr><td><code>--light-border-color</code></td><td>#C4C4C4</td><td>Lighter borders.</td></tr><tr><td><code>--separator</code></td><td>#B2B2B2</td><td>Separators.</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

### Secondary Styling Rules

{% tabs %}
{% tab title="Links and Menus" %}

| Variable                  | Default Value           | Scope                  |
| ------------------------- | ----------------------- | ---------------------- |
| `--link-color`            | `--primary-color`       | -                      |
| `--link-color-h`          | #5DB4E2                 | -                      |
| `--menu-selected-color`   | `--dark-primary-color`  | Text and border color. |
| `--menu-selected-bgcolor` | `--light-primary-color` | Background color.      |
| {% endtab %}              |                         |                        |

{% tab title="Tables" %}

| Variable                 | Default Value         | Scop                               |
| ------------------------ | --------------------- | ---------------------------------- |
| `--table-header-bgcolor` | `--hover-bgcolor`     | Table header background color.     |
| `--table-body-bgcolor`   | `--secondary-bgcolor` | Table body background color.       |
| `--table-body-bgcolor-h` | `--tertiary-bgcolor`  | Background color of rows on hover. |
| {% endtab %}             |                       |                                    |

{% tab title="Extras" %}

<table><thead><tr><th width="150.7777099609375">Variable</th><th width="158.22222900390625">Default Value</th><th>Description</th></tr></thead><tbody><tr><td><code>--disabled</code></td><td>#ADADAD</td><td>Disabled buttons or texts.</td></tr><tr><td><code>--danger</code></td><td>#DC4847</td><td>Errors, Danger buttons.</td></tr><tr><td><code>--alert</code></td><td>#F17C1C</td><td>Warnings.</td></tr><tr><td><code>--allowed</code></td><td>#4ECC64</td><td>Success messages.</td></tr><tr><td><code>--shadow-color</code></td><td>#00000019</td><td>Shadows.</td></tr></tbody></table>
{% endtab %}

{% tab title="Logos" %}

<table><thead><tr><th width="146.60003662109375">Variable</th><th width="259.91107177734375">Default Value</th><th>Scope</th></tr></thead><tbody><tr><td><code>--desktop-logo</code></td><td><code>url("&#x3C;%=@BASEURL%>__themes_ _/YourLogo.svg ")</code></td><td>Replace <code>YourLogo.svg</code> with the name of the appropriate file. Remember that this file must be located in the folder defined for the .css file. It will be used in the product portal where the connections are displayed.</td></tr><tr><td><code>--mobile-logo</code></td><td><code>url("&#x3C;%=@BASEURL%>_ _themes__/YourMobileLogo.svg")</code></td><td>Logo used in the header in mobile and in the connections with the semi-folded side menu.</td></tr><tr><td><code>--login-logo</code></td><td><code>url("&#x3C;%=@BASEURL%>__themes__/YourLogo.svg ")</code></td><td>Logo on the login box.</td></tr><tr><td><code>--logo-bg-size</code></td><td><code>contain</code></td><td>Logo size: auto/contain/cover/inherit/initial/revert/unset</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

### **CSS Overrides**

Even if certain elements are not defined among those configured through variables, **Thinfinity Workspace** allows new styles to be applied to other interface elements.

{% hint style="danger" %}
**Warning**

These styles should be applied specifically alongside the class that defines the theme, to prevent unintended effects on other existing themes.
{% endhint %}