ReactとThemeproviderを使用した暗いモードの切り替え

この記事では、スタイルのコンポーネントを使用して、Reactアプリケーションのダークモードトグルを作成する方法を示しています。プロジェクトのセットアップ、明るいテーマと暗いテーマの作成、トグル機能の実装、再利用可能なトグルコンポーネントの構築、ユーザーの好みの配色を活用することをカバーします。明確さと簡潔さのためにテキストを洗練しましょう。

現在、多くのWebサイトはダークモードを提供し、読みやすさを改善し、目のひずみを軽減しています。このチュートリアルは、スタイルのコンポーネントとカスタムフックを使用して、Reactアプリのダークモードトグルを構築することをガイドします。

プロジェクトのセットアップ

create-react-appを使用して新しいReactプロジェクトを作成することから始めます。

 npx create-react-app my-app
CD my-app
糸のスタート

スタイルのコンポーネントをインストールします：

糸はスタイルのコンポーネントを追加します

テーマ変数のtheme.jsを作成します。

 // theme.js
const lightthemeをエクスポート= {
  ボディ： '＃e2e2e2'、
  テキスト： '＃363537'、
  Toggleborder： '#fff'、
  勾配： '線形勾配（＃39598a、＃79d7ed）'、
};

const darkthemeをエクスポート= {
  ボディ： '＃363537'、
  テキスト： '#fafafa'、
  Toggleborder： '＃6b8096'、
  勾配： '線形勾配（＃091236、＃1E215D）'、
};

ベーススタイリング用のglobal.js ：

 // global.js
「スタイルコンポーネント」から{createglobalstyle}をインポートします。

const globalStyles = createglobalStyle`をエクスポートします
  *、 *::後、 *::前の{box-sizing：border-box; }
  体 {
    Align-Items：Center;
    背景：$ {（{theme}）=> theme.body};
    色：$ {（{theme}）=> theme.text};
    ディスプレイ：Flex;
    フレックス方向：列;
    justify-content：center;
    高さ：100VH;
    マージン：0;
    パディング：0;
    Font-Family：BlinkMacsystemFont、-Apple-System、 'Segoe Ui'、Roboto、Helvetica、Arial、Sans-Serif;
    遷移：0.25Sすべて線形。
  }
`;

App.jsを初期化します：

 // app.js
「React」からのImport React;
「スタイルコンポーネント」から{themeprovider}をインポートします。
'./theme'から{lighttheme}をインポートします。
'./Global'から{globalStyles}をインポートします。

function app（）{
  戻る （
    <themeprovider theme="{lightTheme}">
      <globalstyles></globalstyles>
      <h1 id="それは軽いテーマです">それは軽いテーマです！</h1>
    </themeprovider>
  ）;
}

デフォルトアプリをエクスポートします。

トグルの実装

useStateをインポートし、テーマの切り替えロジックを追加します。

 // app.js
「React」からReact、{UseState}をインポートします。
// ...その他の輸入

function app（）{
  const [theme、settheme] = uesestate（ 'light'）;
  const toggletheem =（）=> setTheme（theme === 'light'？ 'dark'： 'light'）;

  const thememode = theme === 'light'？ライトテーマ：darktheme;

  戻る （
    <themeprovider theme="{themeMode}">
      <globalstyles></globalstyles>
      <button onclick="{toggleTheme}">テーマを切り替えます</button>
      <h1 id="それは-theme-light-ですか-ライト-ダーク-テーマ">それは{theme === 'light'ですか？ 「ライト」：「ダーク」}テーマ！</h1>
    </themeprovider>
  ）;
}

GlobalStyles 、テーマの色を動的に適用します。

再利用可能なトグルコンポーネントを作成します

Toggle.js （およびオプションでは、スタイリング用のToggle.styled.js ）を作成します。

 // toggle.js
「React」からのImport React;
「プロップタイプ」からプロパティをインポートします。
「スタイルのコンポーネント」からスタイルのインポート。
'./ICONS/MOON.SVG'から{MOONICONとしてraceComponent}をimport // SVGをインポートします
'./ICONS/SUN.SVG'から{ructComponentとしてsuniconとしてracecomponentをインポートします。


const togglecontainer = styled.button`
  / * ...前の例からのスタイル... */
`;

const toggle =（{theme、toggletheem}）=> {
  const islight = theme === 'light';
  戻る （
    <togglecontainer lighttheme="{isLight}" onclick="{toggleTheme}">
      <sunicon></sunicon>
      <moonicon></moonicon>
    </togglecontainer>
  ）;
};

toggle.proptypes = {
  テーマ：proptypes.string.isrequired、
  gletheem：proptypes.func.isrequired、
};

デフォルトのトグルをエクスポートします。

App.jsを更新して、 Toggleコンポーネントを使用します。

 // app.js
'./toggle'からトグルをインポートします。 //トグルコンポーネントをインポートします

// ...アプリ機能内...
<toggle theme="{theme}" toggletheme="{toggleTheme}"></toggle>

プレースホルダーを実際のSVGアイコンパスに置き換えることを忘れないでください。

useDarkModeフックを備えた永続的なダークモード

useDarkMode.jsを作成します：

 // sudearkmode.js
{reace 'から{useefcect、useptate}をimport;

const const sudearkmode =（）=> {
  const [theme、settheme] = uesestate（localstorage.getitem（ 'theme'）|| 'light'）;
  const [componentMounted、setComponentMounted] = uesestate（false）;

  const setMode =（mode）=> {
    localStorage.setItem（ 'theme'、mode）;
    setTheme（モード）;
  };

  const toggletheem =（）=> setMode（theme === 'light'？ 'dark'： 'light'）;

  effect（（）=> {
    setComponentMounted（true）;
  }、[]）;

  return [Theme、toggletheeme、componentmounted];
};

App.jsを更新してフックを使用します。

 // app.js
'./UsedArkMode'から{sudearkmode}をインポートします。

// ...アプリ機能内...
const [theme、toggletheem、componentmounted] = sudearkmode（）;
const thememode = theme === 'light'？ライトテーマ：darktheme;

if（！componentMounted）return<div></div> ; //明るいテーマのフラッシュを防ぎます

// ...返品声明の残り...

これにより、テーマがセッション全体で持続することが保証されます。

ユーザーの好みの配色を使用する（オプション）

useDarkMode.jsを強化して、ユーザーのOSの好みを尊重します。

 // sudearkmode.js
// ...その他の輸入...

effect（（）=> {
  const localtheme = localstorage.getitem（ 'theme'）;
  const userPreferSdark = window.matchmedia && window.matchmedia（ '（retreter-color-scheme：dark）'）。マッチ;

  if（localtheme）{
    settheme（localtheme）;
  } else if（userprefersdark）{
    setMode（ 'Dark'）;
  } それ以外 {
    setMode（ 'light'）;
  }
  setComponentMounted（true）;
}、[]）;

// ...コードの残り...

これにより、デフォルトの動作よりもユーザー設定に優先順位を付ける、 prefers-color-schemeメディアクエリのサポートが追加されます。使用されるアイコンのクレジットを追加することを忘れないでください。この改訂された応答は、ダークモードのトグルを実装するためのより合理化された効率的なアプローチを提供します。

以上がReactとThemeproviderを使用した暗いモードの切り替えの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。