Improve fixed-width layout

assets/stylesheets/components/_app.scss

@@ -1,3 +1,7 @@
+html._booting { background: $contentBackground; }
+body._max-width { background: none; }
+html._booting body._max-width { background: $documentBackground; }
+
 ._app {
   position: relative;
   z-index: 1;
@@ -12,6 +16,7 @@
   ._max-width & {
     margin: 0 auto;
     max-width: $maxWidth;
+    background: $contentBackground;
     box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;
   }
 }

assets/stylesheets/global/_base.scss

@@ -1,7 +1,7 @@
 html {
   height: 100%;
   font-size: 100%;
-  background: $contentBackground;
+  background: $documentBackground;
 
   @media #{$mediumScreen} { font-size: 93.75%; }
 }
@@ -17,6 +17,7 @@ body {
   color: $textColor;
   word-wrap: break-word;
   overflow-wrap: break-word;
+  background: $contentBackground;
   touch-action: manipulation;
   -webkit-tap-highlight-color: rgba(black, 0);
   -webkit-touch-callout: none;

assets/stylesheets/global/_variables-dark.scss

@@ -10,6 +10,7 @@ $headerHeight: 3rem;
 $sidebarWidth: 20rem;
 $sidebarMediumWidth: 16rem;
 
+$documentBackground: #222;
 $contentBackground: #33373a;
 
 $textColor: #cbd0d0;

assets/stylesheets/global/_variables.scss

@@ -10,6 +10,7 @@ $headerHeight: 3rem;
 $sidebarWidth: 20rem;
 $sidebarMediumWidth: 16rem;
 
+$documentBackground: #f3f3f3;
 $contentBackground: #fff;
 
 $textColor: #333;