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

サポート
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);
  }
}

これで動作します！