1619725 - Lighten up the lwt-accent-color used in dark mode.

Status: RESOLVED FIXED

(Thunderbird :: Theme, enhancement)

Description

[Alessandro Castellani [:aleca]]

When using dark mode or the dark theme, the main Tab bar and bottom Status bar look almost pitch black do to the background-color being set as --lwt-accent-color which comes with a value of rgb(12, 12, 13).

I propose updating that value to rgb(24, 24, 26) in order to dim those dark elements and reduce the somewhat jarring contrast with the other areas.

Also, I propose updating the Today Pane background with this value:

:root[lwt-tree] #today-pane-panel > vbox {
    background-color: rgb(38, 35, 35);
}

As we shouldn't use the same dark variation of the main tabs for that section.

Thoughts?

Comment 1

[Alessandro Castellani [:aleca]]

A little ping to put this under your radar.

Comment 2

[Richard Marti (:Paenglab)]

Attachment: 1619725-lwt-accent-color.patch

Like this?

(In reply to Alessandro Castellani (:aleca) from comment #0)

When using dark mode or the dark theme, the main Tab bar and bottom Status bar look almost pitch black do to the background-color being set as --lwt-accent-color which comes with a value of rgb(12, 12, 13).

I propose updating that value to rgb(24, 24, 26) in order to dim those dark elements and reduce the somewhat jarring contrast with the other areas.

Done with a override when the default dark theme is used which comes from toolkit and we can't change the value there.

Also, I propose updating the Today Pane background with this value:

:root[lwt-tree] #today-pane-panel > vbox {
    background-color: rgb(38, 35, 35);
}

I added a background-image with some transparency to simulate the colour change. We can't hard code this vbox to be still themeable for third party themes.

Comment 3

[Alessandro Castellani [:aleca]]

Comment on attachment 9146705 [details] [diff] [review]
1619725-lwt-accent-color.patch

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

This is perfect, and I like the solution of using a linear gradient to overcome the toolkit styling issue.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/fed192723bc2
Lighten up the lwt-accent-color used in dark mode. r=aleca