Dark: Use alternate images for homepage, resources, events

Thanks to lemon for editting all the images.

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

49 files changed, 97 insertions, 43 deletions

diff --git a/pydis_site/apps/resources/resources/adafruit.yaml b/pydis_site/apps/resources/resources/adafruit.yaml
index 957223c9..bedbf16a 100644
--- a/pydis_site/apps/resources/resources/adafruit.yaml
+++ b/pydis_site/apps/resources/resources/adafruit.yaml
@@ -5,6 +5,7 @@ description: Adafruit is an open-source electronics manufacturer
   provide help with your projects,
   and the Adafruit devs do all the CircuitPython Development right out in the open.
 title_image: /static/images/resources/adafruit.png
+title_image_dark: /static/images/resources_dark/adafruit.png
 title_url: https://adafruit.com/
 urls:
   - icon: branding/discord
diff --git a/pydis_site/apps/resources/resources/corey_schafer.yaml b/pydis_site/apps/resources/resources/corey_schafer.yaml
index d66ea004..91abeb52 100644
--- a/pydis_site/apps/resources/resources/corey_schafer.yaml
+++ b/pydis_site/apps/resources/resources/corey_schafer.yaml
@@ -10,6 +10,7 @@ description: 'Corey has a number of exceptionally high quality tutorial series
   Check out his channel for more video series!
   '
 title_image: https://i.imgur.com/KIfWw3b.png
+title_image_dark: /static/images/resources_dark/coreyschafer.png
 title_url: https://www.youtube.com/channel/UCCezIgC97PvUuR4_gbFUs5g
 urls:
   - icon: solid/external-link-alt
diff --git a/pydis_site/apps/resources/resources/kivy.yaml b/pydis_site/apps/resources/resources/kivy.yaml
index dcced022..742fa274 100644
--- a/pydis_site/apps/resources/resources/kivy.yaml
+++ b/pydis_site/apps/resources/resources/kivy.yaml
@@ -3,6 +3,7 @@ description: The Kivy project, through the Kivy framework and its sister project
   aims to provide all the tools to create desktop and mobile applications in Python.
   Allowing rapid development of multitouch applications with custom and exciting user interfaces.
 title_image: /static/images/resources/kivy.png
+title_image_dark: /static/images/resources_dark/kivy.png
 title_url: https://kivy.org/
 urls:
   - icon: branding/discord
diff --git a/pydis_site/apps/resources/resources/microsoft.yaml b/pydis_site/apps/resources/resources/microsoft.yaml
index 290283cc..8b31020c 100644
--- a/pydis_site/apps/resources/resources/microsoft.yaml
+++ b/pydis_site/apps/resources/resources/microsoft.yaml
@@ -2,6 +2,7 @@ name: Microsoft Python
 description: Microsoft Python is a Discord server for discussing all things relating to using Python with Microsoft products,
   they have channels for Azure, VS Code, IoT, Data Science and much more!
 title_image: https://1000logos.net/wp-content/uploads/2017/04/Microsoft-Logo.png
+title_image_dark: /static/images/resources_dark/microsoft.png
 title_url: https://www.microsoft.com/en-us/boards/pycon2020.aspx
 urls:
   - icon: branding/discord
diff --git a/pydis_site/apps/resources/resources/pallets.yaml b/pydis_site/apps/resources/resources/pallets.yaml
index a330b756..453c263f 100644
--- a/pydis_site/apps/resources/resources/pallets.yaml
+++ b/pydis_site/apps/resources/resources/pallets.yaml
@@ -3,6 +3,7 @@ description: The Pallets Projects develop Python libraries such as the Flask web
   the Jinja templating library, and the Click command line toolkit. Join to discuss
   and get help from the Pallets community.
 title_image: https://i.imgur.com/sV9Ypdf.png
+title_image_dark: /static/images/resources_dark/pallets.png
 title_url: https://www.palletsprojects.com/
 urls:
   - icon: branding/discord
diff --git a/pydis_site/apps/resources/resources/panda3d.yaml b/pydis_site/apps/resources/resources/panda3d.yaml
index c05a35ca..dd200519 100644
--- a/pydis_site/apps/resources/resources/panda3d.yaml
+++ b/pydis_site/apps/resources/resources/panda3d.yaml
@@ -2,6 +2,7 @@ name: Panda3D
 description: Panda3D is a Python-focused 3-D framework for rapid development of games,
   visualizations, and simulations, written in C++ with an emphasis on performance and flexibility.
 title_image: /static/images/resources/panda3d.png
+title_image_dark: /static/images/resources_dark/panda3d.png
 title_url: https://www.panda3d.org/
 position: 9
 urls:
diff --git a/pydis_site/apps/resources/resources/people_postgres_data.yaml b/pydis_site/apps/resources/resources/people_postgres_data.yaml
index 212eed89..ce5ad4a8 100644
--- a/pydis_site/apps/resources/resources/people_postgres_data.yaml
+++ b/pydis_site/apps/resources/resources/people_postgres_data.yaml
@@ -5,6 +5,7 @@ description: People, Postgres, Data specializes in building users of Postgres
   They take a holistic approach to their community inviting not only technical topics but Professional Development
   and Life in general including movies, games, books and travel.
 title_image: https://media.discordapp.net/attachments/748954447857844318/750519488268730377/people_postgres_data.png
