The tree in the Library window is given `background-color: Field`. The even rows are transparent and the odd rows are `background-color: -moz-oddtreerow`: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/tree.inc.css#16,31. `-moz-oddtreerow` is a system color fetched [here](https://searchfox.org/mozilla-central/source/widget/cocoa/nsLookAndFeel.mm#743-746). I added some logging code there: ``` NSColor* evenColor = [[[NSColor controlAlternatingRowBackgroundColors] objectAtIndex:0] colorUsingColorSpaceName:NSDeviceRGBColorSpace]; NSColor* oddColor = [[[NSColor controlAlternatingRowBackgroundColors] objectAtIndex:1] colorUsingColorSpaceName:NSDeviceRGBColorSpace]; NSLog(@"even R: %f, G: %f, B: %f\n", evenColor.redComponent * 255.00, evenColor.greenComponent * 255.00, evenColor.blueComponent * 255.00); NSLog(@"odd R: %f, G: %f, B: %f\n", oddColor.redComponent * 255.00, oddColor.greenComponent * 255.00, oddColor.blueComponent * 255.00); ``` When the system is in Light theme, we get ``` even R: 255.000000, G: 255.000000, B: 255.000000 odd R: 244.000000, G: 245.000000, B: 245.000000 ``` which gives us the white/light grey alternating pattern we're used to. But in system dark we get ``` even R: 30.000000, G: 30.000000, B: 30.000000 odd R: 255.000000, G: 255.000000, B: 255.000000 ``` which seems very surprising. The white/black alternating rows just don't look good, even when we use black text in the white rows. Those almost seem like they can't possibly be the right colours. Maybe this is an API bug? In any case, the simplest way to change this might be rules like ``` tree { margin: 0 4px; background-color: Field; color: FieldText; appearance: auto; -moz-default-appearance: listbox; } treechildren::-moz-tree-row(multicol, odd) { background-color: color-mix(in srgb, FieldText 10%, Field); } ``` We can play with the 10% number, but that looks pretty good in both light and dark themes. Screenshot attached (other things in the screenshot need to be fixed, of course).
Bug 1698763 Comment 3 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
The tree in the Library window is given `background-color: Field`. The even rows are transparent and the odd rows are `background-color: -moz-oddtreerow`: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/tree.inc.css#16,31. `-moz-oddtreerow` is a system color fetched [here](https://searchfox.org/mozilla-central/source/widget/cocoa/nsLookAndFeel.mm#743-746). I added some logging code there: ``` NSColor* evenColor = [[[NSColor controlAlternatingRowBackgroundColors] objectAtIndex:0] colorUsingColorSpaceName:NSDeviceRGBColorSpace]; NSColor* oddColor = [[[NSColor controlAlternatingRowBackgroundColors] objectAtIndex:1] colorUsingColorSpaceName:NSDeviceRGBColorSpace]; NSLog(@"even R: %f, G: %f, B: %f\n", evenColor.redComponent * 255.00, evenColor.greenComponent * 255.00, evenColor.blueComponent * 255.00); NSLog(@"odd R: %f, G: %f, B: %f\n", oddColor.redComponent * 255.00, oddColor.greenComponent * 255.00, oddColor.blueComponent * 255.00); ``` When the system is in Light theme, we get ``` even R: 255.000000, G: 255.000000, B: 255.000000 odd R: 244.000000, G: 245.000000, B: 245.000000 ``` which gives us the white/light grey alternating pattern we're used to. But in system dark we get ``` even R: 30.000000, G: 30.000000, B: 30.000000 odd R: 255.000000, G: 255.000000, B: 255.000000 ``` which seems very surprising. The white/black alternating rows just don't look good, even when we use black text in the white rows. Those almost seem like they can't possibly be the right colours. Maybe this is an API bug? In any case, the simplest way to change this might be rules like ``` tree { margin: 0 4px; background-color: Field; color: FieldText; appearance: auto; -moz-default-appearance: listbox; } treechildren::-moz-tree-row(multicol, odd) { background-color: color-mix(in srgb, FieldText 10%, Field); } ``` We can play with the 10% number, but that looks pretty good in both light and dark themes. Screenshot attached (other things in the screenshot need to be fixed, of course). EDIT: Whoops, I accidentally pasted my message into the file name field...