Web Apps テーマの正しい方法.ダークモード、ライトモード、システムなど.
1382 ワード
最近、Web アプリのテーマの作成を実験し、テーマを作成する多くの方法を見つけましたが、オーバーライドのために実行に競合があったため、問題をどのように解決したかを説明します.
テーマの作成方法. テーマ方法間の競合. 競合を解決しています.
テーマを作成するには 3 つの方法があります
1.css 変数の使用: CSS と JavaScript の両方を使用して、親要素で変数を定義し、JavaScript を使用して変数値を変更する関数を呼び出します.前の関数とは逆の関数を呼び出すことで元に戻すことができます.
2.追加クラスの使用: JavaScript と CSS を使用して、親要素を取得し、変更する値を含むクラスを追加します.クラスを削除することにより、別の関数を使用して元に戻すこともできます.
3.メディアクエリの使用: CSSの使用
、mozzila ドキュメントをチェックして詳細を確認できますが、ユーザーのオペレーティング システムのテーマに従って要素のスタイルを更新するだけです.
私は next.js で styled-components を使用することを学んでいたので、両方のメディア クエリ テーマがあり、テーマ プロバイダーを使用してテーマを更新していました.ユーザーが 3 つのテーマから選択できるようにしました.ユーザーのシステムがダーク モードの場合、メディア クエリのテーマがテーマ プロバイダーのテーマと衝突しました.
適用したいスタイルを含む .dark クラスを含む新しい .css ファイルを作成する必要があったため、ダークモードでもライトモードでも、追加したクラスが優先されます
他のテーマ方法、
テーマ メソッドの優先順位を要約すると、次のようになります.
クラスメソッド メディアクエリ方式 テーマ プロバイダーからのテーマ (styled-components を使用)
クライアントの最後のテーマをローカル ストレージなどに保存して、悪い UX を防ぎ、リロードしても一貫したテーマを実現することを忘れないでください.
したがって、次のことを説明します。
テーマの作成方法
テーマを作成するには 3 つの方法があります
1.css 変数の使用: CSS と JavaScript の両方を使用して、親要素で変数を定義し、JavaScript を使用して変数値を変更する関数を呼び出します.前の関数とは逆の関数を呼び出すことで元に戻すことができます.
2.追加クラスの使用: JavaScript と CSS を使用して、親要素を取得し、変更する値を含むクラスを追加します.クラスを削除することにより、別の関数を使用して元に戻すこともできます.
3.メディアクエリの使用: CSSの使用
@media (prefers-color-scheme: dark )
、mozzila ドキュメントをチェックして詳細を確認できますが、ユーザーのオペレーティング システムのテーマに従って要素のスタイルを更新するだけです.
テーマの対立
私は next.js で styled-components を使用することを学んでいたので、両方のメディア クエリ テーマがあり、テーマ プロバイダーを使用してテーマを更新していました.ユーザーが 3 つのテーマから選択できるようにしました.ユーザーのシステムがダーク モードの場合、メディア クエリのテーマがテーマ プロバイダーのテーマと衝突しました.
競合の解決:
適用したいスタイルを含む .dark クラスを含む新しい .css ファイルを作成する必要があったため、ダークモードでもライトモードでも、追加したクラスが優先されます
他のテーマ方法、
テーマ メソッドの優先順位を要約すると、次のようになります.
追加：
クライアントの最後のテーマをローカル ストレージなどに保存して、悪い UX を防ぎ、リロードしても一貫したテーマを実現することを忘れないでください.
Reference
この問題について(Web Apps テーマの正しい方法.ダークモード、ライトモード、システムなど.), 我々は、より多くの情報をここで見つけました https://dev.to/oyegokepraise/the-right-way-for-web-apps-theming-dark-mode-light-mode-system-and-many-more-4mbテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol