Chakra UIでのダークモードの実装方法

Chakra UIのインストール: まず、Chakra UIをインストールします。以下のコマンドを使用して、プロジェクトにChakra UIを追加します。

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

テーマの設定: Chakra UIでは、テーマを使用してアプリケーションのスタイリングをカスタマイズします。まず、テーマファイルを作成しましょう。以下のような内容でtheme.jsというファイルを作成します。

// theme.js
import { extendTheme } from "@chakra-ui/react";
const theme = extendTheme({
  colors: {
    // テーマのカラーパレットを定義
    // 例: darkMode: "#1A202C",
    //     lightMode: "#FFFFFF"
  },
});
export default theme;

ChakraProviderの設定: ダークモードを有効にするには、ChakraProviderを使用します。以下のように、ChakraProviderをルートコンポーネントで設定します。

// App.js
import { ChakraProvider } from "@chakra-ui/react";
import theme from "./theme";
function App() {
  return (
    <ChakraProvider theme={theme}>
      {/* アプリケーションのコンポーネント */}
    </ChakraProvider>
  );
}
export default App;

ダークモードのトグルスイッチの作成: ダークモードのトグルスイッチを作成し、ユーザーがダークモードを切り替えることができるようにします。以下のように、Switchコンポーネントを使用してスイッチを作成します。

// DarkModeSwitch.js
import { useColorMode, Switch } from "@chakra-ui/react";
function DarkModeSwitch() {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <Switch
      isChecked={colorMode === "dark"}
      onChange={toggleColorMode}
    />
  );
}
export default DarkModeSwitch;

ダークモードのスタイリング: テーマファイルで定義したカラーパレットを使用して、各コンポーネントのスタイルを設定します。例えば、以下のようなスタイルを適用することができます。

// ExampleComponent.js
import { Box } from "@chakra-ui/react";
function ExampleComponent() {
  return (
    <Box
      bg="darkMode" // ダークモードの背景色を適用
      color="lightMode" // ダークモードのテキスト色を適用
    >
      {/* コンポーネントの内容 */}
    </Box>
  );
}
export default ExampleComponent;

これらの手順を実行することで、Chakra UIを使用したダークモードの実装が可能です。さまざまなコンポーネントで同様のスタイリングを適用することができます。

以上がChakra UIでのダークモードの実装方法の概要です。詳細なコード例やさらなるカスタマイズについては、Chakra UIの公式ドキュメントを参照してください。