Page MenuHomePhorge

Improve CelerityDarkModePostprocessor shade colors
Needs RevisionPublic

Authored by bob on Aug 17 2023, 11:10.
Referenced Files
Unknown Object (File)
Thu, Sep 21, 05:57
Unknown Object (File)
Wed, Aug 30, 03:04
Unknown Object (File)
Tue, Aug 29, 15:40
Unknown Object (File)
Sun, Aug 27, 19:39
Unknown Object (File)
Sun, Aug 27, 09:05
Unknown Object (File)
Sat, Aug 26, 03:35
Unknown Object (File)
Aug 23 2023, 13:22
Unknown Object (File)
Aug 20 2023, 03:31


Group Reviewers
O1: Blessed Committers
Maniphest Tasks
T15056: Improve Dark Mode

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 :

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

rP Phorge
Lint Passed
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...