<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contents</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

1. 新增 theme.ts
```js
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;
```
2. 新增\_document.tsx
```js
import { ColorModeScript } from "@chakra-ui/react";
import theme from "./theme";
```
render的部分：
```js
export default class Document extends NextDocument {
...
<div>
  <div>
    ...
    );
    }
    }
    ```
    3. 新增切換按鈕
    ```js
    const { colorMode, toggleColorMode } = useColorMode()
    ...
    return (
    ...
    <div>Toggle {colorMode === 'light' ? 'Dark' : 'Light'}</div>)
    ```
    ## ref
    - https://chakra-ui.com/docs/styled-system/color-mode
  </div>
</div>

</body>
</html>



1. 新增 theme.ts

```js
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;
```

2. 新增\_document.tsx

```js
import { ColorModeScript } from "@chakra-ui/react";
import theme from "./theme";
```
render的部分：
```js
export default class Document extends NextDocument {
	<Html >
	...
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
	...
    );
  }
}
```

3. 新增切換按鈕

```js
const { colorMode, toggleColorMode } = useColorMode()
...
return (
...
<Button onClick={toggleColorMode}>
        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
</Button>

)

```

## ref

- https://chakra-ui.com/docs/styled-system/color-mode


部落格暗黑模式

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;


import { ColorModeScript } from "@chakra-ui/react";
import theme from "./theme";


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>

)



https://chakra-ui.com/docs/styled-system/color-mode