QA &raquo; openQA Project

Category:

Feature requests

Target version:

Ready

Start date:

2022-10-19

Due date:

2022-11-04

% Done:

Estimated time:

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

Files

Screenshot_20221025_105420.png (15.3 KB) Screenshot_20221025_105420.png

Broken gradient

favogt, 2022-10-25 08:55

Related issues 6 (3 open — 3 closed)

Related to openQA Project - action #119362: [darkmode] Test overview table header is broken

Resolved

2022-10-25

Related to openQA Project - action #119365: [darkmode] Some form buttons are invisible by default

Resolved

2022-10-25

Related to openQA Project - action #119371: [darkmode] Search results are bright white

New

2022-10-25

Related to openQA Project - action #119374: [darkmode] Various tables have broken borders

New

2022-10-25

Related to openQA Project - action #119386: [darkmode] Some large pages show up with light theme briefly before switching to dark theme

Resolved

2022-10-25

Related to openQA Project - action #119563: [darkmode] Update obs_rsync

New

2022-10-28

Issue # Delay: days Cancel

History
Notes
Property changes

Actions

Updated by tinita over 1 year ago

Subject changed from Help with dark mode development to Help with dark mode development size:M
Description updated (diff)
Status changed from New to Workable

Actions

Updated by kraih over 1 year ago

Assignee set to kraih

Actions

Updated by kraih over 1 year ago

Status changed from Workable to In Progress

Actions

Updated by openqa_review over 1 year ago

Due date set to 2022-11-04

Setting due date based on mean cycle time of SUSE QE Tools

Actions

Updated by kraih over 1 year 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.

Actions

Updated by kraih over 1 year 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.

Actions

Updated by kraih over 1 year ago

Opened a PR with reorganised CSS and theme settings based on the session cookie. https://github.com/os-autoinst/openQA/pull/4861

Actions

Updated by kraih over 1 year ago

Status changed from In Progress to Resolved

PR has been applied.

Actions

Updated by okurz over 1 year 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

Actions

#10

Updated by favogt over 1 year ago

File Screenshot_20221025_105420.png Screenshot_20221025_105420.png added

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)

Actions

#11

Updated by favogt over 1 year 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.

Actions

#12

Updated by kraih over 1 year ago

I've made a PR to fix the regressions in the old light mode theme. https://github.com/os-autoinst/openQA/pull/4865

Actions

#13

Updated by kraih over 1 year ago

This is not the right ticket to collect bugs in the new dark mode theme though. Please make new ones for that, otherwise it would go on forever, since there are a lot of bugs. :)

Actions