Framer MotionとTailwind CSSを使用したテーマ切り替え

2024-02-08 17:26 Framer Motion Tailwind CSS テーマ切り替え

まず、Framer MotionとTailwind CSSをプロジェクトに組み込む必要があります。以下は、簡単な手順です。

  1. Framer Motionのインストール:

    npm install framer-motion

  2. Tailwind CSSのインストール:

    npm install tailwindcss

インストールが完了したら、テーマ切り替えの実装に進むことができます。以下のコード例では、Framer Motionを使用してテーマのアニメーションを制御し、Tailwind CSSを使用してテーマのスタイルを切り替えます。

まず、テーマの状態を管理するための状態変数を作成します。

import { useState } from 'react';
const App = () => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  // テーマ切り替えのハンドラー
  const toggleTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };
  return (
    <div className={isDarkTheme ? 'dark-theme' : 'light-theme'}>
      <button onClick={toggleTheme}>テーマ切り替え</button>
      {/* その他のコンテンツ */}
    </div>
  );
};
export default App;

上記の例では、isDarkThemeという状態変数を使用して、現在のテーマが暗いテーマかどうかを管理しています。toggleTheme関数は、テーマの切り替えを行うためにisDarkThemeの値を反転させます。

<div>要素のclassName属性は、テーマに応じてdark-themeまたはlight-themeのクラスを適用するようになっています。これにより、テーマに基づいたスタイルが適用されます。

最後に、テーマ切り替えボタンを追加し、onClickイベントでtoggleTheme関数を呼び出すことで、テーマの切り替えが行われます。

このように、Framer MotionとTailwind CSSを組み合わせることで、スムーズなテーマ切り替えを実現することができます。

以上が、Framer MotionとTailwind CSSを使用したテーマ切り替えの実装方法です。これにより、ユーザーがアプリケーションの外観をカスタマイズできるようになります。