diff --git a/docs/src/less/index.less b/docs/src/less/index.less
index 3e9fdedfd..d3df929fe 100644
--- a/docs/src/less/index.less
+++ b/docs/src/less/index.less
@@ -1,9 +1,6 @@
 @import '../../../src/less/index.less';
 
-html,
-body {
-  background-color: @grey-lighter;
-}
+@body-background: @grey-lighter;
 
 h1,
 h2 {
@@ -11,7 +8,6 @@ h2 {
 }
 
 .container {
-  background-color: @white;
   box-shadow: @shadow-hard;
 }
 
diff --git a/src/less/grid.less b/src/less/grid.less
index 999c85625..e68ae3285 100644
--- a/src/less/grid.less
+++ b/src/less/grid.less
@@ -48,6 +48,7 @@
 }
 
 .container {
+  background-color: @container-background;
   margin: 0 auto;
 
   @media all and (min-width: @screen-sm) {
diff --git a/src/less/overrides.less b/src/less/overrides.less
index 16c991741..72951a9fa 100644
--- a/src/less/overrides.less
+++ b/src/less/overrides.less
@@ -9,6 +9,7 @@ body {
   font-size: @font-size-base;
   font-family: @font-family-base;
   color: @font-color-base;
+  background-color: @body-background;
 }
 
 h1,
diff --git a/src/less/variables.less b/src/less/variables.less
index 6b8995ae7..f4610e7ab 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -41,6 +41,10 @@
 @grey-lightest: #F8F8F8;
 @white: #FFFFFF;
 
+@body-background: @white;
+
+@container-background: @white;
+
 @table-stripe: @grey-lightest;
 @table-hover: darken(@grey-lightest, 3%);