The theme gives Portail ZAPP its colors, shapes (rounded corners, shadows) and fonts, in light and dark mode. Two screens, reserved for Administrators, change it without redeployment:
- Design (menu Administration › Appearance and languages › Design): guided setting, value by value, with a preview;
- Theme files (menu Administration › Appearance and languages › Theme files): replacement of the theme's style files, to go beyond the Design screen.
The page structure (navigation bar, menu) cannot be changed.
Design screen
No active theme
If no theme is active, the screen first asks for a theme name: lowercase letters, digits and hyphens (for example my-theme), then Create. The message Theme created. Adjust the values then save. confirms the creation.
Setting the values
Choose Light or Dark, then adjust the values, grouped by family: Brand, Surfaces, Border, Text, Shapes and Fonts. A color is chosen with the picker or typed in (for example #2563EB); the other values are typed in (corner radius, shadow, font list).
The Preview, on the right, shows the effect live (buttons, card, form, table) before anything is saved.
- Save applies the theme to everyone at once: Theme saved, applied immediately. A rejected value shows One of the entered values is not accepted and nothing is saved.
- Revert to shipped theme, offered once the theme is customized, removes the customization: Customization removed, the shipped theme is used again.
Theme files screen
The screen shows the Active theme and lists its style files, with their Status:
- Shipped file: the original file is used;
- Overridden: your version replaces the original file;
- Absent: the theme has no such file.
To change a file: Download, edit it, choose it then Upload (Theme file updated). The change takes effect immediately. Revert to shipped file deletes your version.
A file is refused if it is empty, larger than 256 KiB, does not look like CSS, or has unbalanced braces. Without an active theme, nothing can be replaced.
Good to know
- The Design screen and the
…-tokens.cssfile of the Theme files screen hold the same values. Save in Design rewrites that file: a value added by hand to that file, other than those of the Design screen, is lost (imports and font declarations at the top of the file are kept). Make your advanced changes in the theme's other file (…-compat.css). - Revert to shipped theme and Revert to shipped file on that same file have the same effect.
See also
- "Customizing the name and logo": application name, logo and icons.