Make logos switch based on dark mode

themes/tsc_vfl/assets/css/main.scss

@@ -225,6 +225,21 @@ table {
                 max-width: 100%;
             }
         }
+
+        .logo-light {
+            display: inline;
+        }
+        .logo-dark {
+            display: none;
+        }
+        @media (prefers-color-scheme: dark) {
+            .logo-light {
+                display: none;
+            }
+            .logo-dark {
+                display: inline;
+            }
+        }
     }
 
     > .slider {
@@ -570,7 +585,7 @@ table {
 
         a {
             @include menu-style;
-            
+
             background-color: var(--color-bg-mobile-menu-header);
             color: var(--color-fg-mobile-menu);
         }

themes/tsc_vfl/layouts/partials/page/header.html

@@ -1,10 +1,12 @@
 <div id="header">
     <div class="logo-row">
         <a href="/" class="logo">
-            <img src="{{ ((resources.Get "img/logo_tsc.png").Fit "400x68 webp" | fingerprint).Permalink }}">
+            <img src="{{ ((resources.Get "img/logo_tsc.png").Fit "400x68 webp" | fingerprint).Permalink }}" class="logo-light">
+            <img src="{{ ((resources.Get "img/logo_tsc_dark.png").Fit "400x68 webp" | fingerprint).Permalink }}" class="logo-dark">
         </a>
         <a href="https://www.vfl-sindelfingen.de/" class="logo-vfl">
-            <img src="{{ ((resources.Get "img/logo_hv.png").Fit "100x68 webp" | fingerprint).Permalink }}">
+            <img src="{{ ((resources.Get "img/logo_hv.png").Fit "100x68 webp" | fingerprint).Permalink }}" class="logo-light" alt="VfL Sindelfingen">
+            <img src="{{ ((resources.Get "img/logo_hv_dark.png").Fit "100x68 webp" | fingerprint).Permalink }}" class="logo-dark" alt="VfL Sindelfingen">
         </a>
     </div>
     <div class="slider">