いいえ、暗いモードでは、反応＆スタイルのコンポーネントとトグルモード!🌞↔️🌖

暗いモードは最近かなり標準的であることに気づいたか.
まあ、それはそれが悪いからです!
スタイルのコンポーネントを使用して、素晴らしいのこの新しい標準を達成しよう!
それは超簡単に実装するので、それをまっすぐにしよう!💯

資源

👉 Demo

👉 Repo

私があなたに知っていると思っている若干のもの

開発環境

反応の基礎

基本的なS

フレッシュ反応プロジェクト
必要に応じてファイル構造をクリーンアップしましょう.私はこのプロジェクトのすべての不要なファイルを削除しました.除去App.css すべてのテスト関連ファイル.必ず必要なコード行を削除してくださいindex.js . 私も、間のボイラー板をきれいにしましたheader タグ.

スタイルコンポーネントのインストールとインポート
新鮮なプロジェクトでは、今すぐインストールし、スタイルのコンポーネントをインポートしましょう.

yarn add styled-components or

npm install --save styled-components

次のようにスタイル付きコンポーネントをインポートしましょう.

import styled from 'styled-components'`

3 .スタイルの付いたコンポーネントで簡単なランディングページを作成しましょう
我々の中でApp() 帰りましょうPage , Container , Heading , H1 , P , Toggle , and ThemeImage それぞれコンポーネントを返します.そうでしょう


4 .レイアウトを持っているので、それぞれのコンポーネントを作りましょうPage and Container Heading and H1 P and Toggle ThemeImage はトグル状態イメージを含むコンポーネントです


トグルコンポーネントの状態を作りましょう
光と暗モードを切り替えるには、状態を保持する必要があります.まずはUSENTフックを輸入しましょう.import {useState} from 'react' . 次に、あなたのApp() 以下のようなコンポーネント:

const [isDarkMode, setDarkMode] = useState(false);

次に、我々のボタンのために光と暗いモードの間でトグルするロジックを加えましょうToggle コンポーネント.

const handleToggle = () => {
   setDarkMode(!isDarkMode);
   // console.log(isDarkMode);
}

この機能は、現在の状態が何であるかの反対を切り替えることです.言い換えれば、現在の状態ならtrue , それを切り替えるになるfalse . If false it becomes true .

6 .アップデートToggle コンポーネント
今、私たちの光を切り替えることができる機能を持っている-暗い状態は、私たちの更新しましょうToggle 以下のようなコンポーネント:

<Toggle onClick={handleToggle}></Toggle>

7 .アクティブなテーマを表示する画像をインポートする
我々がユーザーに現在の、そして、次のテーマを示したいならば、我々は月と太陽イメージの使用で視覚的にそうすることができます.次のようにコードの先頭にイメージをインポートしましょう.
イメージは、レポで利用できます

import Moon from './images/moon.png';
import Sun from './images/sun.png';

では、更新しましょうThemeImage 以下のようなコンポーネント:

<Toggle onClick={handleToggle}>
   <ThemeImage src={ !isDarkMode ? `${Sun}` : `${Moon}` } />
</Toggle>

更新しましたThemeImage コンポーネントsrc属性はimg . また、テンプレートリテラルを利用しながら、単純な三元演算子を使用して条件を設定します.
擬似コードについて説明します.閉じるこの動画はお気に入りから削除されていますif stateIsNotDarkMode ? render Moon : else render Sun.
コンポーネントのスタイルプロパティを更新しましょう
我々はほとんど完了です!更新しましょうbackground and color いくつかのコンポーネントのプロパティ
まず、変更しましょうPage コンポーネントの背景色

background: ${props => props.light ? "#eee" : "#333"};

第二に、変更しましょうH1 コンポーネントの色

color: ${props => !props.light ? "papayawhip" : "#000"};

最後に、変更しましょうP コンポーネントの色

color: ${props => !props.light ? "#eee" : "#333"};

ここでは、我々は我々の我々のコンポーネントに渡す支柱に基づいて、我々の背景または色特性を条件づけています.、light prop、この色をレンダリングします.

9 .私たちのデフォルトのテーマをlight 支柱
我々が今しなければならないすべてはデフォルトでレイアウトの我々の構成要素を更新することですlight プロップ以下のように:

  return (
    <Page light={!isDarkMode ? true : false}>
      <Container>
        <Heading>
          <H1 light={!isDarkMode ? true : false}>Dynamic Styling with Styled-Components</H1>
          <P light={!isDarkMode ? true : false}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta error natus at vitae sint qui sapiente impedit rerum commodi fugit ullam repudiandae itaque, saepe fuga facere temporibus excepturi dolore officia?</P>
          <Toggle light={!isDarkMode ? true : false}  onClick={handleToggle}>
            <ThemeImage src={ !isDarkMode ? `${Moon}` : `${Sun}` } />
          </Toggle>
        </Heading>
      </Container>
    </Page>
  );
}

ここで私はまた、条件付けレンダリングlight プロップはいずれかの真実、またはfalse、我々の状態に応じて.

結論!👏
おめでとう!それは反応＆スタイルのコンポーネントを持つ大騒ぎダークモードトグルのラップです!うまくいけば、すべてがうまくいけば、あなたは9つの簡単な手順で、プロジェクトにBadassダークモードを実装することができた!
ご質問、懸念についての上で私を殴ることを躊躇しないでくださいまたはあなただけの挨拶をしたい場合は!

あなたは初心者ウェブ開発者ですか?

How to stay focused 🔍 as a self taught Frontend Web Developer 💻

Chris Hansen ・ Jul 29 ・ 7 min read

#beginners #webdev #productivity #devjournal

How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Chris Hansen ・ Aug 3 ・ 10 min read

#webdev #tutorial #javascript #react

Easiest Way To Add Icons To Your React Apps 😎

Chris Hansen ・ Aug 10 ・ 2 min read

#webdev #tutorial #javascript #react