Simplify handling of release roadmap image class (#2046)

Due to the fact that a cookie can override the user's system setting for
dark mode, the class on the release roadmap image was being managed by
JavaScript.

However, we can detect all cases in CSS since the `setTheme` JavaScript
function has updated the `data-theme` attribute on the `body` tag in all
cases.

This patch also groups all CSS related to the release roadmap image
together in `_dark-mode.scss`.

Author: adamzap

djangoproject/scss/_dark-mode.scss

@@ -210,10 +210,6 @@ html[data-theme="dark"] {
     --community-img-bg: #{$green-dark};
     --community-img-fg: #{$white};
 
-    .img-release {
-        filter: invert(1);
-    }
-
     .homepage {
         .copy-banner {
             background: var(--white-color);
@@ -261,12 +257,22 @@ html[data-theme="dark"] {
     }
 }
 
-.img-release {
-    &.light {
+html[data-theme="light"] .img-release {
+  filter: invert(0);
+}
+
+@media (prefers-color-scheme: light) {
+    html[data-theme="auto"] .img-release {
         filter: invert(0);
     }
+}
+
+html[data-theme="dark"] .img-release {
+  filter: invert(1);
+}
 
-    &.dark {
+@media (prefers-color-scheme: dark) {
+    html[data-theme="auto"] .img-release {
         filter: invert(1);
     }
 }

djangoproject/static/js/mod/switch-dark-mode.js

@@ -35,15 +35,12 @@ function cycleTheme() {
       setTheme('auto');
     }
   }
-
-  setReleaseImgClass();
 }
 
 function initTheme() {
   // set theme defined in localStorage if there is one, or fallback to auto mode
   const currentTheme = getCookie('theme');
   currentTheme ? setTheme(currentTheme) : setTheme('auto');
-  setReleaseImgClass();
 }
 
 function setupTheme() {
@@ -52,30 +49,6 @@ function setupTheme() {
   for (var i = 0; i < buttons.length; i++) {
     buttons[i].addEventListener('click', cycleTheme);
   }
-  setReleaseImgClass();
-}
-
-function setReleaseImgClass() {
-  // set class for the image about releases to invert color if needed
-  const currentTheme = getCookie('theme') || 'auto';
-  const image = document.getElementsByClassName('img-release')[0];
-
-  if (image && currentTheme == 'auto' && prefersDark) {
-    image.classList.add('dark');
-    image.classList.remove('light');
-  }
-  if (image && currentTheme == 'auto' && !prefersDark) {
-    image.classList.add('light');
-    image.classList.remove('dark');
-  }
-  if (image && currentTheme == 'light') {
-    image.classList.add('light');
-    image.classList.remove('dark');
-  }
-  if (image && currentTheme == 'dark') {
-    image.classList.add('dark');
-    image.classList.remove('light');
-  }
 }
 
 function setCookie(cname, cvalue, domain) {
@@ -118,5 +91,4 @@ window
   .addEventListener('change', function (e) {
     prefersDark = e.matches;
     initTheme();
-    setReleaseImgClass();
   });