Native dark mode images

Author: philwareham

src/templates/pages/default.txp

@@ -76,7 +76,14 @@
         </div>
         <div class="wrapper-inner zebra">
             <div class="container">
-                <p><img loading="lazy" class="screen-large prefers-color-scheme" width="1150" height="494" alt="Textpattern Plugin Machine with Screen" src="/assets/img/index-plugins-machine-screen.png" data-src-light="/assets/img/index-plugins-machine-screen.png" data-src-dark="/assets/img/dark-index-plugins-machine-screen.png" srcset="/assets/img/index-plugins-machine-screen@2x.png 2x" data-srcset-light="/assets/img/index-plugins-machine-screen@2x.png 2x" data-srcset-dark="/assets/img/dark-index-plugins-machine-screen@2x.png 2x"><img loading="lazy" class="screen-small dark-contrast" width="620" height="477" alt="Textpattern Plugin Machine" src="/assets/img/index-plugins-machine.png"></p>
+                <p>
+                    <picture class="screen-large">
+                        <source srcset="/assets/img/dark-index-plugins-machine-screen.png, /assets/img/dark-index-plugins-machine-screen@2x.png 2x" type="image/png" media="(prefers-color-scheme: dark)">
+                        <source srcset="/assets/img/index-plugins-machine-screen.png, /assets/img/index-plugins-machine-screen@2x.png 2x" type="image/png">
+                        <img loading="lazy" decoding="async" width="1150" height="494" alt="Textpattern Plugin Machine with Screen" src="/assets/img/index-plugins-machine-screen.png">
+                    </picture>
+                    <img loading="lazy" decoding="async" class="screen-small dark-contrast" width="620" height="477" alt="Textpattern Plugin Machine" src="/assets/img/index-plugins-machine.png">
+                </p>
             </div>
         </div>
         <div class="wrapper-inner">