diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 599dd24a6edd1d732a07542e8426c17ebadaf098..abd84ec339307a5174b560f6fdbc27504e2ae47d 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -31,3 +31,9 @@ body {
 
 @import "./layout.scss";
 @import "./page.scss";
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    background-color: rgba(18, 18, 18, 1);
+  }
+}
diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts
index dd6c17e96f37e321c7f69e7178e5d68d08c34b7e..7c523717eea3b9f07479026e15c213f3ff5b2e12 100644
--- a/src/components/layout/use-custom-theme.ts
+++ b/src/components/layout/use-custom-theme.ts
@@ -67,7 +67,6 @@ export default function useCustomTheme() {
     const scrollColor = mode === "light" ? "#90939980" : "#54545480";
 
     const rootEle = document.documentElement;
-    rootEle.style.background = "transparent";
     rootEle.style.setProperty("--selection-color", selectColor);
     rootEle.style.setProperty("--scroller-color", scrollColor);
     rootEle.style.setProperty("--primary-main", theme.palette.primary.main);