如何解决如何在 :root 和全局变量中触发偏色方案?
我有一个与此类似的 scss 代码:
:root {
...some global color related variables
@media (prefers-color-scheme: dark) {
...global colors are overwritten
}
}
我有一个按钮可以在暗模式和亮模式之间切换,它的 javascript 代码是这样工作的:
document.documentElement.style = `color-scheme: ${mode};`; // mode is either light or dark
const meta = document.querySelector('meta[name="color-scheme"]');
meta.content = mode; // mode is either light or dark
并将其 color-scheme: light or dark
样式应用于 html
元素和所有其他元素,但它不会触发与 prefers-color-scheme
相关的样式中的 :root
Emulate CSS prefers-color-scheme: dark
和全局变量甚至其他一些地方。我怎样才能做到这一点?
PS1:当我使用 chrome 浏览器本身(在开发工具中使用 {{1}})更改网站的配色方案时,它工作正常并且全局变量被覆盖。
PS2:我正在尝试使用配色方案实现暗模式,避免添加类或类似的东西,这是因为浏览器的一些默认样式被应用,认为它是一个轻模式网站,而不是(像自动填充输入中的 -internal-light-dark 颜色)
解决方法
翻转媒体查询和根选择器的嵌套应该可以解决问题。
:root {
--bg: hotpink;
}
@media (min-width: 600px) {
:root {
--bg: blue;
}
}
body {
background-color: var(--bg);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。