Merge pull request RedHatOfficial#385 from RedHatOfficial/fix/system-pref-dark-mode

fix: system preference in dark mode error

Author: markcaron

static/js/rht-picture.js

@@ -1,20 +1,52 @@
 document.addEventListener('DOMContentLoaded', function() {
-    const body = document.querySelector('body');
+    const body = document.body;
     const pictureEls = document.querySelectorAll('rht-picture');
 
+    let prefersDark = false;
+    const colorScheme = localStorage.getItem('rhdsColorScheme');
+
+    if (!colorScheme || colorScheme === 'light dark') {
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        prefersDark = true;
+        pictureEls.forEach((art) => {
+          art.classList.add('dark');
+        });
+      }
+    }
+
+    if (colorScheme === 'dark') {
+      pictureEls.forEach((art) => {
+        art.classList.add('dark');
+      });
+    } else if (colorScheme === 'light') {
+      pictureEls.forEach((art) => {
+        art.classList.remove('dark');
+      });
+    } 
+
     var observer = new MutationObserver(function(mutations) {
       mutations.forEach(function(mutation) {
-        if (mutation.type === "attributes") {
-          let styleAttr = mutation.target.getAttribute('style');
+        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+          const styleAttr = body.getAttribute('style');
 
-          if (styleAttr.includes('color-scheme: dark')) {
+          if (styleAttr === 'color-scheme: dark;') {
             pictureEls.forEach((art) => {
               art.classList.add('dark');
             });
-          } else {
+          } else if (styleAttr === 'color-scheme: light;') {
             pictureEls.forEach((art) => {
               art.classList.remove('dark');
             });
+          } else {
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+              pictureEls.forEach((art) => {
+                art.classList.add('dark');
+              });
+            } else {
+              pictureEls.forEach((art) => {
+                art.classList.remove('dark');
+              });
+            }
           }
         }
       });

static/styles/main.css

@@ -18,6 +18,7 @@
 @layer base {
   body {
     color: var(--rh-color-text-primary);
+    color-scheme: light dark;
   }
 
   a {
@@ -349,16 +350,6 @@
         display: none;
       }
     }
-
-    @media (prefers-color-scheme: dark) {
-      .img-on-dark {
-        display: inline;
-      }
-
-      .img-on-light {
-        display: none;
-      }
-    }
   }
 
   rht-text-input {