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.

[murugappan]

Hi yuri i tried the codes as per your example. The code in client/custom/css/my-theme-tweaks.css seems to give errors in the editor. Please see below:

[yuri]

I don't see any error in the code. Maybe a hidden character was added? The forum sometimes adds hidden characters in code blocks, happened many here times before.

[yuri]

Or maybe the editor does not support the modern CSS.