Wingpanel adds shadow and defaults to white font after restart on light background

Question

There's a feature in elementary that depending on your background being light, switches the font to dark and removes the text-shadow, this seems to reset upon (re-)boot and you have to apply the same wallpaper again to get the proper dark text back.

Is there a known solution? note that I freshly installed today: elementary OS 5.1.3 Hera and updated all it offered.

Answer 1

For now until that bug is fixed, you can force the light background state in your ~/.config/gtk-3.0/gtk.css - if the file and subfolder does not exist, just create them.

.composited-indicator > revealer label,
.composited-indicator > revealer image,
.composited-indicator > revealer spinner,
.panel.color-light .composited-indicator > revealer label,
.panel.color-light .composited-indicator > revealer image,
.panel.color-light .composited-indicator > revealer spinner {
    color: alpha (#000, 0.65);
    text-shadow:
        0 0 2px alpha (#fff, 0.3),
        0 1px 0 alpha (#fff, 0.25);
    -gtk-icon-shadow:
        0 0 2px alpha (#fff, 0.3),
        0 1px 0 alpha (#fff, 0.25);
}

If you'd want to have light on dark background instead, modify it to be:

.composited-indicator > revealer label,
.composited-indicator > revealer image,
.composited-indicator > revealer spinner,
.panel.color-light .composited-indicator > revealer label,
.panel.color-light .composited-indicator > revealer image,
.panel.color-light .composited-indicator > revealer spinner {
    color: #fff;
    font-weight: bold;
    text-shadow:
        0 0 2px alpha (#000, 0.3),
        0 1px 2px alpha (#000, 0.6);
    transition: all 200ms ease-in-out;
    -gtk-icon-shadow:
        0 0 2px alpha (#000, 0.3),
        0 1px 2px alpha (#000, 0.6);
}

---

The hint at the solution was found on reddit, for history sake a quote:

Take a look at this css in wingpanel's source. If you were to copy and paste that into your ~/.config/gtk-3.0/gtk.css, you should be able to override the color of the icons. I've highlighted the part for when the panel is on a light background. If you set the properties to the same values in both sections, the icons should always be those colors (you could copy the values from the first section to the second to always have white icons, or copy the values from the second section to the first to always have black icons). To demonstrate, I made wingpanel have red text and icons.

The source mentioned is here: https://github.com/elementary/wingpanel/blob/master/data/styles/application.css