diff --git a/_data/software/video-streaming-front-ends/1_invidious.yml b/_data/software/video-streaming-front-ends/1_invidious.yml
index e57eb5b1..4ff9d58e 100644
--- a/_data/software/video-streaming-front-ends/1_invidious.yml
+++ b/_data/software/video-streaming-front-ends/1_invidious.yml
@@ -1,6 +1,7 @@
 title: Invidious
 type: Recommendation
 logo: /assets/img/video-streaming/invidious.svg
+logo_dark: /assets/img/video-streaming/invidious-dark.svg
 description: |
   <strong>Invidious</strong> is a free and open source front end for YouTube that is also self-hostable. There are list of <a href="https://instances.invidious.io">public instances</a>. Some instances have <a href="https://www.torproject.org">Tor</a> onion services support.
 
diff --git a/_includes/recommendation-card.html b/_includes/recommendation-card.html
index aaf84da0..46b20574 100644
--- a/_includes/recommendation-card.html
+++ b/_includes/recommendation-card.html
@@ -2,7 +2,12 @@
   <div class="card-body">
     <div class="row p-3">
       <div class="col-12 col-sm-4 col-md-3 text-center">
-        <img src="{{ item.logo }}" alt="{{ item.name }} logo" class="py-5 w-75">
+        <picture>
+          {% if item.logo_dark %}<source
+            srcset="{{ item.logo_dark }}"
+            media="(prefers-color-scheme: dark)">{% endif %}
+          <img src="{{ item.logo }}" alt= "{{ item.name }} logo" class="py-5 w-75">
+        </picture>
       </div>
       <div class="col-12 col-sm-8 col-md-9 text-center text-md-start pb-4">
         <h2>{{ item.title }}</h2>