Theme tweaking with CSS variables

[yuri]

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

{
    "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:

: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):

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

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

[murugappan]

HI yuri ,

Under 1, We need to create a file custom/Espo/Custom/Resources/metadata/client.json. This seems to create a the file outside of any folder under Create a file custom/Espo/Custom/Resources/metadata/. Is my assumption correct?

[yuri]

It should be app/client.json. I fixed, it was a mistake copied from another tutorial. The file is the same as used for custom icons.

[Viktoria Kirsch]

Hello everyone,
Is it possible to reactivate the old ESPO theme? With the update to 9.2.2, the default theme has changed, but my company would like to have the old theme back. Is there any way to do this?

Best regards,
Vika

[yuri]

Hi Viktoria,

The old theme changed colors. You need to apply customization described in this tutorial to change colors. Use an online color picker (google 'color picker') to play with colors to find the needed color code.