glpi
glpi copied to clipboard
glpi-project
Improved theme support
| Q | A |
|---|---|
| Bug fix? | no |
| New feature? | yes |
| BC breaks? | no |
| Deprecations? | no |
| Tests pass? | yes |
| Fixed tickets | - |
Adds a Theme class to represent a theme/palette including the key, display name, if it is a dark theme or not, and if it was included by GLPI itself.
Core themes are statically defined in the new class. Any theme in the palette folder that is not defined as a core theme is considered custom. With custom themes, it tries to guess if it is a dark theme based on the file name. Custom themes were not technically documented/supported before, but they did work properly so I felt that some support to prevent breaking functionality was needed.
With this, it is now possible to know if the current theme is a dark theme or not. On the PHP side, there was no real way to know this without checking for specific palette names or parsing the stylesheet. On the client side, a hack was used to check the "--is-dark" CSS variable. It also was not possible for CSS stylesheets from plugins to have any logic based on if the current theme was dark or not as the SCSS variable $is-dark is not available to them.
Now, the current palette/theme is added as a data attribute on the "html" element along with a data attribute indicating if it is dark or not. JS code can now check the new data attribute instead of the root CSS, and plugin stylesheets can use the attribute in a selector.
In the palette selector, there are now cleaner display names for the core palettes thanks to being able to define it through the new Theme class. For custom palettes, the name is automatically generated similar to how it was before, but it replaces "_" with a space now.
@cconard96
With this PR, will it be possible to use CSS variables from the entity configuration ?
@cconard96 With this PR, will it be possible to use CSS variables from the entity configuration ?
No. The customization CSS is regular CSS and not SCSS so it cannot use Sass style variables at all. They can however use any regular CSS variables declared by the main styles or palettes.
Summary of our discussion with @cedric-anne
- we add the GLPI_THEMES_DIR constant (default on
files/_themes) for let users adding custom theme files - if we find a custom theme in the base dir, we manage it but with a deprecation warning.
- we try to autodetect custom/dark themes based on their content (and not on their name)
- we abandon the idea of plugin for the moment (if needed for us, let discuss again on this)
