diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 599dd24..abd84ec 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 dd6c17e..7c52371 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);