部落格暗黑模式
- 新增 theme.ts
import { extendTheme, type ThemeConfig } from "@chakra-ui/react"; // 2. Add your color mode config const config: ThemeConfig = { initialColorMode: "light", useSystemColorMode: false, }; // 3. extend the theme const theme = extendTheme({ config }); export default theme;
- 新增_document.tsx
import { ColorModeScript } from "@chakra-ui/react"; import theme from "./theme";
render的部分:
export default class Document extends NextDocument { <Html > ... <ColorModeScript initialColorMode={theme.config.initialColorMode} /> <Main /> ... ); } }
- 新增切換按鈕
const { colorMode, toggleColorMode } = useColorMode() ... return ( ... <Button onClick={toggleColorMode}> Toggle {colorMode === 'light' ? 'Dark' : 'Light'} </Button> )