選択したカラースキームに基づいて要素の色を設定する方法を調べています。以下はライトモードではうまく機能しますが、ダークモードではあまりうまくいきません。
.d-header-icons .d-icon {
width: 100%;
line-height: 1.4;
display: inline-block;
color: var(--secondary);
}
ダークモードのみで以下のようにしたいと考えています。
color: var(--secondary-low)
これはダークモードではうまく機能しますが、ライトモードではうまくいきません。選択したカラースキームに基づいて color: の値を調整する方法はありますか？
こんにちは。
いくつかの方法があります。
例えば：
admin/customize/colors/ で配色を変更できます。ダークモードの配色を選択し、secondary のカラーコードを変更するだけです。
注意：これはヘッダーアイコンだけでなく、すべての場所で二次色を変更します。
または、prefers-color-scheme メディアを使用して、ダークモードで secondary を secondary-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
お役に立てば幸いです 
ご指導ありがとうございます。
これはまさに私がやりたいこと（ヘッダーアイコンのみを変更し、--secondary 色を持つすべての項目を変更しない）のようです。最後の質問ですが…これは、テーマがダークモードテーマとして設定されており、OSによってダークモードが有効になっている場合に機能しますが、ダークモードテーマが「通常」テーマとして選択されている場合には機能しません。何か提案はありますか？
ああ、ダークカラースキームが選択可能である場合、そのようには機能しません。
最善の方法は、カスタムカラー定義を作成し、ヘッダーアイコンにこのカラー変数を使用することだと思います。
テーマコンポーネントを作成し、Color Definitions タブに以下を追加してください。
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);
}
これでうまくいきました！ありがとうございます！
もう一つだけ…テーマコンポーネントを使用せずに、テーマにcolor_definitions.scssを含めた場合、これは機能しますか？
はい、それも機能します。
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.