How to switch scrollbar to dark mode?-CodePudding

const dark = document.getElementById("dark");

        dark.addEventListener("click", function() {
        const body = document.body;
        body.classList.toggle("ddark")
        })

 html {
            height: 1000px;
        }
        body {
            background-color: rgb(220,220,220);
        }
        ::-webkit-scrollbar{
            border-left: 1px solid black;
        } 
        ::-webkit-scrollbar-track {
            background-color: white;
        }
        ::-webkit-scrollbar-thumb {
            border: 3px solid white;
            background-color: darkgray;
            border-radius: 20px;
        }
        .ddark {
            background-color: #303030;
        }

<button  id="dark">Go Dark</button>

I want to switch scrollbar background color to dark mode when i click the button. When body goes dark, the right side of the page looks so ugly. How to make this?

CodePudding user response：

I just added html instead of body and I also added html with the default scrollbar styling and it worked.

const dark = document.getElementById("dark");

dark.addEventListener("click", function () {
  const body = document.querySelector("html");
  body.classList.toggle("ddark")
})

 html {
   height: 1000px;
   background-color: rgb(220, 220, 220);
 }

 html::-webkit-scrollbar {
   border-left: 1px solid black;
 }

 html::-webkit-scrollbar-track {
   background-color: white;
 }

 html::-webkit-scrollbar-thumb {
   border: 3px solid white;
   background-color: darkgray;
   border-radius: 20px;
 }

 .ddark {
   background-color: #303030;
 }

 html.ddark::-webkit-scrollbar-track {
   background-color: #ffffff;
 }
 html.ddark::-webkit-scrollbar-thumb {
   background-color: black;
 }

<button  id="dark">Go Dark</button>