CSS Styles for Responsive Drawer Heading background colour

[glennlea1525]

Hi, I have implemented a toggle for light and dark mode.

palette:
Palette toggle for light mode
- media: "(prefers-color-scheme: light)"
scheme: standard # Name changed to protect client
toggle:
icon: material/brightness-7
name: Switch to dark mode

Palette toggle for dark mode
- media: "(prefers-color-scheme: dark)"
scheme: slate
toggle:
icon: material/brightness-4
name: Switch to light mode
icon:
annotation: material/plus-circle-outline

And created the styles for each colour mode:

Custom Standard Color Scheme
[data-md-color-scheme="standard"] {
--md-primary-bg-color: rgb(255, 255, 255);
--md-default-bg-color: #FFFFFF;
--md-primary-fg-color: #FFFFFF;
--md-primary-fg-color-dark: #30ae7d;
--md-heading-color: rgb(236,236,236);
--button-border: #393b3d;
}
Custom Slate Color Scheme
[data-md-color-scheme="slate"] {
--md-primary-fg-color: #4051b5;
--md-primary-bg-color: rgb(47, 79, 79);
--md-default-bg-color: rgb(47, 79, 79);
--md-primary-heading-color: #ffffff;
--md-typeset-a: var(--md-primary-fg-color);
--md-nav-item-color: #ffffff;
--md-heading-color: #0E0E10;
--button-border: var(--green);
}

Everything works fine, except the background colour of the drawer header when displayed to show the Hamburger menu. I cannot locate the style that changes the colour - slate leaves a blue background, while standard leaves a white background. In all cases it should be the same colour as the header:

.md-header {
box-shadow: none!important;
background-color: var(--md-header-bg-color);
}

Any suggestions where I should look to change the drawer heading background colour? I hope I have provided enough details.

[glennlea1525]

A little digging I located this CSS. Might be helpful for others to know. I added the following to my custom.css file.

@media screen and (max-width: 76.1875em) {
.md-header-nav__button.md-logo {
display: block;
}
.md-nav--primary .md-nav__title[for=__drawer] {
background-color: var(--md-header-bg-color); # This was the line I needed to change.
color: var(--md-title-color); # And update this colour with a scheme-based colour.
font-weight: 700;
}
}