How do I change the background color and font color of wingpanel XGTK theme? [duplicate]

Question

I recently tried out this_theme. I tried changing the details in .panel in the apps.css of gtk-3 folder but to no avail

Answer 1

modify osd in gtk.css in Gtk3 folder

Answer 2

Downloaded this theme and had a look. You are right to edit the apps.css in the gtk-3 folder. It has a panel setting for budgie and one that is just panel. It isn't set up the same way as the one in the elementary theme. I deleted it and replaced it with the one in my elementary theme's apps.css. The panel changed to look like the default so just replace the panel section with the one below and edit as you like.

/*********
 * Panel *
 ********/

.panel {
    background-color: alpha(#000, 0.3);
    transition: all 100ms ease-in-out;
}

.panel.maximized {
    background-color: #000;
}

.panel.translucent {
    background-color: alpha(#000, 0.5);
}

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

.composited-indicator .keyboard {
    background-color: #fff;
    border-radius: 2px;
    box-shadow:
        0 0 2px alpha (#000, 0.3),
        0 1px 2px alpha (#000, 0.6);
    color: #333;
    font-weight: 600;
    padding: 0 3px;
    text-shadow: none;
}

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

.panel.color-light .composited-indicator .keyboard {
    background-color: alpha (#000, 0.65);
    box-shadow:
        0 0 2px alpha (#fff, 0.3),
        0 1px 0 alpha (#fff, 0.25);
    color: #fff;
    text-shadow: none;
}

.panel .popover {
    box-shadow:
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.5),
        0 3px 4px alpha (#000, 0.15),
        0 3px 3px -3px alpha (#000, 0.35);
}