Added ability for images to respond to theme change

articles/website.html

@@ -111,18 +111,56 @@ <h5>
 
                 <p>The way this works is on my personal server I'm running a beta version of my website, that website is a clone of the GitHub repository, so I'm able to code changes view them locally even commit changes to the local repository. Then when I'm happy I can push it up to GitHub and the GitHub Action takes over and publishes the new version of the website.</p>
 
-                <p style="text-align: center;"><img src="../images/articles-parralelle-website.png" alt="Image depicting parralelle deployment method to have both a public and private website" width="70%"></img></p>
+                <p style="text-align: center;"><picture>
+                    <img
+                        id="parralelle-website"
+                        src="../images/articles-parralelle-website.png"
+                        alt="Image depicting parralelle deployment method to have both a public and private website"
+                        width="70%"
+                    ></img>
+                  </picture></p>
 
                 <p><a name="artcle-dns"></a>Now something else you may have noticed is this site address isn't <a href="https://torvos.github.io">https://torvos.github.io</a> that's because I use another feature of GitHub Pages called custom domain. While I registered torvos.ca with a domain registrar it is a rather bare bones one and doesn't support some things I wanted like programatic access.</p>
                 <p>Why did I want programatic access you may ask, well that's because once in a while my internet service provider changes my public IP, and when that happens I want a specific subdomain of my domain to be updated automatically. My server periodically checks it's public IP and compares it against what the subdomain and if it's diffrent send a programmatic request to update it.</p>
                 <p>For this I use <a hred="deSEC.io" target="_blank">deSEC (opens in a new tab)</a> they offer a free fully featured DNS hosting service that supports programatic access.</p>
 
-                <p style="text-align: center;"><img src="../images/articles-dns-mx-setup.png" alt="Image depicting the dns and mailbox setup for my domain" width="70%"></img></p>
+                <p style="text-align: center;"><picture>
+                    <img
+                        id="dnsmx-website"
+                        src="../images/articles-dns-mx-setup.png"
+                        alt="Image depicting the dns and mailbox setup for my domain"
+                        width="70%"
+                    ></img>
+                  </picture></p>
+
 
                 <p><a name="artcle-mx"></a>The last part of this website is how my email can be <a href="mailto:[email protected]">[email protected]</a> email isn't something that GitHiub Pages offer, and while I could pay Microsoft, Google, or Apple to use one of their custom domain email services it's even easier to use something like <a href="https://improvmx.com">ImprovMX</a> a fantasitc service that has a free option and fantasitc paid options for larger groups.</p>
                 <p>In the end this setup works for me and might work for you as well and if it does I hope this article helped.</p>
             </main> 
-
+
+            <script>
+
+                function updateImages() {
+                    if (localStorage.getItem('colorScheme') == "dark") {
+                        document.getElementById("parralelle-website").src="../images/articles-parralelle-website-dark.png";
+                        document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup-dark.png";
+                    }else{
+                        document.getElementById("parralelle-website").src="../images/articles-parralelle-website.png";
+                        document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup.png";
+                    }
+                }
+
+                updateImages();
+
+                document.addEventListener('wa-select', event => {
+                    const menu = event.target.closest('#color-scheme-selector wa-menu');
+                    if (!menu) return;
+                    setTimeout(function (){
+                        updateImages();
+                    }, 1); 
+                });
+
+            </script>
         </wa-page>
     </body>
 </html>