Invert the favicon color according to the browser theme, to prevent the white logo from being applied to a white background or the black logo from being applied to a black background

README.md

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="#000"
    d="m21.484 7.125l-9.022-5a1.003 1.003 0 0 0-.968 0l-8.978 4.96a1 1 0 0 0-.003 1.748l9.022 5.04a.995.995 0 0 0 .973.001l8.978-5a1 1 0 0 0-.002-1.749" />
  <path fill="currentColor"
    d="m12 15.856l-8.515-4.73l-.971 1.748l9 5a1 1 0 0 0 .971 0l9-5l-.971-1.748z" />
  <path fill="currentColor"
    d="m12 19.856l-8.515-4.73l-.971 1.748l9 5a1 1 0 0 0 .971 0l9-5l-.971-1.748z" />

    <style>
      @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
    </style>

</svg>

Explanation:

1. The <style> element is used to embed the CSS code within the SVG file.
2. @media (prefers-color-scheme: dark): This media query checks if the user's device prefers a dark color scheme.
3. :root: Refers to the highest-level element in the document.
4. filter: invert(100%): Inverts the colors of the SVG element.

Keep in mind that the filter: invert(100%) will only affect the colors within the SVG, as the filter is applied to the SVG element itself. The rest of the HTML or document content outside the SVG will not be affected by this specific CSS rule.

favicon.md

SVG Example:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="#000"
    d="m21.484 7.125l-9.022-5a1.003 1.003 0 0 0-.968 0l-8.978 4.96a1 1 0 0 0-.003 1.748l9.022 5.04a.995.995 0 0 0 .973.001l8.978-5a1 1 0 0 0-.002-1.749" />
  <path fill="currentColor"
    d="m12 15.856l-8.515-4.73l-.971 1.748l9 5a1 1 0 0 0 .971 0l9-5l-.971-1.748z" />
  <path fill="currentColor"
    d="m12 19.856l-8.515-4.73l-.971 1.748l9 5a1 1 0 0 0 .971 0l9-5l-.971-1.748z" />
    <style>
      @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
    </style>
</svg>