Menu
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:
515
Left-click and drag the small circle on the Scrollbar thumb color palette to select a color there. You can also choose different shades for your selected color by dragging the HSV bar sliders up and down. Drag the circle within the Scrollbar track color palette to choose a color for the track bar.
All we need to do is add the color-scheme property to this class and set it to “dark” like so. The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. The browser will try to adjust the color of some of the elements based on this preference.
color: It is used to set the scrollbar color to any custom color. It takes two values, the first is applied to the scrollbar thumb and the second color is applied to the scrollbar track. red green scrollbar-color.
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?
To enable Chrome’s dark theme, just switch your operating system to dark mode. On Windows 10, head to Settings > Personalization > Colors and select “ Dark ” under “Choose your default app mode.” On a Mac, enable the system-wide dark mode. Here’s how to activate Chrome’s new dark mode...
Update: Chrome’s new built-in dark mode makes context menus dark, too! If you ever want to switch back to Chrome’s default theme you can, click menu > Settings. Look for the Themes option under appearance and click “Reset to Default.” A theme changes your browser’s interface, but most websites use white backgrounds.
Google Chrome doesn’t have a built-in dark theme like Mozilla Firefox and Microsoft Edge do, but you can get a dark Chrome browser in a few clicks.
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, Firefox 96 and Safari 13.
MDN source: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
Note: With Firefox for dark mode color-scheme, the body background color remains light theme, but other form elements have dark theme.
: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>
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
