[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: |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
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, |
Comment by Evgeny Semerikov [ 2023 Feb 14 ] |
Hello Michal,
|
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. |
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. |