Theme tweaking with CSS variables

**yuri** · 2025-10-15T08:02:59+00:00

1. Create a file custom/Espo/Custom/Resources/metadata/client.json:

Code:

{
    "cssList": [
        "__APPEND__",
        "client/custom/css/my-theme-tweaks.css"
    ]
}

Note that the file may already exist. In this case, modify the file, keep the JSON valid.

2. Create a file client/custom/css/my-theme-tweaks.css:

Code:

:root {
    --navbar-inverse-color: #b9b9b9;
    --navbar-inverse-bg: #3a61a1;
    --navbar-inverse-link-color: #c6c6c6;
    --navbar-inverse-link-active-bg: #254377;
    --navbar-inverse-border: #3a61a1;
    --navbar-inverse-toggle-hover-bg: #d3d9e0;
    --navbar-inverse-link-hover-color: #dddddd;
    --navbar-inverse-link-hover-bg: #304f8a;
    --navbar-inverse-link-disabled-color: #8e8e8e;
    --navbar-inverse-link-icon-color: #efefef;
    --navbar-inverse-link-icon-hover-color: #cacaca;
}

This will change the navbar colors as on the screenshot.

3. Clear cache in Espo.

Note. As of v9.2.3, it's possible to apply variables to a particular theme only (except for the login screen):

Code:

:root {
    body[data-theme-name="ThemeName"] {
    }
}

Where, ThemeName is the name of the theme, e.g. 'Violet'.