diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 2fdcc9e..f855edc 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -16,6 +16,7 @@ body {
   --text-primary: #637381;
   --selection-color: #f5f5f5;
   --scroller-color: #90939980;
+  --background-color: #ffffff;
 }
 
 ::selection {
diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts
index e029494..65bf1de 100644
--- a/src/components/layout/use-custom-theme.ts
+++ b/src/components/layout/use-custom-theme.ts
@@ -84,10 +84,12 @@ export const useCustomTheme = () => {
     }
 
     // css
+    const backgroundColor = mode === "light" ? "#ffffff" : "#121212";
     const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
     const scrollColor = mode === "light" ? "#90939980" : "#54545480";
 
     const rootEle = document.documentElement;
+    rootEle.style.setProperty("--background-color", backgroundColor);
     rootEle.style.setProperty("--selection-color", selectColor);
     rootEle.style.setProperty("--scroller-color", scrollColor);
     rootEle.style.setProperty("--primary-main", theme.palette.primary.main);