How do I switch to Chromes dark scrollbar like GitHub does?

Question

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:

Caleb Taylor · Accepted Answer · 2023-02-18T20:29:49.097

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

: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>

i found, that this snippet was not always working, i had to add at the beginning of the clicking function saying: document.documentElement.style.display = 'none'; and add as the last statement: document.documentElement.style.display = ''; , then it started working in all cases. — Patrik Laszlo, Feb 23 '21 at 16:58
i commented the lines that start with " document.documentElement.style.overflow " — Patrik Laszlo, Feb 23 '21 at 18:25
Thanks for finding the issues with my snippet! Could you specify why it wasn't working, or what conditions you tried it under? — Caleb Taylor, Feb 23 '21 at 19:53
I changed the setting the document attribute after it's style was set to overflow hidden, where previously I had set it to before — Caleb Taylor, Feb 24 '21 at 00:03
i posted another snippet based on your code, but i made it to work on https://p3x.redis.patrikx3.com/main/key/BIG-JSON in every cases, the overflow was not working in every casing, with the style display started working in all cases. — Patrik Laszlo, Feb 24 '21 at 05:18

score 2 · Answer 2 · answered Feb 23 '21 at 18:24

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>

score 2 · Answer 3 · answered Aug 11 '23 at 13:23

2

To get this to work in as many browsers as possible I suggest you do the following:

Add the color-scheme property to your root element (as suggested in the other answers)
Add <meta name="color-scheme" content="dark"> inside your <head></head>

answered Aug 11 '23 at 13:23

Anna Drzewiecki

35
3

How do I switch to Chromes dark scrollbar like GitHub does?

3 Answers3

Linked