Add dark theme logo (#4026)

I noticed that this icon that I normally can't read on a dark theme has
a light version on the website as well!

This is using [the HTML `<picture>`
element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture)
that is [supported by GitHub
Markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#the-picture-element)

<img width="544" height="432" alt="CleanShot 2026-01-31 at 22 54 42@2x"
src="https://github.com/user-attachments/assets/6ce5dda8-2aaa-4171-9989-7e2ab593e943"
/>
<img width="544" height="432" alt="CleanShot 2026-01-31 at 22 54 58@2x"
src="https://github.com/user-attachments/assets/3ed2944f-77b4-4645-9764-2aaf3cf21621"
/>

![CleanShot 2026-01-31 at 22 55
12](https://github.com/user-attachments/assets/97e1a56d-ae97-4dad-82d2-ebde8d92be2e)

Author: JHWelch

README.md

@@ -51,5 +51,10 @@ If we receive enough donations we might even be able to free up some working hou
 To donate, please follow [this](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=G5D8E9MR5DTD2&source=url) link.
 
 <p style="text-align: center">
-  <a href="https://forum.magicmirror.builders/topic/728/magicmirror-is-voted-number-1-in-the-magpi-top-50"><img src="https://magicmirror.builders/img/magpi-best-watermark-custom.png" width="150" alt="MagPi Top 50"></a>
+  <a href="https://forum.magicmirror.builders/topic/728/magicmirror-is-voted-number-1-in-the-magpi-top-50">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://magicmirror.builders/img/magpi-best-watermark.png">
+      <img src="https://magicmirror.builders/img/magpi-best-watermark-custom.png" width="150" alt="MagPi Top 50">
+    </picture>
+  </a>
 </p>