Help with dark mode development size:M
pdostal did some great work in https://github.com/os-autoinst/openQA/pull/4724 with only minor details left to do. Let's support pdostal and show 'em appreciation :)
- AC1: darkmode is available in openQA based on configuration
- Work on suggestions from https://github.com/os-autoinst/openQA/pull/4724#issuecomment-1282991495
- Add three settings in the openQA UI with a cookie to make them permanent 1) automatic light/dark mode based on browser 2) force light mode 3) force dark mode
Unfortunately after some research and experimentation i don't see a way to make a theme selector work with the current SCSS files. There is no way to override
Marius had the idea to replace the media queries with a
.darkmode class, which is then conditionally applied to the
<body> element. That makes forced light/dark mode very easy, and with the
Window.matchMedia() API it should also work for detection. Personally i would prefer a separate darkmode CSS file with overrides for the base light mode CSS file. But we don't know yet if all the darkmode settings would work that way. So i'll first explore the
.darkmode class solution.
- Status changed from Resolved to Feedback
- Priority changed from Normal to High
https://suse.slack.com/archives/C02CANHLANP/p1666682371208839 mentions some regressions in the light theme, e.g.
- the color of icons in job tables seems to differ
- grey background rows in tables, e.g. jobs table and tests overview are missing
- text popups in test details is now grey, should be black
Some table headers have a weird gradient, e.g. on https://openqa.opensuse.org/tests/overview?distri=microos&distri=opensuse&version=Tumbleweed&build=20221024&groupid=3 (see screenshot)
That is apparently because bootstrap's fixedheader sets background: white.