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

Asked 28/1, 2021 at 15:48 Answered 11/8, 2023 at 13:23

Solved javascript html google-chrome darkmode

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:

Comminate answered 28/1, 2021 at 15:48 Comment(0)

122

It's the CSS property color-scheme. This will also apply the theme on form controls, background-color and text color.

Meta tag also has the color-scheme value <meta name="color-scheme" content="dark">.

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>

Perissodactyl answered 8/2, 2021 at 7:33 Comment(5)

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. – Chader 23/2, 2021 at 16:58

i commented the lines that start with " document.documentElement.style.overflow " – Chader 23/2, 2021 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? – Perissodactyl 23/2, 2021 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 – Perissodactyl 24/2, 2021 at 0:3

i posted another snippet based on your code, but i made it to work on 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. – Chader 24/2, 2021 at 5:18

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>

Rutharuthann answered 11/8, 2023 at 13:23 Comment(0)

const btn = document.querySelector("button");
let isDark = true;

btn.addEventListener("click", () => {
// https://mcmap.net/q/376174/-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>

Chader answered 23/2, 2021 at 18:24 Comment(0)

Recommended topics

Hot tags