CSS要素をカラースキームに基づいて表示

こんにちは。

いくつかの方法があります。

例えば:

admin/customize/colors/ で配色を変更できます。ダークモードの配色を選択し、secondary のカラーコードを変更するだけです。

注意:これはヘッダーアイコンだけでなく、すべての場所で二次色を変更します。


または、prefers-color-scheme メディアを使用して、ダークモードで secondarysecondary-low に変更することもできます。

このような感じです:

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--secondary);
  @media (prefers-color-scheme: dark) {
    color: var(--secondary-low);
  }
}

または、カスタムカラー定義を作成することもできます:Why might dark-light-choose() not work? - #2 by awesomerobot


お役に立てば幸いです :slightly_smiling_face:

「いいね!」 2