Dark: Use alternate images for homepage, resources, events

Thanks to lemon for editting all the images.

Co-authored-by: Leon Sandøy <[email protected]>

9 files changed, 78 insertions, 30 deletions

diff --git a/pydis_site/templates/events/pages/code-jams/10/_index.html b/pydis_site/templates/events/pages/code-jams/10/_index.html
index 9adaffa8..372aa805 100644
--- a/pydis_site/templates/events/pages/code-jams/10/_index.html
+++ b/pydis_site/templates/events/pages/code-jams/10/_index.html
@@ -93,9 +93,12 @@
     <div class="card mb-4">
         <div class="card-content">
             <div class="media">
-                <div class="media-left sponsor" style="max-width:150px">
+                <div class="media-left sponsor light-image" style="max-width:150px">
                     <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
                 </div>
+                <div class="media-left sponsor dark-image" style="max-width:150px">
+                    <img src="{% static "images/sponsors_dark/jetbrains.png" %}" alt="JetBrains">
+                </div>
                 <div class="media-content">
                     <p class="subtitle has-link"><a href="https://www.jetbrains.com/" target="_blank" rel="noopener">JetBrains</a></p>
                     <p class="is-italic">
diff --git a/pydis_site/templates/events/pages/code-jams/8/_index.html b/pydis_site/templates/events/pages/code-jams/8/_index.html
index 319d9ecb..2d197199 100644
--- a/pydis_site/templates/events/pages/code-jams/8/_index.html
+++ b/pydis_site/templates/events/pages/code-jams/8/_index.html
@@ -112,7 +112,8 @@
         <div class="card-content">
             <div class="media">
                 <div class="media-left sponsor" style="max-width:150px">
-                    <img src="{% static "images/events/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean">
+                    <img class="light-image" src="{% static "images/events/logos/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean">
+                    <img class="dark-image" src="{% static "images/events/logos_dark/DO_Logo_Vertical_White.png" %}" alt="Digital Ocean">
                 </div>
                 <div class="media-content">
                     <p class="subtitle has-link"><a href="https://www.digitalocean.com/" target="_blank" rel="noopener">DigitalOcean</a></p>
@@ -131,7 +132,8 @@
         <div class="card-content">
             <div class="media">
                 <div class="media-left sponsor" style="max-width:150px">
-                    <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
+                    <img class="light-image" src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
+                    <img class="dark-image" src="{% static "images/sponsors_dark/jetbrains.png" %}" alt="JetBrains">
                 </div>
                 <div class="media-content">
                     <p class="subtitle has-link"><a href="https://www.jetbrains.com/" target="_blank" rel="noopener">JetBrains</a></p>
@@ -150,7 +152,7 @@
         <div class="card-content">
             <div class="media">
                 <div class="media-left sponsor" style="max-width:150px">
-                    <img src="{% static "images/events/Tabnine.png" %}" alt="Tabnine">
+                    <img src="{% static "images/events/logos/Tabnine.png" %}" alt="Tabnine">
                 </div>
                 <div class="media-content">
                     <p class="subtitle has-link"><a href="https://www.tabnine.com/now?utm_source=discord&utm_medium=Ins&utm_campaign=PythonDis" target="_blank" rel="noopener">Tabnine</a></p>
diff --git a/pydis_site/templates/events/pages/code-jams/9/_index.html b/pydis_site/templates/events/pages/code-jams/9/_index.html
index aa4c6915..68e377c9 100644
--- a/pydis_site/templates/events/pages/code-jams/9/_index.html
+++ b/pydis_site/templates/events/pages/code-jams/9/_index.html
@@ -105,7 +105,8 @@
         <div class="card-content">
             <div class="media">
                 <div class="media-left sponsor" style="max-width:150px">
-                    <img src="{% static "images/events/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean">
+                    <img class="light-image" src="{% static "images/events/logos/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean">
+                    <img class="dark-image" src="{% static "images/events/logos_dark/DO_Logo_Vertical_White.png" %}" alt="Digital Ocean">
                 </div>
                 <div class="media-content">
                     <p class="subtitle has-link"><a href="https://www.digitalocean.com/" target="_blank" rel="noopener">DigitalOcean</a></p>
@@ -124,7 +125,8 @@
         <div class="card-content">
             <div class="media">
                 <div class="media-left sponsor" style="max-width:150px">
