Merge pull request #75 from GabsEdits/dark-images

feat: dark images for dark theme for hero

Author: Mirko Brombin

public/assets/hero/bottle-creation-dark.png

@@ -46,11 +46,23 @@ import { Icon } from "astro-icon/components";
       </div>
     </div>
     <div class="w-full flex justify-center">
-      <img
-        src="/assets/hero/bottle-creation.png"
-        alt="Bottle Creation"
-        class="max-w-full h-auto mb-0"
-      />
+    <picture>
+        <source
+            srcset="/assets/hero/bottle-creation.png"
+            media="(prefers-color-scheme: light)"
+        />
+
+        <source
+            srcset="/assets/hero/bottle-creation-dark.png"
+            media="(prefers-color-scheme: dark)"
+        />
+
+        <img
+            src="/assets/hero/bottle-creation.png"
+            alt="Bottle Creation"
+            class="max-w-full h-auto mb-0"
+        />
+    </picture>
     </div>
   </section>
 
@@ -93,11 +105,23 @@ import { Icon } from "astro-icon/components";
           >More about</a
         >
       </div>
-      <img
-        src="/assets/hero/bottles-gaming.png"
-        alt="Bottles Gaming"
-        class="md:max-w-none md:h-auto"
-      />
+      <picture>
+        <source
+            srcset="/assets/hero/bottles-gaming.png"
+            media="(prefers-color-scheme: light)"
+        />
+
+        <source
+            srcset="/assets/hero/bottles-gaming-dark.png"
+            media="(prefers-color-scheme: dark)"
+        />
+
+        <img
+            src="/assets/hero/bottles-gaming.png"
+            alt="Bottles Gaming"
+            class="md:max-w-none md:h-auto"
+        />
+      </picture>
     </div>
   </section>
 
@@ -134,11 +158,24 @@ import { Icon } from "astro-icon/components";
           >More about</a
         >
       </div>
-      <img
-        src="/assets/hero/bottles-environments.png"
-        alt="Bottles Environments"
-        class="md:max-w-none md:h-auto"
-      />
+
+        <picture>
+            <source
+                srcset="/assets/hero/bottles-environments.png"
+                media="(prefers-color-scheme: light)"
+            />
+
+            <source
+                srcset="/assets/hero/bottles-environments-dark.png"
+                media="(prefers-color-scheme: dark)"
+            />
+
+            <img
+                src="/assets/hero/bottles-environments.png"
+                alt="Bottles Environments"
+                class="md:max-w-none md:h-auto"
+            />
+        </picture>
     </div>
   </section>
 
@@ -170,11 +207,24 @@ import { Icon } from "astro-icon/components";
           >More about</a
         >
       </div>
-      <img
-        src="/assets/hero/bottles-customizable.png"
-        alt="Bottles Customizable"
-        class="md:max-w-none md:h-auto"
-      />
+
+        <picture>
+            <source
+                srcset="/assets/hero/bottles-customizable.png"
+                media="(prefers-color-scheme: light)"
+            />
+
+            <source
+                srcset="/assets/hero/bottles-customizable-dark.png"
+                media="(prefers-color-scheme: dark)"
+            />
+
+            <img
+                src="/assets/hero/bottles-customizable.png"
+                alt="Bottles Customizable"
+                class="md:max-w-none md:h-auto"
+            />
+        </picture>
     </div>
   </section>
 
@@ -205,11 +255,24 @@ import { Icon } from "astro-icon/components";
           >More about</a
         >
       </div>
-      <img
-        src="/assets/hero/bottles-dependencies-manager.png"
-        alt="Bottles Dependencies Manager"
-        class="md:max-w-none md:h-auto"
-      />
+
+        <picture>
+            <source
+                srcset="/assets/hero/bottles-dependencies-manager.png"
+                media="(prefers-color-scheme: light)"
+            />
+
+            <source
+                srcset="/assets/hero/bottles-dependencies-manager-dark.png"
+                media="(prefers-color-scheme: dark)"
+            />
+
+            <img
+                src="/assets/hero/bottles-dependencies-manager.png"
+                alt="Bottles Dependencies Manager"
+                class="md:max-w-none md:h-auto"
+            />
+        </picture>
     </div>
   </section>
 
@@ -243,11 +306,24 @@ import { Icon } from "astro-icon/components";
           >Apps</a
         >
       </div>
-      <img
-        src="/assets/hero/bottles-installers.png"
-        alt="Bottles Installers"
-        class="md:max-w-none md:h-auto"
-      />
+
+        <picture>
+            <source
+                srcset="/assets/hero/bottles-installers.png"
+                media="(prefers-color-scheme: light)"
+            />
+
+            <source
+                srcset="/assets/hero/bottles-installers-dark.png"
+                media="(prefers-color-scheme: dark)"
+            />
+
+            <img
+                src="/assets/hero/bottles-installers.png"
+                alt="Bottles Installers"
+                class="md:max-w-none md:h-auto"
+            />
+        </picture>
     </div>
   </section>
 
@@ -279,11 +355,24 @@ import { Icon } from "astro-icon/components";
           >More about</a
         >
       </div>
-      <img
-        src="/assets/hero/bottles-versioning.png"
-        alt="Bottles Versioning"
-        class="md:max-w-none md:h-auto"
-      />
+
+        <picture>
+            <source
+                srcset="/assets/hero/bottles-versioning.png"
+                media="(prefers-color-scheme: light)"
+            />
+
+            <source
+                srcset="/assets/hero/bottles-versioning-dark.png"
+                media="(prefers-color-scheme: dark)"
+            />
+
+            <img
+                src="/assets/hero/bottles-versioning.png"
+                alt="Bottles Versioning"
+                class="md:max-w-none md:h-auto"
+            />
+        </picture>
     </div>
   </section>