ChakraUIでダークモードとライトモードの切り替えを実装する

ChakraUIはReactで使われるUIライブラリの1つで、簡単にデザインを整えることができるのが特徴です。今回は、ChakraUIを使ってダークモードとライトモードの切り替えを実装する方法を紹介します。

1. ChakraUIのインストール

まずは、ChakraUIをインストールしましょう。以下のコマンドを実行してください。

npm install @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

2. ChakraProviderの設定

次に、ChakraProviderを使用してアプリ全体にテーマを設定します。ChakraProviderは、アプリ全体にコンポーネントを提供するためのラッパーです。

import { ChakraProvider } from "@chakra-ui/react" function App({ Component, pageProps }) { return ( <ChakraProvider> <Component {...pageProps} /> </ChakraProvider> ) } exportdefault App

3. テーマのカスタマイズ

テーマをカスタマイズするために、ChakraUIのテーマオブジェクトをインポートします。

import { extendTheme } from "@chakra-ui/react" const theme = extendTheme({ colors: {brand: { 50: "#ecefff", // 略 900: "#2a2a3e", }, }, })

この例では、colorsオブジェクトのbrandプロパティに50から900までの色を定義しています。

4. テーマの切り替え

ダークモードとライトモードを切り替えるためには、テーマのカスタマイズで定義した色を変更する必要があります。ここでは、useStateフックを使用して、テーマの色を管理します。

import { useColorMode, IconButton } from "@chakra-ui/react" import { FaMoon, FaSun } from"react-icons/fa" function DarkModeSwitch() { const { colorMode, toggleColorMode } = useColorMode() const isDark = colorMode === "dark" return ( <IconButton icon={isDark ? <FaSun /> : <FaMoon />} aria-label={`Switch to ${isDark ? "light" : "dark"} mode`} onClick={toggleColorMode} /> ) }

DarkModeSwitchコンポーネントでは、useColorModeフックを使用して現在のカラーモードを取得し、トグルボタンを表示しています。トグルボタンをクリックすることで、カラーモードが切り替わります。

5. 完成

これで、ChakraUIでダークモードとライトモードの切り替えを行うことができます。