-                    <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
+                    <img class="light-image" src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
+                    <img class="dark-image" src="{% static "images/sponsors_dark/jetbrains.png" %}" alt="JetBrains">
                 </div>
                 <div class="media-content">
                     <p class="subtitle has-link"><a href="https://www.jetbrains.com/" target="_blank" rel="noopener">JetBrains</a></p>
@@ -144,7 +146,8 @@
         <div class="card-content">
             <div class="media">
                 <div class="media-left sponsor" style="max-width:150px">
-                    <img src="{% static "images/events/Replit.png" %}" alt="Replit">
+                    <img class="light-image" src="{% static "images/events/logos/Replit.png" %}" alt="Replit">
+                    <img class="dark-image" src="{% static "images/events/logos_dark/Replit.png" %}" alt="Replit">
                 </div>
                 <div class="media-content">
                     <p class="subtitle has-link"><a href="https://www.replit.com" target="_blank" rel="noopener">Replit</a></p>
diff --git a/pydis_site/templates/events/sidebar/code-jams/6.html b/pydis_site/templates/events/sidebar/code-jams/6.html
index c09d9aab..d41986a5 100644
--- a/pydis_site/templates/events/sidebar/code-jams/6.html
+++ b/pydis_site/templates/events/sidebar/code-jams/6.html
@@ -3,12 +3,18 @@
     <p class="menu-label">Sponsors:</p>
     <p>
         <div class="sponsor">
-            <a href="https://do.co/devmeetup" target="_new"><img src="https://d9hhrg4mnvzow.cloudfront.net/try.digitalocean.com/developer-cloud/3f06d1cb-do-logo-blue-svg.svg" style="width: 100%;" alt=""></a>
+            <a href="https://do.co/devmeetup" target="_new">
+                <img class="light-image" src="/static/images/events/logos/DO_Logo_Vertical_Blue.png" style="width: 100%;" alt="">
+                <img class="dark-image" src="/static/images/events/logos_dark/DO_Logo_Vertical_White.png" style="width: 100%;" alt="">
+            </a>
         </div>
     </p>
     <p>
         <div class="sponsor">
-            <a href="https://jetbrains.com" target="_new"><img src="https://pythondiscord.com/static/images/sponsors/jetbrains.png" alt=""></a>
+            <a href="https://jetbrains.com" target="_new">
+                <img class="light-image" src="/static/images/sponsors/jetbrains.png" alt="Jetbrains">
+                <img class="dark-image" src="/static/images/sponsors_dark/jetbrains.png" alt="Jetbrains">
+            </a>
         </div>
     </p>
 </div>
diff --git a/pydis_site/templates/events/sidebar/code-jams/7.html b/pydis_site/templates/events/sidebar/code-jams/7.html
index 3381d3ae..89c90ea9 100644
--- a/pydis_site/templates/events/sidebar/code-jams/7.html
+++ b/pydis_site/templates/events/sidebar/code-jams/7.html
@@ -5,12 +5,14 @@
     <p class="menu-label">Sponsors</p>
     <div class="sponsor">
         <a href="https://www.djangoproject.com/" target="_blank">
-            <img src="https://static.djangoproject.com/img/logos/django-logo-positive.png" alt="Django">
+            <img class="light-image" src="https://static.djangoproject.com/img/logos/django-logo-positive.png" alt="Django">
+            <img class="dark-image" src="/static/images/events/logos_dark/django.png" alt="Django">
         </a>
     </div>
     <div class="sponsor">
         <a href="https://jetbrains.com" target="_blank">
-            <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
+            <img class="light-image" src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
+            <img class="dark-image" src="{% static "images/sponsors_dark/jetbrains.png" %}" alt="JetBrains">
         </a>
     </div>
 </div>
diff --git a/pydis_site/templates/events/sidebar/code-jams/8.html b/pydis_site/templates/events/sidebar/code-jams/8.html
index f579a0b2..a72da760 100644
--- a/pydis_site/templates/events/sidebar/code-jams/8.html
+++ b/pydis_site/templates/events/sidebar/code-jams/8.html
@@ -13,17 +13,19 @@
     <h4 class="menu-label">Our Sponsors</h4>
     <div class="sponsor">
         <a href="https://www.digitalocean.com/" target="_blank">
-            <img src="{% static "images/events/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean">
+            <img class="light-image" src="{% static "images/events/logos/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean">
+            <img class="dark-image" src="{% static "images/events/logos_dark/DO_Logo_Vertical_White.png" %}" alt="Digital Ocean">
         </a>
     </div>
     <div class="sponsor">
         <a href="https://jetbrains.com" target="_blank">
