ライトテーマを継承しつつ一部を上書きするダークテーマ版？

サポート
1

最初は、単一のテーマ内で定義された 1 つの明るい配色と 1 つの暗い配色で満足していました。しかし、暗い配色が適用されている場合にのみ、特定の CSS を変更したいと考えています。

暗いテーマを、親テーマ（明るいテーマ）のすべてのスタイルを継承しつつ、独自の配色を持ち、親テーマへのオーバーライドのみで構成される「子テーマ」のようなものとして設定することは可能でしょうか？

あるいは、それに近い方法はありますか？

「いいね！」 1
2

ダークカラーテーマにのみ適用したい具体的なCSSについて共有していただけますか？理論的には、色が関わるだけなら、色の定義を使用して対応可能です。それ以上の内容であれば、別々のテーマを用意する必要があります（その場合、自動でのダークモード切り替えはできなくなります）。

「いいね！」 2
3

投稿を編集して、読者を退屈させるプロセスではなく、私が一度に学んだことを反映させます:

明モードと暗モードで変更したい CSS の例:

明モード:

.nav-pills>li>a:hover {
  &:not(.active) {
    color: var(--primary-high, $primary-high);
  }
}

暗モード:

.nav-pills>li>a:hover {
  background-color: $quaternary-low-dmode;
}

@pmusaraj の投稿 こちら を参照し、いくつかの試行錯誤の末、以下を行いました:

common/color_definitions.scss で、.nav-pills の背景色とフォント色を表す変数を定義します。私の暗モードではフォント色を指定しておらず、明モードでは背景色を指定していませんが、dark-light-choose() を機能させるために 何か を指定する必要がありました。そのため、Discourse コアの変数（それぞれ $primary と $quaternary-low）を使用しました:

$quaternary-low-dmode: #405E68;

$nav-pills: dark-light-choose($quaternary, $primary);
$nav-pills-bg: dark-light-choose($quaternary-low, $quaternary-low-dmode);

:root {
  --custom-nav-pills: #{$nav-pills};
  --custom-nav-pills-bg: #{$nav-pills-bg};
}

次に、common.scss 内の関連コード:


// 明モードと暗モードの両方に汎用する SCSS:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}

これで動作します！

4

これは common/color_definitions.scss であるべきです。

また、common.css ではフォールバック値が初期値と同じなので、以下のように簡略化できます：

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}
「いいね！」 2
5

おっと、ありがとう。投稿を編集して修正しました。

ああ、わかりました。私は この投稿 を読み飛ばしてしまい、常にフォールバックを含めるのがベストプラクティスだと誤解していました。それは後方互換性のためのものだけだと気づきました。私の場合は不要です。その明確化をありがとうございます。上記の投稿内のコードを編集して、それを反映させました。

「いいね！」 1
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.