fix: use different background color for right sidebar.

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'),
         },
       }),
     ],

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);
 }
 

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>
   )

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;
+  }
+}