+title_image_dark: /static/images/resources_dark/people_postgres_data.png
 title_url: https://postgresconf.org/
 urls:
   - icon: branding/discord
diff --git a/pydis_site/apps/resources/resources/pyglet.yaml b/pydis_site/apps/resources/resources/pyglet.yaml
index bdfb84cf..73f99bde 100644
--- a/pydis_site/apps/resources/resources/pyglet.yaml
+++ b/pydis_site/apps/resources/resources/pyglet.yaml
@@ -5,6 +5,7 @@ description: Pyglet is a powerful,
   loading images and videos, and playing sounds and music. All of this with a friendly Pythonic API,
   that's simple to learn and doesn't get in your way.
 title_image: https://i.imgur.com/LfQwXUe.png
+title_image_dark: /static/images/resources_dark/pyglet.png
 title_url: http://pyglet.org/
 urls:
   - icon: branding/discord
diff --git a/pydis_site/apps/resources/resources/python_org.yaml b/pydis_site/apps/resources/resources/python_org.yaml
index ece954dd..e7a9e806 100644
--- a/pydis_site/apps/resources/resources/python_org.yaml
+++ b/pydis_site/apps/resources/resources/python_org.yaml
@@ -1,6 +1,7 @@
 name: The Python Tutorial
 description: The official Python tutorial by Python.org
 title_image: https://www.python.org/static/community_logos/python-logo-master-v3-TM.png
+title_image_dark: /static/images/resources_dark/python.png
 title_url: https://docs.python.org/3/tutorial/
 tags:
   topics:
diff --git a/pydis_site/apps/resources/resources/sentdex.yaml b/pydis_site/apps/resources/resources/sentdex.yaml
index 7cb0a8a4..baf42163 100644
--- a/pydis_site/apps/resources/resources/sentdex.yaml
+++ b/pydis_site/apps/resources/resources/sentdex.yaml
@@ -10,6 +10,7 @@ description: 'An enormous amount of Python content for all skill levels
   Check out his channel for more video series!
   '
 title_image: https://i.imgur.com/kJgWZIu.png
+title_image_dark: /static/images/resources_dark/sentdex.png
 title_url: https://www.youtube.com/user/sentdex
 urls:
   - icon: solid/external-link-alt
diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index bd448695..150c0287 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -194,3 +194,11 @@ button.is-size-navbar-menu, a.is-size-navbar-menu {
 [data-theme="dark"] .button.is-link:hover, .button.is-link.is-hovered {
     background-color: #6276BC;
 }
+
+[data-theme="dark"] .light-image {
+    display: none;
+}
+
+[data-theme="light"] .dark-image {
+    display: none;
+}
diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css
index dc6183d7..cd7ab5ae 100644
--- a/pydis_site/static/css/events/base.css
+++ b/pydis_site/static/css/events/base.css
@@ -32,7 +32,3 @@ pre {
 .box .sponsor {
     margin-bottom: 1rem;
 }
-
-[data-theme="dark"] .sponsor {
-    background-color: #EDEDED;
-}
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index 13a19d38..f21263db 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -266,10 +266,6 @@ h1 {
     text-align: center;
 }
 
-[data-theme="dark"] #sponsors {
-    background-color: #2C2F33 !important;
-}
-
 #sponsors .container {
     max-width: 70%;
 }
@@ -284,10 +280,6 @@ h1 {
     max-height: 4rem;
 }
 
-[data-theme="dark"] #sponsors a {
-    background-color: #EDEDED;
-}
-
 @media (min-width: 800px) {
     #sponsors a.column.is-one-third:first-child {
         margin-left: -.8rem;
diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index 582d96e4..3bf5ade4 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -37,7 +37,7 @@ i.has-icon-padding {
     display: none;
 }
 #tab-content p.is-active {
-display: block;
+    display: block;
 }
 
 /* Disable highlighting for all text in the filters. */
