📌소개

강의링크 바로가기

📌배운내용 정리

chakra - ColorMode

chakra 'dark-mode'를 사용하려면 theme 를 설정해야 한다.
왜냐하면 기본값을 dark 모드로 할지 아니면 white 모드로 할지 정해야 하기 때문이다.

// file : my-app\src\theme.ts
import { extendTheme, type ThemeConfig } from "@chakra-ui/react";

const config: ThemeConfig = {
    initialColorMode: "light", // 💖 you can choice 'dark', 'light', 'system' mode.
    useSystemColorMode: false,
};

const theme = extendTheme({ config });

export default theme;

// file : my-app\src\index.tsx
import theme from "./theme"; // 💖

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}> // 💖
      <ColorModeScript initialColorMode={theme.config.initialColorMode} /> // 💖
      <RouterProvider router={router} />
    </ChakraProvider>
  </React.StrictMode>
);

이상 위의 2가지만 적용해도 사실 다크모드로 바로 적용이 된다.
이후에는 컬러모드를 변경(토글) 할 수 있는 기능을 추가해보자.
컬러모드 토글기능은 useColorMode() 와 useColorModeValue() 만 사용할 줄 알면 모두다 아는 것이다.

useColorMode() - Hook

import {
  Box,
  Button,
  HStack,
  IconButton,
  LightMode,
  useColorMode, 
  useColorModeValue,
   } from "@chakra-ui/react";
import { FaAirbnb, FaMoon, FaSun } from "react-icons/fa";
// FaMoon 은 달모양 아이콘 FaSun 은 해모양 아이콘.
const { colorMode, toggleColorMode } = useColorMode();

<IconButton
	onClick={toggleColorMode}
	variant={"ghost"}
	aria-label="Toggle dark mode"
	icon={colorMode === 'light'? <FaMoon /> : <FaSun />} 
	// 💖 이 부분은 useColorModeValue() 를 사용해서 간결하게 개선할 수 있습니다. 
/>

useColorModeValue() - Hook

// useColorModeValue() 는 chakra hook 입니다. 
// useColorModeValue() 는 2개의 arg 를 받는다. 첫번째 arg는 lightmode 일때, 두번째 arg는 darkmode 일때 반환합니다.

const Icon = useColorModeValue(FaMoon, FaSun);
// 위 코드는 lightmode 일때는 FaMoon을 darkmode 일때는 FaSun을 반환하는 코드입니다. 
const logoColor = useColorModeValue("red.500", "red.200");
// 마찬가지로 위 코드는 lightmode 일때는 red.500을 darkmode 일때는 red.200을 반환하는 코드입니다. 

특정 ColorMode 로 강제하는 방법

// 아래와 같이 코드를 구성하면 LightMode darkmode로 변경되어도 아래의 component 는 무조건 LightMode로 강제합니다. 
<LightMode>
  	// 아래 Button 은 무조건 LightMode로 강제합니다. 
	<Button onClick={onSignUpOpen} colorScheme={"red"}>
		Sign up
	</Button>
</LightMode>

📌Grab a Keyword

useColorMode()

useColorModeValue()

📌Grab a Key-Concept

1. useColorModeValue(a, b)

useColorModeValue(a, b) 👉 colorMode 값이 'light'면 retrun a, 'dark'면 retrun b 👍😆😊🦄

2. useColorMode()

const { colorMode, toggleColorMode } = useColorMode()

useColorMode() 는 현재 색상모드의 값(colorMode)와 색상모드 변경기능 토글(toggleColorMode)을 반환합니다.
참조링크 공식문서