diff --git a/_scss/_base.scss b/_scss/_base.scss
index 9f48c7cd47..25993498bd 100755
--- a/_scss/_base.scss
+++ b/_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 {
diff --git a/_scss/_night-mode.scss b/_scss/_night-mode.scss
index 3a26635d62..771b4b7749 100755
--- a/_scss/_night-mode.scss
+++ b/_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;
+            }
         }
     }
 
diff --git a/_scss/_notes.scss b/_scss/_notes.scss
index 3941fc0fab..0c27383280 100644
--- a/_scss/_notes.scss
+++ b/_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) {
diff --git a/_scss/_upgrade-cta.scss b/_scss/_upgrade-cta.scss
index e97e8e314b..bb07d6d448 100644
--- a/_scss/_upgrade-cta.scss
+++ b/_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; }
diff --git a/assets/js/theme-switcher.js b/assets/js/theme-switcher.js
index 1d2f0cdf01..e6a8740e6d 100644
--- a/assets/js/theme-switcher.js
+++ b/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")
             }