Page MenuHomePhorge

Improve CelerityDarkModePostprocessor shade colors
Needs RevisionPublic

Authored by bob on Aug 17 2023, 11:10.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Jul 13, 16:41
Unknown Object (File)
Sat, Jul 13, 10:32
Unknown Object (File)
Fri, Jul 12, 09:58
Unknown Object (File)
Thu, Jul 11, 07:10
Unknown Object (File)
Wed, Jul 10, 20:09
Unknown Object (File)
Tue, Jul 9, 05:43
Unknown Object (File)
Tue, Jul 9, 05:42
Unknown Object (File)
Mon, Jul 8, 18:20

Details

Reviewers
valerio.bozzolan
Group Reviewers
O1: Blessed Committers
Maniphest Tasks
T15056: Improve Dark Mode
Summary

Shade colors are currently identical whatever user's theme (White, Dark, etc...) whereas, in most situation
this is not something desirable. For instance :

  • In dark mode, the font color is usually light (white, light grey, etc...) whereas current shade colors are light too, leading to a bad contrast
  • In dark mode, maniphest's tags are a little bit agressive
  • ...

Since I've no idea about how shade colors were derivated from base colors (I tried to find magic rules/relations without success),
here are the operations to I applied to generate new shade colors :

  • Swap sh-light[COLOR]border and sh-[COLOR]border
  • Swap sh-[COLOR]text and sh-[COLOR]background
  • Decrease sh-[COLOR]text ligthness by 10 to get sh-[COLOR]icon

Below, some comparaisons :

BeforeAfter
screenshot-phorge-bug-darkmode-shade-color-1-before.png (62×470 px, 4 KB)
screenshot-phorge-bug-darkmode-shade-color-1-after.png (62×470 px, 4 KB)
screenshot-phorge-bug-darkmode-shade-color-2-before.png (140×428 px, 8 KB)
screenshot-phorge-bug-darkmode-shade-color-2-after.png (140×428 px, 9 KB)
screenshot-phorge-bug-darkmode-shade-color-3-before.png (119×470 px, 14 KB)
screenshot-phorge-bug-darkmode-shade-color-3-after.png (119×470 px, 14 KB)

Obvisouly, this is only a proposal but, as far as I can see, it looks better. Unfortunately, since these shade colors are used in many places,
this isn't easy to check against all potential regressions...

Fix T15056

Test Plan
  • Sign in
  • Navigate in all application where shade colors are used in order to check against regression
  • Check all 29 Example pages in /uiexample/
  • Check Overcard of:
    • Differential (Open and Closed)
    • Maniphest (Open and Closed)
    • ....

Diff Detail

Repository
rP Phorge
Branch
tmp
Lint
Lint Passed
Unit
Tests Passed
Build Status
Buildable 773
Build 773: arc lint + arc unit

Event Timeline

bob requested review of this revision.Aug 17 2023, 11:10

Nice job, my little and cute bob.. OH NO! a super-important regression! all of you minions will be fired soon!1!

Overcard of a closed Task after this change, in Dark mode:

Overcard Maniphest regress.png (167×645 px, 11 KB)

Let's visually mark this as needing still some work

This revision now requires changes to proceed.Aug 18 2023, 07:18

Ouch ! Thanks for reporting ! I'll have a look on UI examples (these pages are really cool !) to improve the proposal !
BTW, I'll be away next week so... This will not move forward right now...

I didn't give up on this one and, since I prefer using the dark theme on my day to day activity, I know there are a lot of work to be done to reach something nice.
I'll try to move forward on next weeks...