这仍然是检查暗模式的解决方案吗？

开发
1

继续关于 深色模式没有特定类 的讨论：

我有一个主题组件，它会根据用户所在的类别更改网站徽标，并在侧边栏中为类别添加徽标，现在他们希望在深色模式下更改为不同的徽标。

类似这样：

.category-my-other-identity #site-logo {
  content: url($AS) !important;
  display: inline-block;
  height: $site-logo-height;
  font-size: 0;
  margin-top: $site-margin-top;
  margin-bottom: $site-margin-bottom;
}

我对 CSS 很糟糕，但似乎如果有一个“这是深色模式”的类会容易得多。或者像上面这样的东西可以起作用。

或者，如果这是一个“真正”的主题组件（现在只是像上面那样手动编码），那么将这些设置放入 CSS 中应该足够容易了。这似乎是我应该做的，对吧？

6 个赞
2

巧合的是，这正是我们本周内部一直在讨论的事情！这里有几个概念验证 PR：

请注意，这些只是帮助我们思考的实验 - 它们不保证会被合并。

至于“现在”，最好的方法可能是使用 <LightDarkImg 组件，如下所示：

8 个赞
3

这说得通。我曾经遇到过同样的问题，但 @david，那对我来说是可行的。
另外，徽章授予困难是算作 bug 还是其他什么？

2 个赞
4

可能是 bug，但我们需要更多细节才能确定——这也与本主题无关，所以你最好搜索一下这个问题，如果找不到答案，就开一个新主题，详细说明你尝试的操作以及失败的地方。

5 个赞
5

纯 CSS 解决方案可能会使用 --scheme-type CSS 变量，甚至几小时前添加的 color-scheme 属性（太棒了！），并结合 @container 样式查询 或 light-dark()。

不幸的是，light-dark() 仅适用于颜色值。您或许可以使用 @container 样式查询来定位 color-scheme 属性（Firefox 尚不支持自定义属性的样式查询）。由于我的开发环境目前已损坏，我无法测试这个想法。

在根元素上设置一个专用的 .dark-mode 或 .light-mode 类无疑是最容易处理的。

6 个赞