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

支持
1

起初，我对在单一主题中定义一种浅色和一种深色配色方案感到满意。但有一些 CSS 我希望仅在深色配色方案启用时进行特定修改。

有没有办法将深色主题设置为一种“子主题”，使其能够继承父主题（浅色主题）的所有样式，同时拥有自己的配色方案，并且仅包含对父主题的覆盖？

或者类似的方法？

2

你能分享一下你具体希望仅针对深色配色方案修改哪些 CSS 吗？理论上，如果只是颜色问题，你可以通过颜色定义来实现。如果涉及更多方面，你就需要使用单独的的主题（并且你将无法使用自动深色模式切换功能）。

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);
  }
}
5

哎呀，谢谢，我已经编辑了我的帖子以更正这一点。

哦，好的，我之前浏览 这篇帖子 时太快了，误以为始终包含回退值是最佳实践。我现在明白了，它仅用于向后兼容，而我不需要这个。感谢澄清。我已经根据这一点编辑了上面帖子中的代码。