From db647e2295f63ada8f31f1f546dd3b803f00f61c Mon Sep 17 00:00:00 2001
From: hensm <m+github@matt.tf>
Date: Wed, 22 May 2019 16:09:56 +0100
Subject: [PATCH] Use <picture> for theme-specific images on site

---
 docs/index.css  | 6 ------
 docs/index.html | 6 ++++--
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/docs/index.css b/docs/index.css
index c22a486..0fc1097 100755
--- a/docs/index.css
+++ b/docs/index.css
@@ -309,12 +309,6 @@ body {
     background-color: var(--grey-10-a10);
 }
 
-:root.theme-light .img-dark,
-:root.theme-dark .img-light {
-    display: none;
-}
-
-
 
 .footer {
     align-items: center;
diff --git a/docs/index.html b/docs/index.html
index 28b9ba2..a204963 100755
--- a/docs/index.html
+++ b/docs/index.html
@@ -67,8 +67,10 @@
                             <details class="faq card" open>
                                 <summary class="faq__summary">How do I cast something?</summary>
                                 <div class="faq__content">
-                                    <img src="images/menu_light.png" alt="Media context menu" class="img-light" style="float: right">
-                                    <img src="images/menu_dark.png" alt="Media context menu" class="img-dark" style="float: right">
+                                    <picture style="float: right">
+                                        <source srcset="images/menu_light.png" alt="Media context menu" media="(prefers-color-scheme: light)">
+                                        <img src="images/menu_dark.png" alt="Media context menu">
+                                    </picture>
                                     <p>
                                         Ignore the toolbar button for now, it's just a placeholder for development.
                                     </p>