Project

General

Profile

action #119032

Help with dark mode development size:M

Added by okurz 4 months ago. Updated 3 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

Screenshot_20221025_105420.png (15.3 KB) Screenshot_20221025_105420.png Broken gradient favogt, 2022-10-25 08:55
13972

Related issues

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

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

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

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

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

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

History

#1 Updated by tinita 4 months 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

#2 Updated by kraih 4 months ago

  • Assignee set to kraih

#3 Updated by kraih 4 months ago

  • Status changed from Workable to In Progress

#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

#8 Updated by kraih 3 months ago

  • Status changed from In Progress to Resolved

PR has been applied.

#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

#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

#13 Updated by kraih 3 months 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. :)

#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

#18 Updated by kraih 3 months ago

I think darkmode is in a usable state again now.

#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

#20 Updated by kraih 3 months ago

  • Status changed from Feedback to Resolved

#21 Updated by kraih 3 months ago

Also available in: Atom PDF