diff --git a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
index 14d3d42eba68..29d7a843d76d 100644
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
@@ -1,5 +1,5 @@
-body.private .showNormal,
-body.normal .showPrivate,
+html.private .showNormal,
+html.normal .showPrivate,
 body[tpEnabled] .showTpDisabled,
 body:not([tpEnabled]) .showTpEnabled {
   display: none !important;
diff --git a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.js b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.js
index ce078d48201f..31ce963470a6 100644
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.js
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.js
@@ -44,8 +44,8 @@ function setFavIcon(url) {
 
 document.addEventListener("DOMContentLoaded", function () {
  if (!PrivateBrowsingUtils.isContentWindowPrivate(window)) {
-   document.body.classList.remove("private");
-   document.body.classList.add("normal");
+   document.documentElement.classList.remove("private");
+   document.documentElement.classList.add("normal");
    document.title = stringBundle.GetStringFromName("title.normal");
    document.getElementById("favicon")
            .setAttribute("href", FAVICON_QUESTION);
diff --git a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
index b9f7200b5d2f..fb5c4ac8eb38 100644
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
@@ -17,7 +17,7 @@
   %aboutPrivateBrowsingDTD;
 ]>
 
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" class="private">
   <head>
     <link id="favicon" rel="icon" type="image/png"/>
     <link rel="stylesheet" href="chrome://browser/content/aboutPrivateBrowsing.css" type="text/css" media="all"/>
@@ -25,7 +25,7 @@
     <script type="application/javascript;version=1.7" src="chrome://browser/content/aboutPrivateBrowsing.js"></script>
   </head>
 
-  <body dir="&locale.dir;" class="private">
+  <body dir="&locale.dir;">
     <p class="showNormal">&aboutPrivateBrowsing.notPrivate;</p>
     <button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
             id="startPrivateBrowsing"
diff --git a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
index e17548c19ef2..78328bca4e6f 100644
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -5,10 +5,6 @@
 @import url("chrome://global/skin/in-content/info-pages.css");
 
 :root {
-  --color-background-light: #fff;
-  --color-background-dark: #303033;
-  --color-background-dark-purple: #1c023c;
-
   --color-grey-lightest: #fbfbfb;
   --color-grey: #b1b1b1;
 
@@ -16,21 +12,21 @@
   --color-blue-dark: #0670cc;
   --color-blue-darker: #005bab;
 
-  --color-darkTheme-purple-text: #beb8cc;
-  --color-darkTheme-purple-text-strong: #ebe3fc;
-
   --icon-margin: 64px;
 }
 
+html {
+  font-size: 1.5em;
+}
+
+html.private {
+  --in-content-page-color: #beb8cc;
+  --in-content-text-color: #beb8cc;
+  --in-content-page-background: #1c023c;
+}
+
 body {
   padding: 40px;
-  background-color: var(--color-background-light);
-  font-size: 1.5em;
-}
-
-body.private {
-  color: var(--color-darkTheme-purple-text);
-  background-color: var(--color-background-dark-purple);
 }
 
 a:link {
@@ -82,7 +78,6 @@ p {
   background-position: left, center;
   font-weight: lighter;
   line-height: 1.5em;
-  color: var(--color-darkTheme-purple-text);
   min-height: 64px;
   -moz-margin-start: 0;
   -moz-padding-start: calc(var(--icon-margin) + 24px);
