# 如何为单个主题调色板更改 CSS 颜色？

**URL:** <https://meta.discourse.org/t/how-to-change-css-color-for-a-single-theme-palette/171867>\
**Category:** Support\
**Created:** [2020年十二月1日 11:27 UTC](https://meta.discourse.org/t/how-to-change-css-color-for-a-single-theme-palette/171867 "2020-12-01T11:27:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)\
**Post date:** [2020年十二月1日 11:27 UTC](https://meta.discourse.org/t/how-to-change-css-color-for-a-single-theme-palette/171867/1 "2020-12-01T11:27:11Z")

</div>

我目前有一个主题，包含两套配色方案（一套浅色，一套深色）。我对深色配色方案有90%的满意度，但在某些情况下仍希望进行调整。

例如，在深色配色方案中，耳语（whispers）的背景色与前景色之间的对比度不足：

```plaintext
.whisper .topic-body .cooked {
    color: var(--primary-medium)
}

```

我知道可以覆盖 CSS，但如果将其改为 `var(--primary-light)`，也会影响浅色配色方案。

是否有办法仅针对单一配色方案进行设置？或者最佳实践是创建两个不同的主题，每个主题包含各自的配色方案？

我对第二种方法的主要顾虑是，这将导致我需要复制大量其他与颜色无关的自定义设置。

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2020年十二月1日 14:58 UTC](https://meta.discourse.org/t/how-to-change-css-color-for-a-single-theme-palette/171867/2 "2020-12-01T14:58:49Z")

</div>

当然，有几个 SCSS 函数可以用来检查当前是浅色还是深色配色方案。

> <https://github.com/discourse/discourse/blob/a4356b99af0a7f4cd746b5d09960ab7635fe91a4/app/assets/stylesheets/common/foundation/variables.scss#L217-L227>

使用方式如下：

```scss
@if is-light-color-scheme() {
  // 浅色配色方案的 CSS
  h1 {
    color: green;
  }
}

@if is-dark-color-scheme() {
  // 深色配色方案的 CSS
  h1 {
    color: red;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)\
**Post date:** [2020年十二月2日 10:00 UTC](https://meta.discourse.org/t/how-to-change-css-color-for-a-single-theme-palette/171867/3 "2020-12-02T10:00:13Z")

</div>

感谢指出这一点，@Johani。看起来 `dark-light-choose($light, $dark)` 函数确实能实现我想要的效果，但我现在的问题是它无法检测到调色板的切换。

我当前唯一启用的主题名为“Nacho”，它包含两个调色板：“Clara”（浅色）和“Oscura”（深色）：

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/b/dbcd321d6b3bdefa90860c2ff3681e37c49e8957.png)

我用以下 CSS 对其进行了自定义：

```plaintext
$dark-theme-ins: #4da06d;
$light-theme-ins: #acf2bd;
.modal.history-modal {
    ins {
        background: dark-light-choose($light-theme-ins, $dark-theme-ins);
    }
}

```

在浅色调色板下它能正常工作：

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/d/ed921d91a3b98239f3c2bf06d24129adba1da268.png)  
 ![image](https://global.discourse-cdn.com/meta/original/3X/a/c/ac320e0732f819b92cb9d7a7655928dd1741b863.png)

但在深色调色板下却不起作用：

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/a/fa279da6e4e13197cab015232b4c4f6d30f47cde.png)  
 ![image](https://global.discourse-cdn.com/meta/original/3X/2/7/27fc331b34cdaee8babf3e98aea124b475aa620e.png)

如果我将 CSS 改为如下形式，它就能正常工作：

```plaintext
.modal.history-modal {
    ins {
        background: $dark-theme-ins;
    }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/e/ae2e2478ed732d22bff7866738d9b6205bc34909.png)

因此看起来切换到深色调色板时并未被正确检测到。我注意到 `is-light-color-scheme` 是根据 `$primary` 和 `$secondary` 的亮度来判断的。以下是我的深色调色板：

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/e/4e444cdb5c0b259845285b883bcb360bc26ae43b.png)

以及浅色调色板：

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/3/33ac2c6845733de325892dc3b22ee22fc01b6a81.png)

我已经想不出其他办法了。

---

<div class="post-metadata">

**Author:** ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)\
**Post date:** [2020年十二月5日 11:33 UTC](https://meta.discourse.org/t/how-to-change-css-color-for-a-single-theme-palette/171867/4 "2020-12-05T11:33:24Z")

</div>

此问题已在此处修复：[Why might dark-light-choose() not work? - #2 by awesomerobot](https://meta.discourse.org/t/why-might-dark-light-choose-not-work/172232/2)