-            <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
+            <img class="light-image" src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
+            <img class="dark-image" src="{% static "images/sponsors_dark/jetbrains.png" %}" alt="JetBrains">
         </a>
     </div>
     <div class="sponsor">
         <a href="https://www.tabnine.com/now?utm_source=discord&utm_medium=Ins&utm_campaign=PythonDis" target="_blank">
-            <img src="{% static "images/events/Tabnine.png" %}" alt="Tabnine">
+            <img src="{% static "images/events/logos/Tabnine.png" %}" alt="Tabnine">
         </a>
     </div>
 </div>
diff --git a/pydis_site/templates/events/sidebar/code-jams/9.html b/pydis_site/templates/events/sidebar/code-jams/9.html
index a312ed35..f69d388b 100644
--- a/pydis_site/templates/events/sidebar/code-jams/9.html
+++ b/pydis_site/templates/events/sidebar/code-jams/9.html
@@ -11,17 +11,20 @@
     <h4 class="menu-label">Our Sponsors</h4>
     <div class="sponsor">
         <a href="https://www.digitalocean.com/" target="_blank">
-            <img src="{% static "images/events/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean">
+            <img class="light-image" src="{% static "images/events/logos/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean">
+            <img class="dark-image" src="{% static "images/events/logos_dark/DO_Logo_Vertical_White.png" %}" alt="Digital Ocean">
         </a>
     </div>
     <div class="sponsor">
         <a href="https://jetbrains.com" target="_blank">
-            <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
+            <img class="light-image" src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains">
+            <img class="dark-image" src="{% static "images/sponsors_dark/jetbrains.png" %}" alt="JetBrains">
         </a>
     </div>
     <div class="sponsor">
         <a href="https://replit.com/" target="_blank">
-            <img src="{% static "images/events/Replit.png" %}" alt="Replit">
+            <img class="light-image" src="{% static "images/events/logos/Replit.png" %}" alt="Replit">
+            <img class="dark-image" src="{% static "images/events/logos_dark/Replit.png" %}" alt="Replit">
         </a>
     </div>
 </div>
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index 30b064a4..78ed862c 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -189,32 +189,40 @@
         </h1>
         <div class="columns is-vcentered">
           <a href="https://www.netcup.eu/" class="column is-one-third">
-            <img src="{% static "images/sponsors/netcup.png" %}" alt="netcup" loading="lazy"/>
+            <img class="light-image" src="{% static "images/sponsors/netcup.png" %}" alt="netcup" loading="lazy"/>
+            <img class="dark-image" src="{% static "images/sponsors_dark/netcup.png" %}" alt="netcup" loading="lazy"/>
           </a>
           <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085" class="column is-one-third">
-            <img src="{% static "images/sponsors/linode.png" %}" alt="Linode" loading="lazy"/>
+            <img class="light-image" src="{% static "images/sponsors/linode.png" %}" alt="Linode" loading="lazy"/>
+            <img class="dark-image" src="{% static "images/sponsors_dark/linode.png" %}" alt="Linode" loading="lazy"/>
           </a>
           <a href="https://jetbrains.com" class="column is-one-third">
-            <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains" loading="lazy"/>
+            <img class="light-image" src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains" loading="lazy"/>
+            <img class="dark-image" src="{% static "images/sponsors_dark/jetbrains.png" %}" alt="JetBrains" loading="lazy"/>
           </a>
         </div>
         <div class="columns is-vcentered">
           <a href="https://sentry.io" class="column is-one-third">
-            <img src="{% static "images/sponsors/sentry.png" %}" alt="Sentry" loading="lazy"/>
+            <img class="light-image" src="{% static "images/sponsors/sentry.png" %}" alt="Sentry" loading="lazy"/>
+            <img class="dark-image" src="{% static "images/sponsors_dark/sentry.png" %}" alt="Sentry" loading="lazy"/>
           </a>
           <a href="https://notion.so" class="column is-one-third">
-            <img src="{% static "images/sponsors/notion.png" %}" alt="Notion" loading="lazy"/>
+            <img class="light-image" src="{% static "images/sponsors/notion.png" %}" alt="Notion" loading="lazy"/>
+            <img class="dark-image" src="{% static "images/sponsors_dark/notion.png" %}" alt="Notion" loading="lazy"/>
           </a>
           <a href="https://streamyard.com" class="column is-one-third">
