Page MenuHomePhorge

Improve Dark Mode
Open, NormalPublic

Assigned To
None
Authored By
Labricator
Oct 24 2021, 22:11
Referenced Files
F5102768: D25491 Before.png
Wed, Jun 11, 15:53
F416075: Links Before.png
Wed, Jun 11, 14:48
F3709281: image.png
Apr 25 2025, 05:45
F3622320: Screenshot From 2025-04-21 13-57-21.png
Apr 21 2025, 11:59
F3605710: image.png
Apr 21 2025, 01:15
F3605701: image.png
Apr 21 2025, 01:15
F2282585: project-workboard-after.png
Jul 6 2024, 15:28
F2282542: project-workboard-before.png
Jul 6 2024, 15:28
Tokens
"Love" token, awarded by Iniquity."Like" token, awarded by valerio.bozzolan."Love" token, awarded by Rexogamer.

Description

This is a backlog task for problems with the Dark Mode feature.


Issues

Fixed?DescriptionPicturePHUI TagRevision
Project hovercard title and desc are unreadable
Screenshot 2023-04-13 8.43.33 AM.png (249×428 px, 26 KB)
.phui-header-shell
🕐Links with poor contrast
D25491 Before.png (338×550 px, 32 KB)
D25491
🕐Links are blue over blue
Links Before.png (563×811 px, 103 KB)
D25491
Screenshot 2023-04-13 8.46.47 AM.png (38×1 px, 2 KB)
Screenshot 2023-06-28 094039.png (60×1 px, 5 KB)
image.png (181×394 px, 13 KB)
Screenshot 2023-04-13 8.53.10 AM.png (39×213 px, 2 KB)
screenshot-phorge-bug-darkmode-workboard.png (233×622 px, 12 KB)
T15056#12892: Dashboard panel linear gradient
screenshot-phorge-bug-darkmode-pannel.png (90×842 px, 5 KB)
.phui-oi-tail
screenshot-phorge-bug-darkmode-workboard-maniphest-edit.png (135×314 px, 8 KB)
screenshot-phorge-bug-darkmode-workboard-dnd-trigger-hint.png (103×325 px, 2 KB)
Poor contrast between text and background, clashes with the design in any task with many comments
screenshot-phorge-bug-darkmode-maniphest-comments-hidden.png (57×1 px, 6 KB)
.phui-timeline-older-transactions-are-hidden
screenshot-phorge-bug-darkmode-exception.png (172×1 px, 12 KB)
Workboards with a custom color background: unreadable column menus
image.png (453×298 px, 29 KB)
phuix-dropdown-menu
Fixed Issues
  • Conpherence: date/timestamp is hard to read:
    conpherence-before.png (354×1 px, 46 KB)
    • Fixed as
      conpherence-after.png (354×1 px, 48 KB)
  • Custom policy editor:
    custom-policies-before.png (403×1 px, 31 KB)
    • Fixed as
      custom-policies-after.png (413×1 px, 29 KB)
  • Differential:
    differential-before.png (4×1 px, 567 KB)
    • Fixed as
      differential-after.png (4×1 px, 580 KB)
  • Background in Diffusion Active commits is different then in other screens:
    diffusion-active-audits-before.png (527×1 px, 54 KB)
    • Fixed as
      diffusion-active-audits-after.png (529×1 px, 63 KB)
  • Email settings:
    email-settings-before.png (375×1 px, 47 KB)
    • Fixed as
      email-settings-after.png (372×1 px, 48 KB)
  • Exception logging:
    exception-before.png (277×1 px, 20 KB)
    • Fixed as
      exception-after.png (285×1 px, 20 KB)
  • Setup issues menu:
    menu-before.png (233×557 px, 24 KB)
    • Fixed as
      menu-after.png (233×577 px, 24 KB)
  • Navigation menu selection/hovering:
    navigation-before.png (340×457 px, 28 KB)
    • Fixed as
      navigation-after.png (340×458 px, 28 KB)
  • Pholio with transparent images:
    pholio-before.png (752×1 px, 72 KB)
    • Fixed as
      pholio-after.png (754×1 px, 73 KB)
  • Project workboards:
    project-workboard-before.png (467×1 px, 58 KB)
    • Fixed as
      project-workboard-after.png (418×1 px, 61 KB)

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Cigaryno raised the priority of this task from Low to Normal.Jun 29 2023, 07:15
Cigaryno added a project: Accessibility.

The evidence that there are unfinished areas in dark mode is in its option, the option reads: Dark Mode (Expirimental). Users may opt into this 'expirimental' dark mode without realizing that there are unreadable areas until they go depper in the sea.

"experimental" means "not really working yet"... When it's fully usable, the "Experimental" label can be removed.

Yeah but I think the "Normal" priority is better than "Low" since we are hackers hating white screens and so that is quite important ihih

Does somebody want to work on this? Maybe in the next week-end I can try to hammer some CSS rules, thanks to the provided feedback :)

Also, I apologize for not completing this, hadn't had much spare time until recently. I will work on this soon.

Hi, I can also see this one that looks weird in big pannels available on dashboards

screenshot-phorge-bug-darkmode-pannel.png (90×842 px, 5 KB)

