action #119032
Help with dark mode development size:M
0%
Description
Motivation¶
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 :)
Acceptance criteria¶
- AC1: darkmode is available in openQA based on configuration
Suggestions¶
- 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
Related issues
History
#4
Updated by openqa_review 4 months ago
- Due date set to 2022-11-04
Setting due date based on mean cycle time of SUSE QE Tools
#5
Updated by kraih 4 months ago
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 prefers-color-scheme
from HTML/JavaScript, which means the media queries cannot be influenced. So we will have to find a way that does not involve inline media queries.
#6
Updated by kraih 4 months ago
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.
#7
Updated by kraih 3 months ago
Opened a PR with reorganised CSS and theme settings based on the session cookie. https://github.com/os-autoinst/openQA/pull/4861
#9
Updated by okurz 3 months ago
- 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
#10
Updated by favogt 3 months ago
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)
#11
Updated by favogt 3 months ago
favogt wrote:
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.
#12
Updated by kraih 3 months ago
I've made a PR to fix the regressions in the old light mode theme. https://github.com/os-autoinst/openQA/pull/4865
#14
Updated by kraih 3 months ago
- Related to action #119362: [darkmode] Test overview table header is broken added
#15
Updated by kraih 3 months ago
- Related to action #119365: [darkmode] Some form buttons are invisible by default added
#16
Updated by kraih 3 months ago
- Related to action #119371: [darkmode] Search results are bright white added
#17
Updated by kraih 3 months ago
- Related to action #119374: [darkmode] Various tables have broken borders added
#19
Updated by kraih 3 months ago
- Related to action #119386: [darkmode] Some large pages show up with light theme briefly before switching to dark theme added
#21
Updated by kraih 3 months ago
- Related to action #119563: [darkmode] Update obs_rsync added