是否有办法检测暗模式的使用情况？

[ti0]

在插件/主题组件中是否有办法检测当前主题是否正在使用暗模式？
或者是否有办法获取活动主题 ID？
或者我们应该为浅色主题和深色主题创建不同的主题组件？

[Don]

@ti0

检测当前主题是否使用暗黑模式

你好，

我认为有几种方法可以实现这一点。

你可以使用这个

No specific class for dark mode

Would this accomplish what you need? this would need to be added to color_definitions.scss @if #{schemeType()} == dark { body { background: red; } } @else { body { background: blue; } } A class does seem like it would be useful though, we can probably add one.

或者这个

Why might dark-light-choose() not work?

I believe, due to the way the SCSS is compiled, custom dark/light definitions need to be added to color_definitions.scss within a theme and won’t work in other scss files. [Screen Shot 2020-12-04 at 9.54.13 PM] color_definitions.scss is high up in the cascade (before a lot of the default styles), so you don’t want to add the .modal.history-modal ins part there. Instead you can just add the color definition itself… $dark-theme-ins: #acf2bd; $light-theme-ins: #4da06d; $ins: dark-light-choose(…

---

喜欢 Discourse Ai 相关主题部分 更容易组织和查找主题。

[Lilly (Lillian Louis)]

我个人更喜欢拥有独立的深色和浅色主题，而不是主题的深色和浅色模式。我认为一些用户会觉得那个额外的下拉菜单令人困惑。我只是制作了浅色和深色版本的主题并将它们放在汉堡菜单中，但我只有 4 个实时主题（不过我确实做过特殊活动的限时主题，例如我们为比赛制作了大师高尔夫的深色和浅色主题）。只需跟踪调色板即可。

[ti0]

我通过根据颜色向每个主题的 Head 部分添加单行代码解决了这个问题：

document.body.classList.add(“dark-theme”);

document.body.classList.add(“light-theme”);

感谢 @Don @Lilly 的建议