Change page content color depending on if dark or light mode is selected

[lauricthepilot]

Hi there.

I have a github icon that I have included in a page, specifying it as follows: :fontawesome-brands-github:{ .github }.

I'd like to be able to change the color of the icon depending on if the site is in dark mode or not. After a bit of digging. I was able to get it to work with the following specified in my custom css file. This, however did not work after runing a build on the site.

.github {
    color: light-dark(#151b23,#e6edf3);
}

Any suggestions?

Chatgpt said to try:

/* Light mode */
html[data-md-color-scheme="default"] .github {
    color: #151b23;
}

/* Dark mode */
html[data-md-color-scheme="slate"] .github {
    color: #e6edf3;
}

This did not work either.

My theme is defined mkdocs.yml as follows:

theme:
  name: material
  custom_dir: overrides
  logo: images/Icon.png
  favicon: images/Icon.png
  features:
    - navigation.sections
    - content.code.copy
    - content.code.select
    - navigation.instant
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.top
    - navigation.sections
    - search.highlight
    - search.suggest
    - navigation.footer
  font:
    text: Roboto
    code: Roboto Mono
  palette:
  # Palette toggle for automatic mode
    - media: "(prefers-color-scheme)"
      toggle:
        icon: material/brightness-auto
        name: Switch to light mode

    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default 
      primary: green
      accent: amber
      toggle:
        icon: material/weather-sunny
        name: Switch to dark mode

    # Palette toggle for dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: green
      accent: amber
      toggle:
        icon: material/weather-night
        name: Switch to system preference

[lauricthepilot]

The error turned out to be the Cache configuration on the CDN I am using to serve the content. It works with the regular:

.github {
    color: light-dark(#151b23,#e6edf3);
}