CSSのカラーテーマへのドライアプローチ

最近、Florens Verscheldeは、CSSカスタムプロパティの繰り返し宣言を避けながら、クラスとメディアのクエリでダークモードのスタイルを定義する方法を尋ねました。また、過去にこの問題に遭遇しましたが、適切な解決策は見つかりませんでした。

私たちの目標は、明るいモードとダークモードを切り替えるときに、再定義を避け、したがって繰り返しプロパティを繰り返すことを避けることです。これは、ドライ（繰り返さないでください）プログラミングの目標ですが、スイッチングトピックの典型的なパターンは通常このようなものです。

 <code>:root { --background: #fff; --text-color: #0f1031; /* etc. */ } @media (prefers-color-scheme: dark) { :root { --background: #0f1031; --text-color: #fff; /* etc. */ } }</code>

私が何を意味するのか理解していますか？もちろん、この短い例では重要ではないかもしれませんが、一度に多数のカスタムプロパティを扱うことを想像してください。それは多くの繰り返しです！

それから私は使用するトリックを思い出しました--var: ; 、そして最初は考えていませんでしたが、それを機能させる方法を見つけました： var(--light-value, var(--dark-value))または同様のネストされた組み合わせを使用する代わりに、それらを並べて使用します！

もちろん、私の前でこれを発見した人がいるに違いありませんが、これを達成するためにCSSカスタムプロパティを使用する（むしろ虐待された）ことを聞いたことはありません。これ以上苦労せずに、これはアイデアです：

 <code>--color: var(--light, orchid) var(--dark, rebeccapurple);</code>

--light値がinitialに設定されている場合、フォールバック値（蘭）が使用されます。つまり、 --darkスペース文字（これは有効な値です）に設定する必要があります。最終計算値は次のようになります。

 <code>--color: orchid ; /* 注意额外的空格*/</code>

代わりに、 --light空間に設定され、 --dark initialに設定されている場合、次のように計算された値になります。

 <code>--color: rebeccapurple; /* 同样，注意空格*/</code>

これで問題ありませんが、コンテキストに基づいて--lightおよび--darkカスタムプロパティを定義する必要があります。ユーザーは、システムの設定（明るいまたは暗い）を設定するか、特定のUI要素を使用してWebサイトのテーマを切り替えることができます。 Florensの例と同じように、これらの3つのケースを定義し、いくつかの小さな読みやすさの強化にLeaの「オン」および「オフ」定数を使用して、一目でそれを明確にします。

 <code>:root { /* 感谢Lea Verou！*/ --ON: initial; --OFF: ; } /* 默认情况下，浅色主题处于启用状态*/ .theme-default, .theme-light { --light: var(--ON); --dark: var(--OFF); } /* 默认情况下，暗色主题处于禁用状态*/ .theme-dark { --light: var(--OFF); --dark: var(--ON); } /* 如果用户偏好暗色，那么他们将获得暗色主题*/ @media (prefers-color-scheme: dark) { .theme-default { --light: var(--OFF); --dark: var(--ON); } }</code>

その後、すべてのトピック変数を複製せずに1つの宣言に設定できます。この例では、 theme-*クラスはhtml要素に設定されているため、多くの人がやりたいのと同じように、 :rootとして使用できますが、カスタムプロパティのカスケードプロパティがより理にかなっている場合、それらをbodyに設定することもできます。

 <code>:root { --text: var(--light, black) var(--dark, white); --bg: var(--light, orchid) var(--dark, rebeccapurple); }</code>

それらを使用するために、私たちは注意するのが好きなのでvar()と組み込みのフォールバックを使用します：

 <code>body { color: var(--text, navy); background-color: var(--bg, lightgray); }</code>

うまくいけば、あなたはここで利益を見始めました。多数のカスタムプロパティを定義および切り替えるのではなく、2つのプロパティを処理し、他のすべてのプロパティを1回だけ設定します:rootこれは、私たちが始めた場所からの大幅な改善です。

プリプロセッサを使用して、より乾燥したコードを実装します

次のコードの行をコンテキストから見ると、色は2つではなく単一の値であるため、間違いなく混乱します！

 <code>--text: var(--light, black) var(--dark, white);</code>

だから私は少し抽象的になりたいと思っています。お気に入りのプリプロセッサ（私の場合はSASS）を使用して関数を設定できます。さまざまなコンテキストで上記の--lightおよび--dark値を使用してコードを保持する場合、実際のカスタム属性宣言を変更する必要があります。 CSS構文を返すlight-dark関数を作成しましょう。

 @function light-dark（$ light、$ dark）{
  @return var（ -  light、＃{$ light}）var（ -  dark、＃{$ dark}）;
}

このように使用します。

 ：根 {
    - テキスト：＃{light-dark（black、white）};
   -BG：＃{light-dark（orchid、rebeccapurple）};
   -accent：＃{light-dark（＃6d386b、＃b399cc）};
}

関数呼び出しの周りに補間分離器#{ … }があることに気付くでしょう。これらがなければ、SASSはそのままコードを出力します（通常のCSS関数のように）。さまざまな実装を試すことができますが、構文の複雑さは好みに依存します。

これは、より乾燥したコードベースをどのように探していますか？

複数のトピック？問題ない！

これを3つ以上のモードで行うことができます。追加するトピックが多いほど、管理するのが複雑になりますが、重要なのはこれが可能であることです！オンまたはオフ変数のトピックの別のグループを追加し、値リストに追加変数を設定します。

 <code>.theme-pride { --light: var(--OFF); --dark: var(--OFF); --pride: var(--ON); } :root { --text: var(--light, black) var(--dark, white) var(--pride, #ff8c00) ; /* 换行符是完全有效的*/ /* 其他要声明的变量… */ }</code>

これはスキルですか？はい、絶対に。これは、潜在的で存在しないCSSブール科のための良い例ですか？わかりました、これは夢です。

あなたも？この問題を別の方法で解決しましたか？コメントを共有してください！

以上がCSSのカラーテーマへのドライアプローチの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。