如何像GitHub那样切换到Chromes深色滚动条？
如何像GitHub那样切换到Chromes深色滚动条？
提问于 2021-01-28 23:48:16
我只是偶然发现，当你使用GitHubs深色模式时，GitHub在Chrome中使用了深色滚动条。如果切换颜色模式，滚动条也会切换。
我怎样才能实现这个行为呢？我找不到任何方法来告诉浏览器使用暗模式。
暗模式滚动条：
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-08 15:33:30
它是CSS属性color-scheme。这也将在表单控件、背景颜色和文本颜色上应用主题。
目前支持Chrome 81和Safari 13
MDN来源：https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
:root {
color-scheme: dark;
}
.container {
padding: 25px;
height: 2000px;
}<div class="container">
<div class="text">Dark Mode</div>
<input type="text" placeholder="input with dark theme"/>
</div>
如果你想动态地改变主题，那么你就会遇到这样的问题:滚动条在交互之前不会更新它的配色方案。刷新滚动条的一种方法是更改其parent overflow属性，在本例中为html元素。
const btn = document.querySelector("button");
let isDark = true;
btn.addEventListener("click", () => {
// remove scrollbars
document.documentElement.style.overflow = "hidden";
// trigger reflow so that overflow style is applied
document.body.clientWidth;
// change scheme
document.documentElement.setAttribute(
"data-color-scheme",
isDark ? "light" : "dark"
);
// remove overflow style, which will bring back the scrollbar with the correct scheme
document.documentElement.style.overflow = "";
isDark = !isDark;
});[data-color-scheme="dark"] {
color-scheme: dark;
}
[data-color-scheme="light"] {
color-scheme: light;
}
.container {
padding: 25px;
height: 2000px;
}<html lang="en" data-color-scheme="dark">
<body>
<div class="container">
<button>Click to Change Color Scheme</button>
<br>
<br>
<br>
<input type="text" placeholder="dummy input">
</div>
</body>
</html>
Stack Overflow用户
发布于 2021-02-24 02:24:14
const btn = document.querySelector("button");
let isDark = true;
btn.addEventListener("click", () => {
// https://stackoverflow.com/questions/65940522/how-do-i-switch-to-chromes-dark-scrollbar-like-github-does
document.documentElement.style.display = 'none';
document.documentElement.setAttribute(
"data-color-scheme",
isDark ? "dark" : "light"
);
// remove scrollbars
// document.documentElement.style.overflow = "hidden";
// trigger reflow so that overflow style is applied
document.body.clientWidth;
// remove overflow style, which will bring back the scrollbar with the correct scheme
// document.documentElement.style.overflow = "";
document.documentElement.style.display = '';
isDark = !isDark;
});[data-color-scheme="dark"] {
color-scheme: dark;
}
[data-color-scheme="light"] {
color-scheme: light;
}
.container {
padding: 25px;
height: 2000px;
}<html lang="en" data-color-scheme="dark">
<body>
<div class="container">
<button>Click to Change Color Scheme</button>
<br>
<br>
<br>
<input type="text" placeholder="dummy input">
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65940522
复制相关文章
相似问题
腾讯云开发者
