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

開発
4

ああ、ダークカラースキームが選択可能である場合、そのようには機能しません。

最善の方法は、カスタムカラー定義を作成し、ヘッダーアイコンにこのカラー変数を使用することだと思います。

テーマコンポーネントを作成し、Color Definitions タブに以下を追加してください。

Screenshot 2022-10-18 at 20.56.24
Screenshot 2022-10-18 at 20.56.241089×496 39.2 KB

secondary-low のカラーコードを $dark-theme-header-icons に、secondary のカラーコードを $light-theme-header-icons に設定します。

$dark-theme-header-icons: #e9e9e9;
$light-theme-header-icons: #222;

$header-icons: dark-light-choose($light-theme-header-icons, $dark-theme-header-icons);

:root {
  --custom-header-icons: #{$header-icons};
}

その後、この --custom-header-icons カラー変数をヘッダーアイコンの色に使用できます。

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--custom-header-icons);
}