Integrating Custom CSS with Theme Toggle

[System0X]

Hello,

I am currently using the MkDocs Material theme in my project and have configured it to support both light and dark modes as defined in my mkdocs.yml file. The relevant portion of the configuration is as follows:

theme:
  name: material
  palette:
    # Light mode palette
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: amber
      accent: deep orange
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode

    # Dark mode palette
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: amber
      accent: deep orange
      toggle:
        icon: material/brightness-5
        name: Switch to light mode

extra_css:
  - extra.css

Additionally, I have added custom CSS to extra.css to modify the color of Header 2 (h2) based on the color scheme preference. Here is my custom CSS:

@media (prefers-color-scheme: light) {
	h2 {
		color: #5C6F99; /* Blue color in light mode */
	}
}

@media (prefers-color-scheme: dark) {
	h2 {
		color: #9EBCFF; /* Blue color in dark mode */
	}
}

However, I've noticed an issue where these custom colors for h2 are only applied when the system's default theme is changed. They do not switch when using the theme toggle button defined in mkdocs.yml.

I am wondering if there's a way to have this custom CSS applied correspondingly when the theme is toggled in the MkDocs Material user interface itself, instead of only following the system's default theme. I'd appreciate any guidance or potential solutions to address this issue.

Thank you.

[kamilkrzyskow]

Instead of filtering the media query based on the users system preferences, filter it based on the toggled palette.

There is an example in the docs for the custom palette:
https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-color-schemes

Here is an example I used in GMC's docs:
https://github.com/Gothic-Modding-Community/gmc/blob/main/overrides/assets/stylesheets/extra.css#L126-L144