From 130bbf0e4dcb53c4cbe6d3d3ae7b625856094aa4 Mon Sep 17 00:00:00 2001
From: spaaaacccee <kaiwen530@gmail.com>
Date: Sun, 19 May 2024 17:46:19 +1000
Subject: [PATCH] Fix very minor layout issues

---
 src/components/theme.ts                   |  2 +-
 src/pages/index.tsx                       |  8 +++----
 src/theme/Navbar/ColorModeToggle/index.js | 27 ++++++++++++++---------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/theme.ts b/src/components/theme.ts
index c6b02f0..7e60b28 100644
--- a/src/components/theme.ts
+++ b/src/components/theme.ts
@@ -174,7 +174,7 @@ export function usePaper(): (e?: number) => SxProps<Theme> {
     borderRadius: 4,
     backdropFilter: "blur(32px)",
     background: ({ palette }) =>
-      `url(img/noise.png), ${alpha(palette.background.paper, 0.8)}`,
+      `url(/img/noise.png), ${alpha(palette.background.paper, 0.8)}`,
     backgroundSize: "32px 32px",
   });
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b9963b5..78401d4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -144,11 +144,9 @@ function Content() {
 function ContentWithTheme() {
   const [mode] = useContext(ModeContext);
   return (
-    <ThemeProvider theme={themes[mode]}>
-      <CssBaseline>
-        <Content />
-      </CssBaseline>
-    </ThemeProvider>
+    <CssBaseline>
+      <Content />
+    </CssBaseline>
   );
 }
 
diff --git a/src/theme/Navbar/ColorModeToggle/index.js b/src/theme/Navbar/ColorModeToggle/index.js
index 48dfb6e..fd5bfc6 100644
--- a/src/theme/Navbar/ColorModeToggle/index.js
+++ b/src/theme/Navbar/ColorModeToggle/index.js
@@ -1,3 +1,4 @@
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import { useColorMode, useThemeConfig } from "@docusaurus/theme-common";
 import { DarkModeOutlined, LightModeOutlined } from "@mui/icons-material";
 import { Box, IconButton } from "@mui/material";
@@ -11,16 +12,20 @@ export default function NavbarColorModeToggle({ className }) {
     return null;
   }
   return (
-    <Box>
-      <IconButton
-        sx={{ color: "text.primary" }}
-        onClick={() => {
-          setColorMode(mode === "light" ? "dark" : "light");
-          setMode(mode === "light" ? "dark" : "light");
-        }}
-      >
-        {mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
-      </IconButton>
-    </Box>
+    <BrowserOnly>
+      {() => (
+        <Box>
+          <IconButton
+            sx={{ color: "text.primary" }}
+            onClick={() => {
+              setColorMode(mode === "light" ? "dark" : "light");
+              setMode(mode === "light" ? "dark" : "light");
+            }}
+          >
+            {mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
+          </IconButton>
+        </Box>
+      )}
+    </BrowserOnly>
   );
 }