Dark Mode

theme.ts

import { extendTheme, type ThemeConfig } from "@chakra-ui/react";

const config: ThemeConfig = {
  initialColorMode: "light",
  useSystemColorMode: false,
};

const theme = extendTheme({ config });

export default theme;

initialColorMode : 처음 접속 시 default로 제공되는 테마 설정
useSystemColorMode : 사용자의 설정을 따를 것인지 설정, initialColorMode를 지정했으니 false로 두었다.

로컬 저장소에 colorMode값이 저장된다.


index.tsx

root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <RouterProvider router={router} />
    </ChakraProvider>
  </React.StrictMode>
);

useColorModeValue

색깔을 테마에 따라 원하는 색상으로 지정하고 싶을 때는 아래와 같이 useColorModeValue 함수를 호출해서 변수를 선언해주면 된다.

• 첫 번째 파라미터: light mode일 때
• 두 번째 파라미터: dark mode일 때

const logoColor = useColorModeValue("red.500", "red.200");
//
<Box color={logoColor}></Box>

컴포넌트에도 적용이 가능하다. 대신 첫 글자는 Uppercase여야만 한다.

import { FaMoon, FaSun } from "react-icons/fa6";
const Icon = useColorModeValue(FaMoon, FaSun);
//
<IconButton icon={<Icon />}/>

테마 상관없이 색상을 고정하고 싶다면

해당 컴포넌트를 <LightMode> 혹은 <DarkMode> 컴포넌트로 감싸주면 된다.

<LightMode>
  <Box color={"red.500"}></Box>
</LightMode>

Theme Toggle

다크모드를 구현하고자 한다면 보통 테마 전환 기능도 만들 것이다.

const { colorMode, toggleColorMode } = useColorMode();
//
<Button onClick={toggleColorMode} />

이것만 있으면 구현이 된다..............................