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.

[murugappan]

Hi yuri

1) You are right the editor did support the css. I switched it to legacy editor and the error is gone.
(2) I upgraded to version 9.2.3 just now and the colors look as you have shown above only one suggestion. The labels are dim to see against the light background. It would be great if the labels were made bold.
(3) I tried your tutorial but it did not work. The changes did not take effect. Following are the code

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

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

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

:root {
body[data-theme-name="Violet"] {
--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;
}
}​

[yuri]

Do you have the Violet theme set in the system now? This code applies only if the Violet theme is set. You need to either specify the theme (e.g Hazyblue) or don't use the theme selector:


:root {

}

Also need to note that the browser may cache the file for a while. After changes Ctrl + F5 may be needed or clearing cache in the browser.

[murugappan]

Hi yuri

Thank you for the assistance. After some testing it now seems to work as follows

(1) The theme css setting:

:root {
body[data-theme-name="Violet"] {
--navbar-bg: #17255A;
--navbar-link-color: #999;
--navbar-link-icon-color: #6a6a6a;
--navbar-link-hover-color: #555555;
--navbar-link-hover-bg: #f1f3f5;
--navbar-link-active-bg: #d3d9e0;
--navbar-inverse-color: #b9b9b9;
--navbar-inverse-bg: #17255A;
--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;
}
}

(2) The result is :



(3) When i set the theme name as "Emas", i do not get the option to select the "Emas" theme in the User Interface. Is it because we cannot have custom themes?

(4) I notice there is no css setting for the content area. How can I set these setting?

[yuri]

This method overrides variables for existing themes. To create a new theme, some more steps are needed.

There are many variables used besides those that listed above, those are only for the navbar. You can find them all in the browser console (F12 > Elements > click html tag > see the right panel. It's possible to tweak colors right here and see the result instantly.

Here's all variable names used: https://github.com/espocrm/espocrm/b...variables.less