Chakra UIを使用してダークモードを実装する方法

1. Chakra UIのインストール: まず、Chakra UIをインストールします。以下のコマンドを使用して、プロジェクトのディレクトリでChakra UIをインストールします。

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

2. テーマの設定: Chakra UIでは、テーマを使用してアプリケーションの外観をカスタマイズします。ダークモードを実装するには、テーマの色パレットを設定する必要があります。例えば、次のようにテーマを設定します。

// theme.js
import { extendTheme } from "@chakra-ui/react";
const theme = extendTheme({
  colors: {
    light: {
      bg: "#FFFFFF",
      text: "#000000",
    },
    dark: {
      bg: "#1A202C",
      text: "#FFFFFF",
    },
  },
});
export default theme;

3. ダークモードトグルの作成: 次に、ダークモードを切り替えるためのトグルを作成します。Chakra UIのuseColorModeフックを使用して、ダークモードの状態を管理します。

import { useColorMode, Switch } from "@chakra-ui/react";
function DarkModeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <Switch
      isChecked={colorMode === "dark"}
      onChange={toggleColorMode}
      colorScheme="teal"
    />
  );
}

4. ダークモードスタイルの適用: 最後に、各コンポーネントに対してダークモードスタイルを適用します。Chakra UIでは、スタイルをオーバーライドするためにchakraプロパティを使用します。

import { Box, Heading } from "@chakra-ui/react";
function MyComponent() {
  return (
    <Box bg="light.bg">
      <Heading color="light.text">Hello, World!</Heading>
    </Box>
  );
}

上記の例では、Boxコンポーネントの背景色とHeadingコンポーネントのテキスト色をテーマの色に応じて自動的に切り替えています。

これで、Chakra UIを使用してダークモードを実装する手順が完了しました。必要に応じて、さらにカスタマイズやスタイリングを行うことができます。以上が、この記事の内容です。