diff --git a/pages/_app.tsx b/pages/_app.tsx
index a68afbb0fa..9de26a6c1c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -62,7 +62,10 @@ const MyApp = ({ Component, pageProps }: MyAppProps) => {
             data-color-mode={session?.themeCss?.colorMode || 'auto'}
             data-dark-theme={session?.themeCss?.nightTheme || 'dark'}
             data-light-theme={session?.themeCss?.dayTheme || 'light'}
-            hidden={isLoadingSession}
+            style={
+              /* render a mostly gray background until we know the color mode via XHR */
+              { opacity: isLoadingSession ? 0.1 : 1 }
+            }
           >
             <Component {...pageProps} />
           </div>
diff --git a/stylesheets/index.scss b/stylesheets/index.scss
index 9de2628aaa..a4f3e1b7b7 100644
--- a/stylesheets/index.scss
+++ b/stylesheets/index.scss
@@ -14,7 +14,8 @@
 @import "syntax-highlighting.scss";
 @import "utilities.scss";
 
-// render a gray background until we know the color mode via XHR
-html {
+// render a mostly gray background until we know the color mode via XHR
+html,
+body {
   background: #6e7781;
 }