如何根据深色或浅色模式更改 CSS 项？

开发
1

我搜索时似乎没有找到明确的答案，但我想针对深色和浅色模式分别更改一个 CSS 项目。

在 Discourse 中实现此目的的最佳方法是什么？

1 个赞
2

我怀疑这个话题可能会帮到你。

3

我相信我无法编辑 color_definitions.css，因为我是一个由 CDCK 托管的企业客户。我想我得联系他们来处理这件事了。

谢谢你，莉莉！

2 个赞
4

我认为您可以在另一个主题或组件中使用自己的 CSS 进行覆盖 我不确定这是否可行，所以我今天会尝试一下，看看是否能弄出区分暗/亮模式的 CSS 条件。我觉得这应该是可行的。

1 个赞
5

您想根据深色/浅色模式更改哪个 CSS 元素？

您可以将颜色定义添加到主题的“编辑 CSS/HTML”的颜色定义选项卡（color_definitions 样式表）中。

6

抱歉回复晚了！我想更改主题中专家回复帖子顶部突出显示的*条的颜色，但我想为浅色和深色主题使用不同的颜色来突出显示该条。

1 个赞
7

不确定您是什么意思？可以提供截图吗？

8

高亮显示 抱歉，手机输入错误！

1 个赞
10

我很想被证明是错的，但我认为 CSS 没有可靠的方法可以进行检查。

@sp-jordan-violet 通常的方法是使用你的深色和浅色配色方案中的颜色变量。你可以使用浏览器检查器查看你当前的数值。我认为你不能添加新的变量，使其根据配色方案进行切换。但是，有很多变量可供选择，你可以在任何自定义声明中使用它们。例如：

.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%
    );
}

可以给你一个像这样的帖子高亮：:rainbow: :slight_smile:

image
image790×556 70.5 KB

2 个赞
11

是的，我倾向于同意。我也一直在尝试使用 JavaScript / CSS 解决方案，但目前还没有奏效。

1 个赞
12

哇，我真的很喜欢这个主意！！

2 个赞
13

看起来很酷。做得好 :slight_smile:

1 个赞