1608344 - Adjust some colors for the dark theme

Status: RESOLVED FIXED

(Calendar :: General, enhancement)

Description

[P. Mergey]

Attachment: Dark Theme Agenda panels

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:68.0) Gecko/20100101 Thunderbird/68.4.1

Having these kinds of elements:

1. Started task and event with passed due date and major priority
2. Started task and event with due date today and normal priority
3. Started task and event with futur due and minor priority

Actual results:

1. In the main agenda panel, an event with a minor priority appears with a light background while the others types (major and normal priorities) are correctly using the dark background
2. in the right side panel, tasks with major and minor priorities are displaying using the same shade of red and green as the light theme: these colors lack of contrast with the dark theme and make the text difficult to read (note that if you select one at once, white texts on red or green backgrounds are more readable)

Expected results:

1. the light background of the minor priority event should be fixed to use the same dark background as others kind of events
2. the shades of green and red used for certain types of tasks (due or in progress) should probably be revised to improve the contrast with the dark theme (or perhaps use different background tints to be better highlighted when the task is not selected)

Comment 1

[Stefan Sitter [:ssitter]]

Attachment: dark mode task list alternate colors

I played around with colors some months ago and this was something that seemed to work better for me.
Green https://webaim.org/resources/contrastchecker/?fcolor=00BD00&bcolor=38383D
Red https://webaim.org/resources/contrastchecker/?fcolor=FF7A7A&bcolor=38383D
Blue (for icon) https://webaim.org/resources/contrastchecker/?fcolor=4DA6FF&bcolor=38383D

To apply the colors locally using userChrome.css I used the following rules:

.calendar-task-tree > treechildren::-moz-tree-cell-text(inprogress) {
color: #00BD00 !important;
}

.calendar-task-tree > treechildren::-moz-tree-cell-text(overdue) {
color: #FF7A7A !important;
}

Comment 2

[P. Mergey]

Considering a modification of the userchrome.css is interesting.
Maybe the problem of the light background for low priority task could be also corrected by this kind of settings.

Comment 3

[Richard Marti (:Paenglab)]

Attachment: 1608344-dark-task-event-tree-colours.patch

I'm using Stefan's colours. For the low priority events I've set a reduced opacity instead of the grey text and the weird background.

Comment 4

[Richard Marti (:Paenglab)]

Attachment: 1608344-dark-task-event-tree-colours-Beta-ESR.patch

Patch for beta and ESR.

Comment 5

[Paul Morris [:pmorris]]

Comment on attachment 9120360 [details] [diff] [review]
1608344-dark-task-event-tree-colours.patch

Review of attachment 9120360 [details] [diff] [review]:
-----------------------------------------------------------------

Changes look good.  I might use css variables for the new colors, but up to you.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/7c322e55ef6b
Adjust Task and Event tree colours for the dark theme. r=pmorris

Comment 7

[Geoff Lankow (:darktrojan)]

73 beta 1:
https://hg.mozilla.org/releases/comm-beta/rev/796bb4a6c9874ea99591b5c52517f345a170d9a6

Comment 8

[Geoff Lankow (:darktrojan)]

68.4.2:
https://hg.mozilla.org/releases/comm-esr68/rev/6afe46d52836fc422f9a42fb21529c6880551b11