In workboard, empty column's drop zone is a little bit 'agressive' isn't it ?

screenshot-phorge-bug-darkmode-workboard.png (233×622 px, 12 KB)

Yeah bob, feel free to add your nice screenshots in the Task description for more visibility. You are a good minion!

Bukkit updated the task description. (Show Details)

I'll do it next time, I always do my best to serve my master !

In workboard, when maniphest's edit button style is broken on mouse over.

screenshot-phorge-bug-darkmode-workboard-maniphest-edit.png (135×314 px, 8 KB)

bob updated the task description. (Show Details)

In workboard, when a maniphest's is drag and dropped, available triggers information windows is broken.

screenshot-phorge-bug-darkmode-workboard-dnd-trigger-hint.png (103×325 px, 2 KB)

Concerning the dashbord's big pannel :

screenshot-phorge-bug-darkmode-pannel.png (90×842 px, 5 KB)

We can imagine several options as illustrated below :

screenshot-phorge-bug-darkmode-workboard-options.png (210×1 px, 17 KB)

  • Option 1 : Keep a gradient that looks like more/less what is currently implemented
--- a/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
+++ b/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
@@ -723,7 +723,11 @@ ul.phui-oi-list-view .phui-oi-selectable
 .phui-oi-tail {
   text-align: center;
   padding: 8px 0;
-  background: linear-gradient({$lightbluebackground}, #fff 66%, #fff);
+  background: linear-gradient({$lightbluebackground}, transparent 66%, transparent);
 }
  • Option 2 : Invert the gradient
--- a/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
+++ b/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
@@ -723,7 +723,11 @@ ul.phui-oi-list-view .phui-oi-selectable
 .phui-oi-tail {
   text-align: center;
   padding: 8px 0;
-  background: linear-gradient({$lightbluebackground}, #fff 66%, #fff);
+  background: linear-gradient(transparent, {$lightbluebackground});
 }
  • Option 3 : Remove the gradient
--- a/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
+++ b/webroot/rsrc/css/phui/object-item/phui-oi-list-view.css
@@ -723,7 +723,11 @@ ul.phui-oi-list-view .phui-oi-selectable
 .phui-oi-tail {
   text-align: center;
   padding: 8px 0;
-  background: linear-gradient({$lightbluebackground}, #fff 66%, #fff);
 }

IMHO, this gradient is not bringing anything there in term of UX since the button is clearly visible whatever the case. That's why so I would vote for option 3 but what's your opinion about that ?

Another on when displaying a maniphest with a lot of comments :

screenshot-phorge-bug-darkmode-maniphest-comments-hidden.png (57×1 px, 6 KB)

Because there are more and more referenced issues and, because some of them may need further discussion in order to find the best solution, IMHO it may be a good idea to create a sub task for each issue reported isn't it ?

When an fatal exception is triggered :

screenshot-phorge-bug-darkmode-exception.png (172×1 px, 12 KB)

Another example of broken dark theme

image.png (955×1 px, 84 KB)

I can't reproduce it, it seems to be fixed.

Cigaryno updated the task description. (Show Details)

T391929 In that task on Wikimedia Phabricator, I had put some issues

image.png (453×298 px, 29 KB)
image.png (264×226 px, 13 KB)

Steps to reproduce the bug:

  • Enable the "Dark Mode (Experimental)" theme in Wikimedia Phabricator.
  • Go to the Phabricator Workboard.
  • Click on any button that has a dropdown menu.

And with these steps you can see the error like the images I have attached

image.png (453×298 px, 29 KB)

@danielyepezgarces: Please always provide clear steps to reproduce something somewhere, in most recent Phorge itself.

Screenshot From 2025-04-21 13-57-21.png (480×428 px, 46 KB)

image.png (453×298 px, 29 KB)

@danielyepezgarces: Please always provide clear steps to reproduce something somewhere, in most recent Phorge itself.

Screenshot From 2025-04-21 13-57-21.png (480×428 px, 46 KB)

Done, I've modified my comment

T391929 In that task on Wikimedia Phabricator, I had put some issues

image.png (453×298 px, 29 KB)
image.png (264×226 px, 13 KB)

Steps to reproduce the bug:

  • Enable the "Dark Mode (Experimental)" theme in Wikimedia Phabricator.
  • Go to the Phabricator Workboard.
  • Click on any button that has a dropdown menu.

And with these steps you can see the error like the images I have attached

I just checked that the issue can be replicated in the Accessibility workboard, on the Affects-Wikimedia workboard it looks good

image.png (700×298 px, 34 KB)

If there is an issue in Phorge then please provide steps to reproduce in Phorge. Please also strip unneeded full quotes which make comments hard to read. Thanks!

Ok, I'll improve it, because I still have a lot to learn about Phorge and its source code, otherwise I'll fix those issues myself

image.png (453×298 px, 29 KB)
image.png (264×226 px, 13 KB)

I can confirm this problem: it seems limited to whatever workboard with a custom background color. That is why I was not able to reproduce in most workboards (that has the default "No color").

It's not a regression. It always happened at least since 2023. Thanks for reporting.

P.S. please help in reviewing the colors in D25491 - I absolutely don't know which color would be nice