From becbf3ddcb7eef9ef9dc514c92b9df213d856a65 Mon Sep 17 00:00:00 2001
From: Jonah Aragon <jonah@triplebit.net>
Date: Sat, 1 Jan 2022 00:29:43 -0600
Subject: [PATCH] Add support for dark color-scheme logos to
 recommendation-card.html

Specify `logo_dark` in yaml
---
 _data/software/video-streaming-front-ends/1_invidious.yml | 1 +
 _includes/recommendation-card.html                        | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

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>