Project

General

Profile

Actions
Copy link

action #119032

closed

coordination #128429: [saga][epic] Accessibility improvements in openQA

coordination #128435: [epic] openQA darkmode

Help with dark mode development size:M

Added by okurz about 1 year ago. Updated 7 months ago.

Status:
Resolved
Priority:
High
Assignee:
kraih
Category:
Feature requests
Target version:
Ready
Start date:
2022-10-19
Due date:
2022-11-04
% Done:

0%

Estimated time:
Difficulty:

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

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 brokenResolvedkraih2022-10-25

Actions
Related to openQA Project - action #119365: [darkmode] Some form buttons are invisible by defaultResolvedkraih2022-10-25

Actions
Related to openQA Project - action #119371: [darkmode] Search results are bright whiteNew2022-10-25

Actions
Related to openQA Project - action #119374: [darkmode] Various tables have broken bordersNew2022-10-25

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

Actions
Related to openQA Project - action #119563: [darkmode] Update obs_rsyncNew2022-10-28

Actions
Actions
Copy link
 #1

Updated by tinita about 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
Copy link
 #2

Updated by kraih about 1 year ago

  • Assignee set to kraih
Actions
Copy link
 #3

Updated by kraih about 1 year ago

  • Status changed from Workable to In Progress
Actions
Copy link
 #4

Updated by openqa_review about 1 year ago

  • Due date set to 2022-11-04

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

Actions
Copy link
 #5

Updated by kraih about 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
Copy link
 #6

Updated by kraih about 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
Copy link
 #7

Updated by kraih about 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
Copy link
 #8

Updated by kraih about 1 year ago

  • Status changed from In Progress to Resolved

PR has been applied.

Actions
Copy link
 #9

Updated by okurz about 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
Copy link
 #11

Updated by favogt about 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
Copy link
 #12

Updated by kraih about 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
Copy link
 #13

Updated by kraih about 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
Copy link
 #14

Updated by kraih about 1 year ago

  • Related to action #119362: [darkmode] Test overview table header is broken added
Actions
Copy link
 #15

Updated by kraih about 1 year ago

  • Related to action #119365: [darkmode] Some form buttons are invisible by default added
Actions
Copy link
 #16

Updated by kraih about 1 year ago

  • Related to action #119371: [darkmode] Search results are bright white added
Actions
Copy link
 #17

Updated by kraih about 1 year ago

  • Related to action #119374: [darkmode] Various tables have broken borders added
Actions
Copy link
 #18

Updated by kraih about 1 year ago

I think darkmode is in a usable state again now.

Actions
Copy link
 #19

Updated by kraih about 1 year ago

  • Related to action #119386: [darkmode] Some large pages show up with light theme briefly before switching to dark theme added
Actions
Copy link
 #20

Updated by kraih about 1 year ago

  • Status changed from Feedback to Resolved
Actions
Copy link
 #21

Updated by kraih about 1 year ago

Actions
Copy link
 #22

Updated by okurz 7 months ago

  • Parent task set to #128429
Actions
Copy link
 #23

Updated by okurz 7 months ago

  • Parent task changed from #128429 to #128435
Actions
Copy link

Also available in: Atom PDF