テーマ完全実装

こんにちは @Renato_Mendes :wave:

なるほど、単一のカラースキームで透明な背景を使用したいということですね。知りませんでした。

これにはいくつかの方法があります :arrow_down_small:

  1. dark-light-choose(): これで可能ですが、この場合は実用的ではありません。なぜなら変数が作成されるからです。色の指定にはこちらの方が良いでしょう。

  1. 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;
        }
      }
    }
  }
}

  1. 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 :wave: ダイレクトメッセージをお送りしました。

「いいね!」 2