Menu icon 'hamburger' doesn't show in browser dark mode

[DV1]

Hi to All

I'm wondering if anyone here has come across the problem of a hamburger icon (menu) not showing when in browser dark mode. The icon is there, hover over it and the menu shows, but it's not visible.

Any suggestions appreciated.

Here's the code from the menu css which is the icon:

.header a {
    display: block;
    width: 28px;
    height: 18px;
    padding: 11px;
    margin: 1.9em;
    position: absolute;
    top: 0;
    left: 0;
}

.header a:before,
.header a:after {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 1);
    height: 2px;
}

.header a span {
    background: rgba(153, 0, 0, 1);
    display: block;
    height: 3px;
    margin: 6px 0;
width: 19px;
}

 

[BigDady]

JS can tell you if the browser is in dark mode and change the color of the menu. To detect dark mode use:
window.matchMedia()
See the entire code block HERE: