diff --git a/docs/images/menu.png b/docs/images/menu.png
deleted file mode 100644
index d7e5c1c..0000000
Binary files a/docs/images/menu.png and /dev/null differ
diff --git a/docs/images/menu_dark.png b/docs/images/menu_dark.png
new file mode 100644
index 0000000..6da8094
Binary files /dev/null and b/docs/images/menu_dark.png differ
diff --git a/docs/images/menu_light.png b/docs/images/menu_light.png
new file mode 100644
index 0000000..40b3427
Binary files /dev/null and b/docs/images/menu_light.png differ
diff --git a/docs/index.css b/docs/index.css
index 8410ac6..88b9069 100755
--- a/docs/index.css
+++ b/docs/index.css
@@ -309,6 +309,11 @@ body {
     background-color: var(--grey-10-a10);
 }
 
+:root.theme-light .img-dark,
+:root.theme-dark .img-light {
+    display: none;
+}
+
 
 
 .footer {
diff --git a/docs/index.html b/docs/index.html
index be838b4..28b9ba2 100755
--- a/docs/index.html
+++ b/docs/index.html
@@ -67,7 +67,8 @@
                             <details class="faq card" open>
                                 <summary class="faq__summary">How do I cast something?</summary>
                                 <div class="faq__content">
-                                    <img src="images/menu.png" alt="Media context menu" style="float: right">
+                                    <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">
                                     <p>
                                         Ignore the toolbar button for now, it's just a placeholder for development.
                                     </p>