Overriding h1 style on custom light theme

[champsblanc]

I'm trying to use a custom light theme with custom h1/h2/h3 colors but i can't make it work properly.

We used to not have a dark mode so this extra_css did work:

:root {
    --md-primary-fg-color: #1973B8;
    --md-primary-fg-color--light: #2DCCCD;
    --md-primary-fg-color--dark: #072146;
    --md-accent-fg-color: #48AE64;
}

.md-typeset h1 {
    color: var(--md-primary-fg-color--dark);
}

We are currently trying to add a dark mode so we need to wrap our custom colors like the docs suggest:

[data-md-color-scheme="custom"] {
    --md-primary-fg-color: #1973B8;
    --md-primary-fg-color--light: #2DCCCD;
    --md-primary-fg-color--dark: #072146;
    --md-accent-fg-color: #48AE64;
    
    .md-typeset h1 {
    color: var(--md-primary-fg-color--dark);
}

With this mkdocs config:

theme:
    name: material
    palette:
        -   scheme: custom
            toggle:
                icon: material/toggle-switch-off-outline
                name: Switch to dark mode
        -   scheme: slate
            primary: red
            accent: red
            toggle:
                icon: material/toggle-switch
                name: Switch to light mode

Primary colors work as usual but .md-typeset h1 color gets overwritten and defaults to --md-default-fg-color--light making it grey and not "compatible" with our company palette.

Is there something i'm doing wrong? Thanks!

TLDR: I need to change our h1/h2/h3 colors but only on light theme.

[squidfunk]

You're using SCSS syntax:

[data-md-color-scheme="custom"] {   
  .md-typeset h1 {
    color: var(--md-primary-fg-color--dark);
  }
}

Browsers don't recognize SCSS syntax (yet), only CSS which doesn't allow for nesting. Try:

[data-md-color-scheme="custom"] .md-typeset h1 {
  color: var(--md-primary-fg-color--dark);
}

[champsblanc]

Didn't know about SCSS. The suggested fix worked like a charm.

Thanks!