group-tab.html dark mode support

[irvinm]

Obviously this may be related to #2405, but wanted to see if these are related or different in some other way. (Questions at the bottom)

I see in group-tab.html the color is being set with the following code.

The values of "background: -moz-dialog" and "color: -moz-dialogtext" create the same color pallet regardless of whether dark or light mode is active.

Changing the values to "background: gray" and "color: white" create a better experience in dark mode.

So the questions:

1. Should we expect the values of -moz-dialog and -moz-dialogtext to change based on light\dark mode?
2. If not, is there a way to utilize the "prefers-color-scheme" CSS tag within the HTML to change the colors based on color scheme?
3. If not, is there a way I can change these colors manually?

It is not a big issue regardless of the answers. We can close this item after any discussion.

[piroor]

Thank you for proposal! Color scheme of options in about:addons should be controlled by Firefox itself, on the other hand other tab contents provided by TST look to need to apply Dark theme by self. I hope that the commit 4c7d729 based on your code at #2405 does that.

[irvinm]

I pulled down the development build and played with this a little.

Both the group-tab.html and startup.html look great and dynamically change colors properly when the color mode is changed. You may want to consider modifying the color of links (Example on startup.html) in dark mode as well. White underlined links aren't too bad, but a version of blue might stand out better.

Ex:
--link-color: var(--blue40);
--link-color-hover: var(--blue50);
--link-color-active: var(--blue60);

I do see you made the same changes to options.css, but nothing changed when viewing the options either in-line or as a separate page.

When I inspect options.html, I can see CSS is properly applied.

[piroor]

OK, with recent commits I've imported more color definitions including link colors from Firefox itself.

[irvinm]

The colors look great now. Thanks. We can track options.html in the other issue.

[irvinm]

@piroor when viewing options.html in its own page, the color changes look A LOT better. Thank you.

In comparing the color pallet, I see 2 or 3 items which standout a little too much and just want to make sure it is what you intended.

It looks like things like text input areas and drop down lists are white background with black text which can be pretty bright in the theme depending on the size of the element. [Red circled below]

Looking at another addon, it looks like the theme basically keeps the text in those areas as white, but just uses background color of #474749. (Which is basically just a color that is lighter than the background, but still dark)

[piroor]

Thanks, I forgot to define colors for input fields. After 77be0b8 and 513dc6a they are shown with dark background and light text color. The color scheme is based on Firefox's in-content fields.

[irvinm]

@piroor 3.2.4 just landed an everything looks great here as well. Thanks again.