反応虹のコンポーネントを使用してアプリケーションに“daynight”テーマを追加.

あなたが読むよりむしろ見たい方がよいならば:
https://youtu.be/Dy0g3nLrFHE

なぜ昼夜のテーマが必要ですか？

daynight機能を使用すると、簡単に暗闇の間を切り替えるには、アプリケーションができます⬛ アンドライト⬜ テーマ.これは、あなたのユーザーのための多くの利点を持って、削減視力と人々のための使いやすさを増やす.
読みやすさのために必要な最小の色コントラスト比を維持している間、暗いテーマは装置スクリーンによって発される光を減らします.利点は、目の歪みを減らすことによって視覚人間工学を強化し、現在の光の状態に応じて調整する画面を容易にし、夜間の使用の快適さを提供したり、暗い環境で.
この記事を通して、あなたのアプリケーションで“daynight”テーマをreact-rainbow-componentsを使用して実装する方法を示します.これを達成するために、あなたは反応、ノードの一般的な背景を持たなければなりません.JSと糸.

プロジェクト設定

何が必要か

ノード.JS

糸

お気に入りのIDE (このチュートリアルでは、vscodeを使用します)

依存性の追加

このプロジェクトのために、私は新しいcreate-react-app projectを使います.プロジェクトの初期化と初期化方法を知りたい場合は、https://create-react-app.dev/
アプリのスタイルのために、私はstyled-componentsを使用します.閉じるこの動画はお気に入りから削除されています.プロジェクトのルートで、スタイルコンポーネントをインストールしましょう.詳細については、https://styled-components.com/を参照してください

$ yarn add [email protected]

次に、レインボーのコンポーネントをインストールしましょう.詳細はhttps://react-rainbow.io/#/GettingStartedを参照してください.

$ yarn add react-rainbow-components

すべての依存関係をインストールして新しいプロジェクトを作成したら、コードを準備する必要があります!

コーディング

骨格

さて、アプリケーションのマークアップを開始します.これは、左側にサイドバー、上部にタイルのグループ、およびデータのリストを1つのページで構成されます.

import { Sidebar, SidebarItem, Card, Table, Column } from 'react-rainbow-components';
function App() {
    return (
            <main>
                <Sidebar>
                    <SidebarItem label="Apps" />
                    <SidebarItem label="Chat" />
                    <SidebarItem label="Settings" />
                </Sidebar>
                <section>
                    <header>
                        <h1>Title</h1>
                    </header>
                    <section>
                        <Card />
                        <Card />
                        <Card />
                        <Card />
                    </section>
                    <Table
                        keyField="id"
                        data={data}
                        variant="listview"
                    >
                        <Column header="Name" field="name" />
                        <Column header="Id"  field="id" />
                        <Column header="Phone" field="phone"/>
                        <Column header="Status"  field="status" />
                    </Table>
                 </section>
             </main>
    );
}

アプリケーションコンポーネント

これで、アプリケーションの既定のスタイルをカスタマイズできます.我々はreact-rainbow-componentsを使用しているので、我々は、アプリ全体をラップする必要がありますApplicationコンポーネントのテーマの小道具を介して、このカスタマイズを行います.
プロパティthemeは、色のパレットを指定できるオブジェクトを受け入れます.テーマオブジェクトでカスタマイズできるすべてのプロパティを見たい場合は、https://react-rainbow.io/#/Customizationを見てください.

function App() {
    return (
        <Application theme={themes.light}>
          ...
        </Application>

テーマオブジェクトを作成します

const themes = {
    light: {
        rainbow: {
            palette: {
                brand: '#4dc9cb',
                success: '#98D38C',
                warning: '#F7DB62',
                error: '#f2707a',
            },
        },
    },
};

どのようにスタイルあなたのタグ？

カスタムのコンポーネントやタグを使用してテーマを使用するには、通常のスタイルのコンポーネントを使用すると、他のプロジェクトで行うように、ボックスのうち、すべてのカスタム色でテーマオブジェクトを持つ必要があります.

import styled from 'styled-components';
export const Container = styled.main`
    background: ${props => props.theme.rainbow.palette.background.secondary};
    height: 100vh;
`;

ページは次のようになります.

夜のテーマ

ここで、暗い色をthemesオブジェクトに追加します.

const themes = {
    light: {
        rainbow: {
            palette: {
                brand: '#4dc9cb',
                success: '#98D38C',
                warning: '#F7DB62',
                error: '#f2707a',
            },
        },
    },
    dark: {
        rainbow: {
            palette: {
                mainBackground: '#212121',
                brand: '#4dc9cb',
                success: '#98D38C',
                warning: '#F7DB62',
                error: '#f2707a',
            },
         },
    },
};

昼夜スイッチボタン

次に、我々は、アプリケーションのテーマを変更することができますので、昼のスイッチボタン機能を実装します.ブラウザのタブを閉じたり、リフレッシュしても、選択したテーマを維持するためにローカルストレージを使用します.

uselocalthemeフックを実装する

const useLocalTheme = () => {
    const [state, setState] = useState(() => localStorage.getItem('theme') || 'light');
    const setItem = (value) => {
        localStorage.setItem('theme', value);
        setState(value);
    }
    return [state, setItem]
}

このフックで、我々はローカル記憶装置と対話するためにロジックをカプセル化して、また、暗い/ライトテーマを反応させるためにUSENTを使用しました.それは2つの要素を持つ配列を返します.最初は、選択されたテーマを示す文字列を持つ状態です.ローカルのストレージに格納された値で初期化されます.値が見つからなかったならば、それは光に戻ります.番目の要素は、ローカルストレージに新しいテーマを格納するために使用される機能であり、また、アプリケーションをテーマ変更に反応させる状態を更新します.

スイッチの実装

ここでUSelocalThemeを使用し、OnClickハンドラをDaynightボタンに追加します.

function App() {
    const [theme, setTheme] = useLocalTheme();
    const switchIcon = theme === 'light' ? <MoonIcon /> : <SunIcon />;
    const toggleTheme = () => {
        if (theme === 'light') {
            setTheme('dark');
        } else {
            setTheme('light');
        }
    };
    return (
        <Application theme={themes[theme]}>
            ...
            <ButtonIcon
                shaded
                variant="border-filled"
                icon={switchIcon}
                size="large"
                onClick={toggleTheme} />
            ...

ここでは、テーマの状態に基づいて月または太陽をレンダリングするアイコンを追加しました.また、私たちはTougleThemeと呼ばれるOnClickハンドラを実装しました.そして、それはUSELocalThemeフックによって返された機能を使用してテーマスイッチを作ります.
テーマが暗いとき、ページはこのようになります

このサンドボックスでコード全体を再生できます.
https://codesandbox.io/s/sparkling-wave-rqzr7?file=/src/index.js

結論

あなたが見ることができるように、これらの簡単な実装では、あなたのアプリケーションにdaynightのテーマを持つことができます.
読書ありがとう!