-            <img src="{% static "images/sponsors/streamyard.png" %}" alt="StreamYard" loading="lazy"/>
+            <img class="light-image" src="{% static "images/sponsors/streamyard.png" %}" alt="StreamYard" loading="lazy"/>
+            <img class="dark-image" src="{% static "images/sponsors/streamyard.png" %}" alt="StreamYard" loading="lazy"/>
           </a>
         </div>
         <div class="columns is-vcentered">
           <a href="https://www.netlify.com/" class="column is-half">
-            <img src="{% static "images/sponsors/netlify.png" %}" alt="Netlify" loading="lazy"/>
+            <img class="light-image" src="{% static "images/sponsors/netlify.png" %}" alt="Netlify" loading="lazy"/>
+            <img class="dark-image" src="{% static "images/sponsors_dark/netlify.png" %}" alt="Netlify" loading="lazy"/>
           </a>
           <a href="https://www.cloudflare.com/" class="column is-half">
-            <img src="{% static "images/sponsors/cloudflare.png" %}" alt="Cloudflare" loading="lazy"/>
+            <img class="light-image" src="{% static "images/sponsors/cloudflare.png" %}" alt="Cloudflare" loading="lazy"/>
+            <img class="dark-image" src="{% static "images/sponsors_dark/cloudflare.png" %}" alt="Cloudflare" loading="lazy"/>
           </a>
         </div>
       </div>
diff --git a/pydis_site/templates/resources/resource_box_header.html b/pydis_site/templates/resources/resource_box_header.html
index dfbdd92f..1170598a 100644
--- a/pydis_site/templates/resources/resource_box_header.html
+++ b/pydis_site/templates/resources/resource_box_header.html
@@ -2,11 +2,25 @@
 
 {# Icon section #}
 {% if 'icon_image' in resource %}
-    <img src="{{ resource.icon_image }}" alt="" style="height: {{ resource.icon_size|default:30 }}px;">
+    {% if 'icon_image_dark' in resource %}
+        <img class="light-image" src="{{ resource.icon_image }}" alt="" style="height: {{ resource.icon_size|default:30 }}px;">
+        <img class="dark-image" src="{{ resource.icon_image_dark }}" alt="" style="height: {{ resource.icon_size|default:30 }}px;">
+    {% else %}
+        <img src="{{ resource.icon_image }}" alt="" style="height: {{ resource.icon_size|default:30 }}px;">
+    {% endif %}
 {% elif 'title_icon' in resource %}
-    <span class="icon is-size-4 is-medium">
-        <i class="{{ resource.title_icon|as_icon }} is-size-3 resource-icon has-icon-padding is-{{ resource.title_icon_color }}"></i>
-    </span>
+    {% if 'title_icon_dark' in resource %}
+        <span class="icon is-size-4 is-medium light-image">
+            <i class="{{ resource.title_icon|as_icon }} is-size-3 resource-icon has-icon-padding is-{{ resource.title_icon_color }}"></i>
+        </span>
+        <span class="icon is-size-4 is-medium dark-image">
+            <i class="{{ resource.title_icon_dark|as_icon }} is-size-3 resource-icon has-icon-padding is-{{ resource.title_icon_color }}"></i>
+        </span>
+    {% else %}
+        <span class="icon is-size-4 is-medium">
+            <i class="{{ resource.title_icon|as_icon }} is-size-3 resource-icon has-icon-padding is-{{ resource.title_icon_color }}"></i>
+        </span>
+    {% endif %}
 {% elif 'default_icon' in category_info %}
     <span class="icon is-size-4 is-medium">
         <i class="{{ category_info.default_icon|as_icon }} is-size-3 resource-icon has-icon-padding is-{{ category_info.default_icon_color }}"></i>
@@ -16,7 +30,12 @@
 {# Title section #}
 <span class="is-size-4 has-text-weight-bold">
     {% if 'title_image' in resource %}
-        <img src="{{ resource.title_image }}" alt="" style="height: 50px; {{ resource.title_image_style }}">
+        {% if 'title_image_dark' in resource %}
+            <img class="light-image" src="{{ resource.title_image }}" alt="" style="height: 50px; {{ resource.title_image_style }}">
+            <img class="dark-image" src="{{ resource.title_image_dark }}" alt="" style="height: 50px; {{ resource.title_image_style }}">
+        {% else %}
+            <img src="{{ resource.title_image }}" alt="" style="height: 50px; {{ resource.title_image_style }}">
+        {% endif %}
     {% elif 'name' in resource %}
         {{ resource.name }}
     {% endif %}