diff --git a/pydis_site/static/images/events/Replit.png b/pydis_site/static/images/events/Replit.png
deleted file mode 100644
index a8202641..00000000
--- a/pydis_site/static/images/events/Replit.png
+++ /dev/null
diff --git a/pydis_site/static/images/events/DO_Logo_Vertical_Blue.png b/pydis_site/static/images/events/logos/DO_Logo_Vertical_Blue.png
index ad528652..ad528652 100644
--- a/pydis_site/static/images/events/DO_Logo_Vertical_Blue.png
+++ b/pydis_site/static/images/events/logos/DO_Logo_Vertical_Blue.png
diff --git a/pydis_site/static/images/events/logos/Replit.png b/pydis_site/static/images/events/logos/Replit.png
new file mode 100644
index 00000000..08033134
--- /dev/null
+++ b/pydis_site/static/images/events/logos/Replit.png
diff --git a/pydis_site/static/images/events/Tabnine.png b/pydis_site/static/images/events/logos/Tabnine.png
index eee42a5e..eee42a5e 100644
--- a/pydis_site/static/images/events/Tabnine.png
+++ b/pydis_site/static/images/events/logos/Tabnine.png
diff --git a/pydis_site/static/images/events/logos_dark/DO_Logo_Vertical_White.png b/pydis_site/static/images/events/logos_dark/DO_Logo_Vertical_White.png
new file mode 100644
index 00000000..d71b0714
--- /dev/null
+++ b/pydis_site/static/images/events/logos_dark/DO_Logo_Vertical_White.png
diff --git a/pydis_site/static/images/events/logos_dark/Replit.png b/pydis_site/static/images/events/logos_dark/Replit.png
new file mode 100644
index 00000000..c362df72
--- /dev/null
+++ b/pydis_site/static/images/events/logos_dark/Replit.png
diff --git a/pydis_site/static/images/events/logos_dark/django.png b/pydis_site/static/images/events/logos_dark/django.png
new file mode 100644
index 00000000..3d0bf011
--- /dev/null
+++ b/pydis_site/static/images/events/logos_dark/django.png
diff --git a/pydis_site/static/images/resources/adafruit.png b/pydis_site/static/images/resources/adafruit.png
index 82cd45ac..652dbaeb 100644
--- a/pydis_site/static/images/resources/adafruit.png
+++ b/pydis_site/static/images/resources/adafruit.png
diff --git a/pydis_site/static/images/resources/kivy.png b/pydis_site/static/images/resources/kivy.png
index 693b1834..025d0020 100644
--- a/pydis_site/static/images/resources/kivy.png
+++ b/pydis_site/static/images/resources/kivy.png
diff --git a/pydis_site/static/images/resources_dark/adafruit.png b/pydis_site/static/images/resources_dark/adafruit.png
new file mode 100644
index 00000000..063f06ad
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/adafruit.png
diff --git a/pydis_site/static/images/resources_dark/coreyschafer.png b/pydis_site/static/images/resources_dark/coreyschafer.png
new file mode 100644
index 00000000..12ad14c9
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/coreyschafer.png
diff --git a/pydis_site/static/images/resources_dark/kivy.png b/pydis_site/static/images/resources_dark/kivy.png
new file mode 100644
index 00000000..ec124706
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/kivy.png
diff --git a/pydis_site/static/images/resources_dark/microsoft.png b/pydis_site/static/images/resources_dark/microsoft.png
new file mode 100644
index 00000000..75197bbf
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/microsoft.png
diff --git a/pydis_site/static/images/resources_dark/pallets.png b/pydis_site/static/images/resources_dark/pallets.png
new file mode 100644
index 00000000..e3ef3e05
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/pallets.png
diff --git a/pydis_site/static/images/resources_dark/panda3d.png b/pydis_site/static/images/resources_dark/panda3d.png
new file mode 100644
index 00000000..ed8878e3
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/panda3d.png
diff --git a/pydis_site/static/images/resources_dark/people_postgres_data.png b/pydis_site/static/images/resources_dark/people_postgres_data.png
new file mode 100644
index 00000000..8e207a62
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/people_postgres_data.png
diff --git a/pydis_site/static/images/resources_dark/pyglet.png b/pydis_site/static/images/resources_dark/pyglet.png
new file mode 100644
index 00000000..6e1a38ad
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/pyglet.png
diff --git a/pydis_site/static/images/resources_dark/python.png b/pydis_site/static/images/resources_dark/python.png
new file mode 100644
index 00000000..154cede4
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/python.png
diff --git a/pydis_site/static/images/resources_dark/sentdex.png b/pydis_site/static/images/resources_dark/sentdex.png
new file mode 100644
index 00000000..b264d82c
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/sentdex.png
diff --git a/pydis_site/static/images/sponsors_dark/cloudflare.png b/pydis_site/static/images/sponsors_dark/cloudflare.png
new file mode 100644
index 00000000..dd31a33a
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/cloudflare.png
diff --git a/pydis_site/static/images/sponsors_dark/jetbrains.png b/pydis_site/static/images/sponsors_dark/jetbrains.png
new file mode 100644
index 00000000..00726b33
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/jetbrains.png
diff --git a/pydis_site/static/images/sponsors_dark/linode.png b/pydis_site/static/images/sponsors_dark/linode.png
new file mode 100644
index 00000000..d2b7baa4
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/linode.png
diff --git a/pydis_site/static/images/sponsors_dark/netcup.png b/pydis_site/static/images/sponsors_dark/netcup.png
new file mode 100644
index 00000000..4921b495
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/netcup.png
diff --git a/pydis_site/static/images/sponsors_dark/netlify.png b/pydis_site/static/images/sponsors_dark/netlify.png
new file mode 100644
index 00000000..3738f3fb
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/netlify.png
diff --git a/pydis_site/static/images/sponsors_dark/notion.png b/pydis_site/static/images/sponsors_dark/notion.png
new file mode 100644
index 00000000..f386320e
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/notion.png
diff --git a/pydis_site/static/images/sponsors_dark/sentry.png b/pydis_site/static/images/sponsors_dark/sentry.png
new file mode 100644
index 00000000..029c9e6f
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/sentry.png
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 %}