[ZBX-22335] Tear out the eye with dark theme and graph Created: 2023 Feb 09  Updated: 2023 Feb 17  Resolved: 2023 Feb 16

Status: Closed
Project: ZABBIX BUGS AND ISSUES
Component/s: Frontend (F)
Affects Version/s: 6.2.7
Fix Version/s: None

Type: Incident report Priority: Trivial
Reporter: Evgeny Semerikov Assignee: Michal Czerniakiewicz
Resolution: Won't fix Votes: 1
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Working time.png     PNG File image-2023-02-09-20-26-48-544.png     PNG File image-2023-02-09-20-27-19-545.png     PNG File image-2023-02-10-16-12-17-218.png     PNG File image-2023-02-15-18-45-03-385.png     PNG File image-2023-02-15-18-45-42-496.png     PNG File image-2023-02-15-18-47-17-761.png     PNG File image-2023-02-15-18-47-50-232.png     PNG File image-2023-02-15-18-48-57-862.png     PNG File image-2023-02-15-18-49-13-665.png     PNG File image-2023-02-15-19-01-36-296.png    

 Description   

Usually I'm use Blue theme and all good with it. But nearly I'm try to use Dark theme and get bad expirience with graph.

This is graph in Blue theme:

This is same graph in Dark theme:

As can you see both graphs have working time delimiters, but in dark theme it is tear out the eye.

I'm try to investigate and fix this problem by editing CSS file, but this not hava effect... 

Color of work-off time is #ebebeb which is founded in ".timeline-axis" class in CSS, but when I'm change it to another color graph still displayed with #ebebeb for work-off time.



 Comments   
Comment by Evgeny Semerikov [ 2023 Feb 09 ]

Also in Dark theme values in axes can't be viewed because text color like background color.

Comment by Evgeny Semerikov [ 2023 Feb 10 ]

Also old graphs too:

Comment by Michal Czerniakiewicz [ 2023 Feb 13 ]

Hello Evgeny,
Could you please provide us information on few basic questions:
1. Is this issue browser independent? Have you tried different one without any extensions or clean the browser cache? Please share us the browser version.
2. What is the distribution version and packages origin? Official Zabbix repo?
3. Do you use some http proxy?
We will replicate the issue and analyze.
Kind regards

Comment by Evgeny Semerikov [ 2023 Feb 14 ]

Hello Michal,

 

  1. Yes, I'm tried few different browsers and this problem is same for this.
    Chrome 110.0.5481.78
    Edge 110.0.1587.41
    Yandex Browser 23.1.2.931
  2. Yes, latest version 6.2.7 from official repo.
  3. No proxies.
Comment by Michal Czerniakiewicz [ 2023 Feb 15 ]

Is it fresh 6.2.7 install or you have upgraded and if from what version? Please let us know also your host OS distribution and web server. We have to check exactly same packages. Please find the examples and let us know the details of your setup https://www.zabbix.com/download.
On screenshots you shared Dark theme colours looks like mixed with Blue. Please check the ownership of the fronted files. The workaround may be changing the of-work time itself so it is not even displayed but I understand it is far from satisfying.

Comment by Evgeny Semerikov [ 2023 Feb 15 ]

This is fresh install of 6.2.7. As I understand all styles must be in CSS file \ui\assets\styles\dark-theme.css

In my case I'm modifyed this to corporate style and renamed CSS files...

BTW, "blue" theme is viewed normal, but dark theme seems have some hard-coded links

PS: zip-file is not supported to pushing here, if you want i can send it via mail (this file includes all changes by me for 6.2.7 version).

Comment by Evgeny Semerikov [ 2023 Feb 15 ]

PS: in original style (dark-theme.css)  all OK

Comment by Evgeny Semerikov [ 2023 Feb 15 ]

There is changes in dark CSS files:

# diff /usr/share/zabbix/assets/styles/dark-theme.css /usr/share/zabbix/assets/styles/x5tech_dark.css 
3111,3112c3111,3114
<   height: 30px;
<   background: url("../img/icon-sprite.svg?20220519") no-repeat 0 -864px; }
---
>   height: 50px;
>   background: url("../img/x5tech/x5tech_white.png") no-repeat;
>   background-size: 94px;
> }
3117c3119,3121
<   background: url("../img/icon-sprite.svg?20220519") no-repeat -570px -400px; }
---
>   background: url("../img/x5tech/x5tech_white.png") no-repeat;
>   background-size: 54px;
> }
3122c3126,3128
<   background: url("../img/icon-sprite.svg?20220519") no-repeat -540px -400px; }
---
>   background: url("../img/x5tech/x5tech_white.png") no-repeat;
>   background-size: 54px;
> } 
Comment by Evgeny Semerikov [ 2023 Feb 15 ]

Also changing in /usr/share/zabbix/include/classes/core/ZBase.php from:

    public static function getThemes() {
        return [
            'blue-theme' => _('Blue'),
            'dark-theme' => _('Dark'),
            'hc-light' => _('High-contrast light'),
            'hc-dark' => _('High-contrast dark')
        ];
    } 

to:

        public static function getThemes() {
                return [
                        'x5tech_blue' => ('X5 Tech (Blue)'),
                        'x5tech_dark' => ('X5 Tech (Dark)')
                ];
        }
 
Comment by Evgeny Semerikov [ 2023 Feb 15 ]

Also with all enabled themes:

 

 

With original theme:

 

 

Comment by Evgeny Semerikov [ 2023 Feb 15 ]

Comment by Michal Czerniakiewicz [ 2023 Feb 16 ]

This is not a bug nor problem with official code or packages. Please find the instruction how to add custom theme https://www.zabbix.com/documentation/current/en/manual/web_interface/theming. In current version you should target file /include/classes/core/APP.php. Regarding your changes in CSS files if you replacing .svg vector images they have to be exact same size and position. I would suggest to backup original files and edit the exact copy for your needs. If you want to replace the logo correctly please look upon this topic https://www.zabbix.com/documentation/current/en/manual/web_interface/rebranding.

Comment by Evgeny Semerikov [ 2023 Feb 16 ]

Thanks Michal, I'm found my mistake in documentation:
 

Note: To change graph colors, the entry must be added in the graph_theme database table.
Comment by Michal Czerniakiewicz [ 2023 Feb 17 ]

I am glad to hear your problems resolved. Thank you for confirmation Evgeny.

Generated at Mon Apr 07 11:40:00 EEST 2025 using Jira 9.12.4#9120004-sha1:625303b708afdb767e17cb2838290c41888e9ff0.