Don't use CSS to choose icons based on color scheme

Author: wixoaGit

index.html

@@ -14,9 +14,23 @@
         <br>
         <p style="text-align: center">OpenDream is an open source recreation of the <a href="https://www.byond.com/">BYOND</a> game engine. Current major goals include running <a href="https://spacestation13.com/">Space Station 13</a> and improving the DM development experience.</p>
         <div id="links">
-            <a href="https://github.com/OpenDreamProject/OpenDream/"><img id="link-GitHub" class="link-image" alt="OpenDream GitHub"></a>
-            <a href="https://discord.gg/UScStz6hnQ"><img id="link-Discord" class="link-image" alt="OpenDream Discord Server"></a>
-            <a href="https://ref.opendre.am/"><img id="link-ODRef" src="/assets/odref.svg" class="link-image" alt="OpenDream DM Reference"></a>
+            <a href="https://github.com/OpenDreamProject/OpenDream/">
+                <picture>
+                    <source media="(prefers-color-scheme: light)" srcset="/assets/GitHub_Invertocat_Dark.svg" width="64px">
+                    <source media="(prefers-color-scheme: dark)" srcset="/assets/GitHub_Invertocat_Light.svg" width="64px">
+                    <img alt="OpenDream GitHub">
+                </picture>
+            </a>
+            <a href="https://discord.gg/UScStz6hnQ">
+                <picture>
+                    <source media="(prefers-color-scheme: light)" srcset="/assets/discord-mark-black.svg" width="64px">
+                    <source media="(prefers-color-scheme: dark)" srcset="/assets/discord-mark-white.svg" width="64px">
+                    <img alt="OpenDream Discord Server">
+                </picture>
+            </a>
+            <a href="https://ref.opendre.am/">
+                <img id="link-ODRef" src="/assets/odref.svg" width="64px" alt="OpenDream DM Reference">
+            </a>
         </div>
     </body>
 </html>

style.css

@@ -6,28 +6,12 @@
     body {
         background-color: #fafafa;
     }
-
-    #link-GitHub {
-        content: url(/assets/GitHub_Invertocat_Dark.svg);
-    }
-
-    #link-Discord {
-        content: url(/assets/discord-mark-black.svg);
-    }
 }
 
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #1b1b1b;
     }
-
-    #link-GitHub {
-        content: url(/assets/GitHub_Invertocat_Light.svg);
-    }
-
-    #link-Discord {
-        content: url(/assets/discord-mark-white.svg);
-    }
 }
 
 #logo {
@@ -45,10 +29,6 @@
     gap: 20px;
 }
 
-.link-image {
-    width: 64px;
-}
-
 a:link,a:visited {
     text-decoration: none;
 }