- Copy
APP.php
to/usr/share/zabbix/include/classes/core/APP.php
This File adds a "Auto Theme" to the Default Theme pool by overriding the MethodgetThemes()
fromZBase
.
If you already have a File like this simply add this Code yourclass APP extends ZBase
public static function getThemes() { return array_merge(parent::getThemes(), [ /* 'css_file_name_without_extension' => _('theme_name_in_ui') */ 'automatic_dark_mode' => _('Auto Theme') ]); }
- Copy
automatic_dark_mode.css
to/usr/share/zabbix/assets/style/auto_dark_mode.css
This CSS File simply imports eitherblue-theme.css
ordark-theme.css
depending on what the media queryprefers-color-scheme
returns. (dark/light) You can also import alternate*.css
Files by simply changingurl('<file>')
.
After you restart the Zabbix Frontend, a new Theme called Auto Theme
should appear.
- Create a
Data
orProvisioning
Folder withing you Compose Project
The "Source" Files will be placed in this Directory
OnlyAPP.php
andautomatic_dark_mode.css
is required - Added Read-Only Mounts to your Docker Compose File
This will add both Files as Read-Only Mountsvolumes: - ./provisioning/zabbix/frontend/APP.php:/usr/share/zabbix/include/classes/core/APP.php:ro - ./provisioning/zabbix/frontend/automatic_dark_mode.css:/usr/share/zabbix/assets/styles/automatic_dark_mode.css:ro
This should be enough, but depending on your Docker Compose Project you might need to
complete additonal steps
- Make this Work with Color Schemes from Graphs/Plots. Those are not controlled by CSS but by a PHP Code in
charts<0-7>.php