MarvinJWendt
Me acabo de enterar de que GitHub usa una barra de desplazamiento oscura en Chrome, cuando estás usando el modo oscuro de GitHub. Si cambia el modo de color, la barra de desplazamiento también cambiará.
¿Cómo puedo lograr este comportamiento? No pude encontrar ninguna forma de decirle al navegador que use el modo oscuro.
Barra de desplazamiento del modo oscuro:
caleb taylor
Es la propiedad CSS color-scheme. Esto también aplicará el tema en los controles de formulario, el color de fondo y el color del texto.
Actualmente compatible con Chrome 81, Firefox 96 y Safari 13.
fuente MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
Nota: Con Firefox para el esquema de color del modo oscuro, el color de fondo del cuerpo sigue siendo un tema claro, pero otros elementos del formulario tienen un tema oscuro.
: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>Si desea cambiar el tema sobre la marcha, se encuentra con el problema de que la barra de desplazamiento no actualiza su combinación de colores hasta que interactúa. Una forma de actualizar la barra de desplazamiento es cambiar su propiedad principal de desbordamiento, que en este caso sería la html elemento.
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>-
Descubrí que este fragmento no siempre funcionaba, tuve que agregar al comienzo de la función de clic que decía: document.documentElement.style.display = ‘none’; y agregue como última declaración: document.documentElement.style.display = ”; , entonces empezó a funcionar en todos los casos.
-Patricio Laszlo
23 de febrero de 2021 a las 16:58
-
Comenté las líneas que comienzan con “document.documentElement.style.overflow”
-Patricio Laszlo
23 de febrero de 2021 a las 18:25
-
¡Gracias por encontrar los problemas con mi fragmento! ¿Podría especificar por qué no funcionaba o en qué condiciones lo probó?
– CalebTaylor
23 de febrero de 2021 a las 19:53
-
Cambié la configuración del atributo del documento después de que su estilo se configuró en desbordamiento oculto, donde anteriormente lo había configurado antes
– CalebTaylor
24 de febrero de 2021 a las 0:03
-
publiqué otro fragmento basado en tu código, pero logré que funcionara p3x.redis.patrikx3.com/main/key/BIG-JSON en todos los casos, el desbordamiento no funcionaba en todos los casos, y la pantalla de estilo comenzó a funcionar en todos los casos.
-Patricio Laszlo
24 de febrero de 2021 a las 5:18
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>