こんにちは @Renato_Mendes ![]()
なるほど、単一のカラースキームで透明な背景を使用したいということですね。知りませんでした。
これにはいくつかの方法があります ![]()
dark-light-choose(): これで可能ですが、この場合は実用的ではありません。なぜなら変数が作成されるからです。色の指定にはこちらの方が良いでしょう。
schemeType: スキームタイプ別に使用したい場合は、こちらの方がこのユースケースに適しています。
schemeType の使用
schemeType の使い方はこちらです。
作成したコンポーネントから以前のコードを削除し、画像のように Color Definitions セクションに新しいコードを配置してください。
これにより、ライトスキームでのみコードがアクティブになります。
Common / Color Definitions
@if #{schemeType()} == light {
.desktop-view {
.has-sidebar-page {
.d-header-wrap {
&:before {
background: transparent;
border-right: none;
}
}
}
}
}
- Targetable Color Schemes : より多くのカラースキームがある場合や、変更したい特定のカラースキームをターゲットにしたい場合は、このテーマコンポーネントが最適です。
Targetable Color Schemes の使用
このコンポーネントは、実際のカラースキームを html に配置するため、CSS でターゲットにすることができます。
使い方はこちらです。
コンポーネントをインストールします。
変更したいカラースキームのIDを確認します。
こちらで見つけることができます。
または
/admin/customize/colors
Colors ページ。ここでカラースキームをクリックすると、URL に ID が追加されます。
これでコードで使用できます。以前追加したコードを削除することを忘れないでください。
html[color-scheme="your-color-scheme-id"] {
&.desktop-view {
.has-sidebar-page {
.d-header-wrap {
&:before {
background: transparent;
border-right: none;
}
}
}
}
}
こんにちは @packman
ダイレクトメッセージをお送りしました。


