Enable dark mode in browser UI (#16025)

_scss/_base.scss

@@ -4,6 +4,7 @@ html {
         -ms-text-size-adjust: 100%;
     -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
+    color-scheme: light;
 }
 
 body {

_scss/_night-mode.scss

@@ -1,18 +1,22 @@
-body.night {
-    background-color: $bg-body-night;
-    color:            $body-text-night;
+html.night {
+    color-scheme: dark;
+  
+    body {
+        background-color: $bg-body-night;
+        color: $body-text-night;
 
-    &.landing {
-        background-color: $bg-body-landing-night;
-        .header > .container {
-            background-color: $bg-header-night;
-        }
-        .card, .cardlet {
-            color: inherit;
-            background-color: $bg-card-night;
-        }
-        footer {
-            background-color: $bg-footer-landing-night;
+        &.landing {
+            background-color: $bg-body-landing-night;
+            .header > .container {
+                background-color: $bg-header-night;
+            }
+            .card, .cardlet {
+                color: inherit;
+                background-color: $bg-card-night;
+            }
+            footer {
+                background-color: $bg-footer-landing-night;
+            }
         }
     }
 

_scss/_notes.scss

@@ -53,7 +53,7 @@ The available classes are:
 
 
 blockquote {
-  body.night & {
+  html.night & {
     // DARK THEME
 
     &:not(.important):not(.warning):not(.restricted):not(.experimental) {
@@ -102,7 +102,7 @@ blockquote {
     }
   }
 
-  body:not(.night) & {
+  html:not(.night) & {
     // LIGHT THEME
 
     &:not(.important):not(.warning):not(.restricted):not(.experimental) {

_scss/_upgrade-cta.scss

@@ -1,11 +1,11 @@
 .docker-upgrade-cta {
-  body.night & {
+  html.night & {
     background-color: change-color($orange-10, $alpha: 0.3);
     border: 1px solid $orange-10;
     p, .docker-upgrade-cta__heading { color: $white-0; }
   }
 
-  body:not(.night) & {
+  html:not(.night) & {
     background-color: $orange-10;
     border: 1px solid $orange-20;
     p, .docker-upgrade-cta__heading { color: inherit; }

assets/js/theme-switcher.js

@@ -22,17 +22,17 @@ const darkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme:
 const selectedTheme = window.localStorage ? localStorage.getItem("theme") : null;
 
 if (selectedTheme !== null) {
-    if (selectedTheme === "night") _("body").classList.add("night");
+    if (selectedTheme === "night") _("html").classList.add("night");
 } else if (darkMode) {
-    _("body").classList.add("night");
+    _("html").classList.add("night");
 }
 
 function themeToggler() {
-    const sw = _("#switch-style"), b = _("body");
-    if (sw && b) {
-        sw.checked = b.classList.contains("night")
+    const sw = _("#switch-style"), h = _("html");
+    if (sw && h) {
+        sw.checked = h.classList.contains("night")
         sw.addEventListener("change", function (){
-            b.classList.toggle("night", this.checked)
+            h.classList.toggle("night", this.checked)
             if (window.localStorage) {
                 this.checked ? localStorage.setItem("theme", "night") : localStorage.setItem("theme", "day")
             }