# 如何根据深色或浅色模式更改 CSS 项？
**URL:** https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631
**Category:** Development
**Created:** [2023年六月16日 14:14 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631 "2023-06-16T14:14:54Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [2023年六月16日 14:14 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/1 "2023-06-16T14:14:54Z")
我搜索时似乎没有找到明确的答案，但我想针对深色和浅色模式分别更改一个 CSS 项目。
在 Discourse 中实现此目的的最佳方法是什么？
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年六月16日 14:21 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/2 "2023-06-16T14:21:26Z")
我怀疑这个话题可能会帮到你。
> [@Use color scheme color if dark scheme, otherwise use my color in theme](https://meta.discourse.org/t/use-color-scheme-color-if-dark-scheme-otherwise-use-my-color-in-theme/191365):
>
> I want to do something like this .some-link { @if var(--scheme-type) == 'dark' { color: var(--primary); } @else { color: #3b5998; } but of course it is not possible because there is no if in CSS and SCSS is not processed at runtime. And as far as I can see Discourse does not add any classes to indicate whether the dark scheme is active, and CSS does not allow custom properties in selectors. Any ideas what could be the best workaround?
---
### Author:  [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [2023年六月16日 15:32 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/3 "2023-06-16T15:32:00Z")
我相信我无法编辑 color\_definitions.css，因为我是一个由 CDCK 托管的企业客户。我想我得联系他们来处理这件事了。
谢谢你，莉莉！
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年六月16日 15:35 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/4 "2023-06-16T15:35:28Z")
~~我认为您可以在另一个主题或组件中使用自己的 CSS 进行覆盖~~ 我不确定这是否可行，所以我今天会尝试一下，看看是否能弄出区分暗/亮模式的 CSS 条件。我觉得这应该是可行的。
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年六月16日 16:06 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/5 "2023-06-16T16:06:21Z")
> [@jordan-violet](#):
>
> 我想更改一个 CSS 项目
您想根据深色/浅色模式更改哪个 CSS 元素？
您可以将颜色定义添加到主题的“编辑 CSS/HTML”的颜色定义选项卡（`color_definitions` 样式表）中。
---
### Author:  [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [2023年六月16日 22:44 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/6 "2023-06-16T22:44:37Z")
抱歉回复晚了！我想更改主题中专家回复帖子顶部突出显示的\*条的颜色，但我想为浅色和深色主题使用不同的颜色来突出显示该条。
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年六月16日 23:03 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/7 "2023-06-16T23:03:06Z")
> [@jordan-violet](#):
>
> blighted bar
不确定您是什么意思？可以提供截图吗？
---
### Author:  [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [2023年六月16日 23:24 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/8 "2023-06-16T23:24:10Z")
**高亮显示** 抱歉，手机输入错误！
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2023年六月18日 18:20 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/10 "2023-06-18T18:20:49Z")
> [@Lilly](#):
>
> 我今天会尝试一下，看看是否能弄出深色/浅色模式的 CSS 条件。我觉得这应该是可能的。
我很想被证明是错的，但我认为 CSS 没有可靠的方法可以进行检查。
@sp-jordan-violet 通常的方法是使用你的深色和浅色配色方案中的颜色变量。你可以使用浏览器检查器查看你当前的数值。我认为你不能添加新的变量，使其根据配色方案进行切换。但是，有很多变量可供选择，你可以在任何自定义声明中使用它们。例如：
```plaintext
.topic-avatar {
height: unset;
align-self: stretch;
background-image: linear-gradient(
to right,
transparent -40%,
var(--secondary) 80%
),
linear-gradient(
to bottom,
var(--tertiary-300) 0%,
var(--highlight) 50%,
var(--quaternary-low) 100%
);
}
```
可以给你一个像这样的帖子高亮：🌈 🙂
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年六月18日 18:31 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/11 "2023-06-18T18:31:43Z")
> [@manuel](#):
>
> 我希望我在这方面被证明是错的，但我认为你无法用 CSS 进行可靠的检查。
是的，我倾向于同意。我也一直在尝试使用 JavaScript / CSS 解决方案，但目前还没有奏效。
---
### Author:  [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [2023年六月18日 18:32 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/12 "2023-06-18T18:32:38Z")
哇，我真的很喜欢这个主意！！
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年六月18日 18:35 UTC](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631/13 "2023-06-18T18:35:52Z")
看起来很酷。做得好 🙂