Is there a way to have wingpanel change to a different color when dark mode is enabled?

Question

I'd like wingpanel to be a light blue when light mode is enabled and a dark blue when dark mode is enabled. I tried using different colors in ~/.config/gtk-3.0/gtk.css and ~/.config/gtk-3.0/gtk-dark.css, but wingpanel's color only honors the color in gtk.css and wingpanel's color doesn't change when switching modes. Is this possible? If so, how?

~/.config/gtk-3.0/gtk.css
.panel {
      background-color: #7393B3; /* Light Blue */
}
.panel.maximized {
      background-color: #7393B3; /* Light Blue */
}

~/.config/gtk-3.0/gtk-dark.css
.panel {
      background-color: #0059B3; /* Dark Blue */
}
.panel.maximized {
      background-color: #0059B3; /* Dark Blue */
}