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 { 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 ( - - - - - + + + ); } 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 ( - - { - setColorMode(mode === "light" ? "dark" : "light"); - setMode(mode === "light" ? "dark" : "light"); - }} - > - {mode === "dark" ? : } - - + + {() => ( + + { + setColorMode(mode === "light" ? "dark" : "light"); + setMode(mode === "light" ? "dark" : "light"); + }} + > + {mode === "dark" ? : } + + + )} + ); }