继承浅色主题并覆盖部分内容的深色主题版本？

支持
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);
  }
}

它有效！