1790278 - Message Status Icon in Subject Columns Is Too Difficult to See in dark mode

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Mark Barnes [:WoofGrrrr]]

Attachment: Dark theme status icon "replied" is deep purple on dark gray background

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

Steps to reproduce:

TB 102.2.2
Use dark theme
Reply to a message

Actual results:

The little message status icon to the left of the message subject is too difficult to see. The "Replied" icon is deep purple on a dark gray background

Expected results:

Something more easy to see

Also, it would be GREAT if this little icon were in it's own column, not part of the subject text. This way I could move it or remove it or set styles on it, etc

Comment 1

[Mark Barnes [:WoofGrrrr]]

I added this following to my userChrome.css file and it makes things much better for me.
I copied it from the built-in css for the icons and modified it by changing the background and fill colors for only dark color scheme

/* ..... icons in subject column, dark color scheme ..... */
@media (prefers-color-scheme: dark) {
treechildren::-moz-tree-image(subjectCol) {
background: #101010 !important;
}

treechildren::-moz-tree-image(subjectCol, replied) {
fill: var(--color-purple-40) !important;
stroke: var(--color-purple-40) !important;
}

treechildren::-moz-tree-image(subjectCol, forwarded) {
fill: var(--color-blue-40) !important;
}

treechildren::-moz-tree-image(subjectCol, redirected) {
fill: var(--color-orange-40) !important;
}

treechildren::-moz-tree-image(subjectCol, replied, forwarded) {
fill: var(--color-blue-40) !important;
stroke: var(--color-purple-40) !important;
}

treechildren::-moz-tree-image(subjectCol, replied, redirected) {
fill: var(--color-orange-40) !important;
stroke: var(--color-purple-40) !important;
}

treechildren::-moz-tree-image(subjectCol, forwarded, redirected) {
fill: var(--color-blue-40) !important;
stroke: var(--color-orange-40) !important;
}

treechildren::-moz-tree-image(subjectCol, replied, forwarded, redirected) {
fill: var(--color-blue-40) !important;
stroke: var(--color-purple-40) !important;
}

treechildren::-moz-tree-image(subjectCol, new) {
fill: var(--color-yellow-40) !important; /* override the selected, focus rule /
stroke: var(--color-orange-40) !important; / override the selected, focus rule */
}

treechildren::-moz-tree-image(subjectCol, selected, focus) {
fill: var(--select-focus-text-color) !important;
stroke: var(--select-focus-text-color) !important;
}
}

Comment 3

[Richard Marti (:Paenglab)]

Micah, could you define better matching colours for the dark theme?

Comment 4

[[e-mail]]

Attachment: Bug 1790278 - style message status icons for dark color scheme. r=aleca,Paenglab

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/c2ac0848d0ac
style message status icons for dark color scheme. r=aleca,Paenglab

Comment 6

[Wayne Mery (:wsmwk)]

uplift to 102?

Comment 7

[[e-mail]]

Comment on attachment 9302538 [details]
Bug 1790278 - style message status icons for dark color scheme. r=aleca,Paenglab

[Approval Request Comment]
Regression caused by (bug #):

User impact if declined:
The icons in dark mode will be very hard to see.

Testing completed (on c-c, etc.):
completed on c-c and beta

Risk to taking this patch (and alternatives if risky):
This patch only changes some css so the risk is low.

Comment 8

[Wayne Mery (:wsmwk)]

Comment on attachment 9302538 [details]
Bug 1790278 - style message status icons for dark color scheme. r=aleca,Paenglab

[Triage Comment]
Approved for esr102

Comment 9

[Rob Lemley [:rjl]]

Thunderbird 102.8.0:
https://hg.mozilla.org/releases/comm-esr102/rev/0124b0ee0ee0