如何像 GitHub 一样切换到 Chromes 深色滚动条? [英] How do I switch to Chromes dark scrollbar like GitHub does?
问题描述
我刚刚发现，当您使用 GitHub 的暗模式时，GitHub 在 Chrome 中使用暗滚动条.如果切换颜色模式，滚动条也会切换.
我怎样才能实现这种行为?我找不到任何方法告诉浏览器使用暗模式.
深色模式滚动条:
这是 CSS 属性 color-scheme.这还将在表单控件、背景颜色和文本颜色上应用主题.
目前支持 Chrome 81 和 Safari 13
MDN 来源:https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
:root {配色方案:深色；}.容器 {填充:25px；高度:2000px；}<div class="text">深色模式</div><input type="text" placeholder="带有深色主题的输入"/>如果您想即时更改主题，则会遇到滚动条在交互之前不会更新其配色方案的问题.刷新滚动条的一种方法是更改其父溢出属性，在本例中为 html 元素.
const btn = document.querySelector("button");让 isDark = true;btn.addEventListener("点击", () => {//移除滚动条document.documentElement.style.overflow = "隐藏";//触发回流以便应用溢出样式document.body.clientWidth;//改变方案document.documentElement.setAttribute(数据颜色方案"，是黑暗的?光线暗");//移除溢出样式，这将带回具有正确方案的滚动条document.documentElement.style.overflow = "";isDark = !isDark;});[data-color-scheme="dark"] {配色方案:深色；}[数据颜色方案=光"] {配色方案:浅色；}.容器 {填充:25px；高度:2000px；}<身体><div class="容器"><button>单击以更改配色方案</button><br><br><br><input type="text" placeholder="虚拟输入"></html>
I just came across, that GitHub uses a dark scrollbar in Chrome, when you're using GitHubs dark mode. If you switch the color mode, the scrollbar will switch too.
How can I achive this behaviour? I could not find any way to tell the browser to use dark mode.
Dark mode scrollbar:
It's the CSS property color-scheme. This will also apply the theme on form controls, background-color and text color.
Currently supported on Chrome 81 and Safari 13
MDN source: 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>
If you want to change the theme on the fly, then you run into the issue where the scrollbar doesn't update it's color scheme until it is interacted. One way to refresh the scrollbar is to change its parent overflow property, which in this case would be the html element.
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>
这篇关于如何像 GitHub 一样切换到 Chromes 深色滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
