Univention Bugzilla – Bug 53307
UCS 5 design: Implement theme switch
Last modified: 2023-12-21 15:38:18 CET
Every web interface (e.g., portal, UMC, login) gets another `link rel="stylesheet"`. **It is the same for all web interfaces**: `/univention/theme.css` We need a UCR module that listens to a UCR variable, that sets the path to the actual theme file that holds the content. Example: `ucr set ucs/web/theme=/usr/share/univention-web/dark.css` It would then add a symlink to `/var/www/univention/theme.css`. Which variables are needed for a light theme? Document these, as for now, they define the officially supported range of a theme. Make sure the variable names are speaking, e.g. "--color-contrast-high" instead of "--color-white".
We should include the available variants (light, dark) as alternative stylesheet: https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets <link rel="alternate stylesheet" type="text/css" title="Light" rel="light.css" /> <link rel="alternate stylesheet" type="text/css" title="Dark" rel="dark.css" /> Somewhen we can also offer a Javascript theme switcher using these alternative stylesheets (see also: https://css-tricks.com/examples/AlternateStyleSheets/styleswitcher.js), so that a user can define its preferred theme.
This is the switch part: ucr set ucs/web/theme?'dark' ucs/web/theme='light' Script: /etc/univention/templates/scripts/symlink-web-theme.sh ucs/web/theme: dark Name of the theme to be applied to all web interfaces (e.g., login, portal, UMC). Example: "dark" or "light". A CSS file of the same name has to exist in the folder /usr/share/univention-web/themes/. Categories: management-umc Default: dark It links /usr/share/univention-web/themes/light.css to /var/www/univention/theme.css. Package: univention-web Version: 4.0.1-31A~5.0.0.202106040953 Branch: ucs_5.0-0 Scope: errata5.0-0
OK: symlink is correctly set after upgrade OK: symlink is only updated if file exists OK: ucr var name/description OK: yaml -> verified
<https://errata.software-univention.de/#/?erratum=5.0x23>
Browsers meanwhile have a preference for light/dark theme: E.g. via CSS: @media (prefers-color-scheme: dark) { /* style for Dark Mode */ } @media (prefers-color-scheme: light) { /* style for Light Mode */ } Or via javascript: if (window.matchMedia) { const stylesheet = document.getElementById('stylesheet'); if (window.matchMedia('(prefers-color-scheme: dark)').matches) { stylesheet.setAttribute('href', '/univention/themes/dark.css'); } else if (window.matchMedia('(prefers-color-scheme: light)').matches) { stylesheet.setAttribute('href', '/univention/themes/light.css'); } }