Dark Mode Conflicts

There are a few issues with the dark mode of the website.

The images for Synology NAS and Puppy Linux on the Downloads page require a different image in dark mode than light. This can be achieved with similar HTML to the following:

<noscript> 
    <picture>
      <source srcset="settings-dark.png" media="(prefers-color-scheme: dark)" />
      <source srcset="settings-light.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
      <img id="screenshot" src="settings-light.png" />
    </picture>
</noscript>

I have attached the modified images.

The Github button on the homepage needs to be properly inverted in color scheme. Giving the same look as .btn-outline-light rather than .btn-outline-dark.

The homepage gear image backgrounds I have exported as png for transparency (attached) and will work in both light and dark mode now. The current dark mode is very flat on the homepage otherwise. Images attached, CSS needs to reference png not jpg versions for classes .homepageheader and .news-section. Removal of lines 205-208 is needed.

Dark Mode Distro Logos.zip
Gear Backgrounds.zip

Start with the Downloads page and homepage markup and styles, locating the Synology NAS and Puppy Linux images, the GitHub button, and classes .homepageheader and .news-section. Apply the provided dark/light image behavior, button inversion, PNG references, and requested CSS removal. Done means these areas render appropriately in both light and dark modes.