Univention Bugzilla – Bug 53390
UCS 5 design: Implement light theme
Last modified: 2021-08-16 15:42:29 CEST
univention-web-style should ship /usr/share/univention-web/themes/dark.css /usr/share/univention-web/themes/light.css +++ This bug was initially created as a clone of Bug #53307 +++ 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".
... and the theme.css should be included in the web interfaces.
The light theme is implemented. dark.css and light.css are put under /usr/share/univention-web/themes/ dark.css is copiled into umc.css as fallback the files still contain all used css variables, even the ones that may not be of interest for "themeing" e.g. a variable for the height of inputfields. f09e13568f Bug #53390: yaml f4accf0071 Bug #53390: Merge branch 'jkeiser/bug53390_light_theme' into 5.0-0 1481397bdf Bug #53390: yaml f640f56dde Bug #53390: debian changelog cdb63e4960 Bug #53390: add light theme and put themes add right locations eb9d1b6212 Bug #53390: remove unneeded file 35edf036c6 Bug #53390: remove unneeded build step 57496a304a Bug #53390: rename var 84ea9b9b8c Bug #53390: udm styling advanced search 90c77cec43 Bug #53390: error/warning/success colors and cleanup color usages 663fa749ff Bug #53390: diagnostic font styling 51f1ee3bdc Bug #53390: remove font color changes for category colors (for now) 77e4656c70 Bug #53390: updates page styling for error a500d86be5 Bug #53390: add theme.css to index f061b6de88 Bug #53390: fix ImageGallery starting wrong video ba9d4eb813 Bug #53390: login styling input fields 2f11910cb7 Bug #53390: menu header styling d8e148a0bd Bug #53390: remove unused code b4c15571f0 Bug #53390: remove unused styling 0907214775 Bug #53390: module tab stying e436bc9d2e Bug #53390: snackbar notification styling 261c3a5a40 Bug #53390: gridtile styling 78c4d78bde Bug #53390: add theme.css to html files 441d08b4af Bug #53390: combobox styling ae0d428fa6 Bug #53390: rename var 2fa9a1e466 Bug #53390: remove unused vars fe1d406efa Bug #53390: self service styling 09eade0139 Bug #53390: labelpane styling 76cd847952 Bug #53390: image styling 94272ee8e3 Bug #53390: input styling 97d65b953a Bug #53390: titlepane styling 6594668b53 Bug #53390: server overview styling 3c19c454d2 Bug #53390: progressbar styling 813b120edd Bug #53390: module styling 3fccfb8a84 Bug #53390: button styling fd33614a93 Bug #53390: button styling 1bd5bf78ba Bug #53390: appcenter styling 81d7e6f8dd Bug #53390: calendar styling 0942119e53 Bug #53390: popup styling 167e54b29f Bug #53390: appcenter styling b3d6011baa Bug #53390: toggle button styling 50b9e05909 Bug #53390: cleanup ea7dfc331d Bug #53390: buttons styling 0b5ec4e88a Bug #53390: notifications styling 9881c60294 Bug #53390: tree and grid styling 6e12f5978f Bug #53390: popup styling 2c2239b40e Bug #53390: tooltip styling 509b7fb115 Bug #53390: remove backdrop-filter dd744f832d Bug #53390: tab styling d7f8af087d Bug #53390: login styling 465d41987a Bug #53390: mobile tabs styling aafb883424 Bug #53390: notifications styling facf8b9778 Bug #53390: menu styling 453e6f4b0c Bug #53390: login input border trasition 123eb8d0d5 Bug #53390: login styling 5d6714e73f Bug #53390: header logo 87b960cee2 Bug #53390: standby styling 0b5080f81e Bug #53390: TitlePane styling 85e65b9ce4 Bug #53390: MultiSelect styling 7c7b499fd7 Bug #53390: breadcrumb styling d9961fc9ad Bug #53390: umcGalleryItem styling 3687916429 Bug #53390: link styling Successful build Package: univention-web Version: 4.0.1-32A~5.0.0.202106111349 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-saml Version: 7.0.4-15A~5.0.0.202106111357 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-server-overview Version: 3.0.1-5A~5.0.0.202106111359 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-self-service Version: 5.0.1-13A~5.0.0.202106111401 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-management-console Version: 12.0.12-4A~5.0.0.202106111404 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-management-console-module-udm Version: 10.0.1-11A~5.0.0.202106111404 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-management-console-module-diagnostic Version: 6.0.0-12A~5.0.0.202106111405 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-appcenter Version: 9.0.2-50A~5.0.0.202106111405 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-system-activation Version: 5.0.1-2A~5.0.0.202106111406 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-updater Version: 15.0.3-65A~5.0.0.202106111405 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-system-setup Version: 13.0.3-32A~5.0.0.202106111406 Branch: ucs_5.0-0 Scope: errata5.0-0
c3039d6dd5 Bug #53390: yaml 205309cfa9 Bug #53390: debian changelog e05200f0d5 Bug #53390: use dark theme as fallback theme Successful build Package: univention-web Version: 4.0.1-33A~5.0.0.202106111434 Branch: ucs_5.0-0 Scope: errata5.0-0
REOPEN: in management/univention-management-console/www/management/index.html "//<!--" and "//-->" has been removed. Please revert this. Please add to all index.html files: <link rel="alternate stylesheet" type="text/css" title="Light" rel="/univention/light.css" /> <link rel="alternate stylesheet" type="text/css" title="Dark" rel="/univention/dark.css" />
(In reply to Florian Best from comment #4) > Please add to all index.html files: > <link rel="alternate stylesheet" type="text/css" title="Light" > rel="/univention/light.css" /> > <link rel="alternate stylesheet" type="text/css" title="Dark" > rel="/univention/dark.css" /> This only makes sense if we could really iterate over all themes. So that the administrator can add their theme to this list. And remove the, say, Dark option, as they really do not want anyone to use it with their corporate identity.
(In reply to Florian Best from comment #4) > REOPEN: > in management/univention-management-console/www/management/index.html > "//<!--" and "//-->" has been removed. Please revert this. > Is there a purpose for those comments?
(In reply to Johannes Keiser from comment #6) > (In reply to Florian Best from comment #4) > > REOPEN: > > in management/univention-management-console/www/management/index.html > > "//<!--" and "//-->" has been removed. Please revert this. > > > Is there a purpose for those comments? Yes, they keep the files parseable for strict XML parsers e.g. used in test scripts.
(In reply to Dirk Wiesenthal from comment #5) > (In reply to Florian Best from comment #4) > > Please add to all index.html files: > > <link rel="alternate stylesheet" type="text/css" title="Light" > > rel="/univention/light.css" /> > > <link rel="alternate stylesheet" type="text/css" title="Dark" > > rel="/univention/dark.css" /> > > This only makes sense if we could really iterate over all themes. So that > the administrator can add their theme to this list. And remove the, say, > Dark option, as they really do not want anyone to use it with their > corporate identity. It makes sense for those 2 which we are aware of that they always exist. Using this also does not change anything for the regular users, the Admins of a Domain can simply set the UCR variables and the theme is switched. It's just Firefox which can also change the layout on the fly then. We don't have to document this feature. It helps also developers to compare the themes on the fly without doing a page reload. It doesn't really cost anything. We also want somewhen to offer a theme switcher via the menu/etc. I didn't hear any usecase that we want to make Admins able to prevent users from using the other theme.
(In reply to Florian Best from comment #7) > (In reply to Johannes Keiser from comment #6) > > (In reply to Florian Best from comment #4) > > > REOPEN: > > > in management/univention-management-console/www/management/index.html > > > "//<!--" and "//-->" has been removed. Please revert this. > > > > > Is there a purpose for those comments? > > Yes, they keep the files parseable for strict XML parsers e.g. used in test > scripts. bcbc1986df Bug #53390: yaml 88977cd2ef Bug #53390: debian changelog ef90e5b0ab Bug #53390: revert breaking xml parging Successful build Package: univention-management-console Version: 12.0.12-5A~5.0.0.202106150637 Branch: ucs_5.0-0 Scope: errata5.0-0(In reply to Florian Best from comment #4) > REOPEN: > in management/univention-management-console/www/management/index.html > "//<!--" and "//-->" has been removed. Please revert this. > > Please add to all index.html files: > <link rel="alternate stylesheet" type="text/css" title="Light" > rel="/univention/light.css" /> > <link rel="alternate stylesheet" type="text/css" title="Dark" > rel="/univention/dark.css" /> I still would like to do this with a different bug. We discussed beforehand that implementing alternate stylesheets is not part of this bug/user story and there are still things to clarify. - Do we care that all themes are downloaded/requested even if not used - how are custom themes integrated, - just doing this for firefox seems not worth it - needs to be activated in chrome browser - so we want a javascript solution too - should themes be forcible - with regards to custom themes ...
Created attachment 10749 [details] Screenshot The icons on the UMC aren't rendered black.
Here is the english version of the doc https://git.knut.univention.de/univention/ucs/-/tree/jkeiser/bug53390_doc https://jenkins.knut.univention.de:8181/view/Doku/job/BuildDocBookBranch/320/artifact/webroot/manual-5.0.html
95ed1a2a7b Bug #53390: yaml 95ed1a2a7b Bug #53390: yaml 4e109e059e Bug #53390: debian changelog eaed3732e9 Bug #53390: adjust Image widget styling c2eaccc630 Bug #53390: debian changelog 53e6c55f2e Bug #53390: adjust app default bgc in light theme c2747ffeb8 Bug #53390: add var for underlays 5f4364be35 Bug #53390: adjust app tile hover bff5b93def Bug #53390: adjust appcenter error/warning colors 9c33bfa438 Bug #53390: use consistent color code style f471d2cb5e Bug #53390: remove color palette vars 36145b6285 Bug #53390: remove unused ruleset 112554faae Bug #53390: checkbox styling d643a31fa7 Bug #53390: adjust button style de2e1c0b5e Bug #53390: cleanup CheckBox.styl 87932feea4 Bug #53390: replace color primary vars e12fffb0ba Bug #53390: rename var 80e9cad23d Bug #53390: fix typo 135c125349 Bug #53390: adjust font colors on category colors Successful build Package: univention-web Version: 4.0.1-35A~5.0.0.202106211257 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-management-console Version: 12.0.12-6A~5.0.0.202106211305 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-appcenter Version: 9.0.2-52A~5.0.0.202106211306 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-system-setup Version: 13.0.3-33A~5.0.0.202106211310 Branch: ucs_5.0-0 Scope: errata5.0-0 (In reply to Florian Best from comment #10) > Created attachment 10749 [details] > Screenshot > > The icons on the UMC aren't rendered black. Since /univention/management/ is not the primary focus anymore and fixing this would touch a lot of packages we want to fix this with a different bug after this bug is released in next errata. https://forge.univention.org/bugzilla/show_bug.cgi?id=53488
8df01767c6 Bug #53390: yaml b98ed51d19 Bug #53390: debian changelog 328c33fcec Bug #53390: move some vars out of theme files Successful build Package: univention-web Version: 4.0.1-36A~5.0.0.202106211715 Branch: ucs_5.0-0 Scope: errata5.0-0 Successful build Package: univention-appcenter Version: 9.0.2-53A~5.0.0.202106211722 Branch: ucs_5.0-0 Scope: errata5.0-0
The theme works and looks as promised. It is minimal in that it only defines relevant variables. Others have been outsourced. It uses spoken names. All UDM modules are adjusted. I did not find any left over variables. (Actually, I found two orphaned variables, but those were already broken before this bug)
<https://errata.software-univention.de/#/?erratum=5.0x22> <https://errata.software-univention.de/#/?erratum=5.0x23> <https://errata.software-univention.de/#/?erratum=5.0x24> <https://errata.software-univention.de/#/?erratum=5.0x25> <https://errata.software-univention.de/#/?erratum=5.0x26> <https://errata.software-univention.de/#/?erratum=5.0x27> <https://errata.software-univention.de/#/?erratum=5.0x28> <https://errata.software-univention.de/#/?erratum=5.0x29> <https://errata.software-univention.de/#/?erratum=5.0x30> <https://errata.software-univention.de/#/?erratum=5.0x31> <https://errata.software-univention.de/#/?erratum=5.0x32>