diff --git a/docusaurus.config.js b/docusaurus.config.js
index 0da1e05..1d94c75 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -48,7 +48,7 @@ const config = {
             'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: require.resolve('./src/css/custom.scss'),
         },
       }),
     ],
diff --git a/src/css/custom.css b/src/css/custom.scss
similarity index 97%
rename from src/css/custom.css
rename to src/css/custom.scss
index 0305bee..24cefd7 100644
--- a/src/css/custom.css
+++ b/src/css/custom.scss
@@ -1,3 +1,5 @@
+@use './utils';
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
@@ -16,6 +18,8 @@
   /*--ifm-lighter-value: 30%;*/
   /*--ifm-lightest-value: 50%;*/
 
+  --ifm-background-color: #f8f8fa;
+
   --ifm-color-white: #fff;
   --ifm-color-black: #000;
 
@@ -172,9 +176,15 @@
   --ifm-tabs-padding-vertical: 1rem;
 }
 
+@include utils.responsive('lg', 'down') {
+  :root {
+    --ifm-background-color: #ffffff;
+  }
+}
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-hero-background-color: var(--ifm-color-white);
+  --ifm-hero-background-color: #f8f8fa;
   --ifm-hero-text-color: var(--ifm-color-black);
 }
 
diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx
index 71f51a0..d2eea71 100644
--- a/src/theme/Layout/index.tsx
+++ b/src/theme/Layout/index.tsx
@@ -8,6 +8,7 @@ export default function LayoutWrapper(props) {
 
   return (
     <globalStore.Provider store={store}>
+      <div className="background-underlay" />
       <Layout {...props} />
     </globalStore.Provider>
   )
diff --git a/src/theme/Layout/styles.scss b/src/theme/Layout/styles.scss
index 42fc9b7..31c1d94 100644
--- a/src/theme/Layout/styles.scss
+++ b/src/theme/Layout/styles.scss
@@ -1,5 +1,7 @@
 // TODO: move styles to css/custom.scss file.
 
+@use '@site/src/css/utils';
+
 .hidden-scrollbar {
   /* Chrome, Safari and Opera */
   &::-webkit-scrollbar {
@@ -11,3 +13,18 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
+.background-underlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: calc((7 / 12) * 100%);
+  background-color: var(--ifm-background-surface-color);
+}
+
+@include utils.responsive('lg', 'down') {
+  .background-underlay {
+    display: none;
+  }
+}