Dark Scrollbar in the Browsers

CSSPosted on

The light and dark theme combination is an exciting new design option that serves accessibility and less power consumption.

Today, implementing a dark theme into your project is easier because of the CSS Custom Properties and the prefers-color-scheme media feature.

Regardless of how you implement your dark theme mode solution, you want to modify your document scrollbar color (dark, light). For this, we can use the CSS color-scheme property the explicitly tell the browser in which theme we want to render our main scrollbars.

:root {
    color-scheme: dark;

If you want to recolor your document scrollbar, you have to use the color-scheme property at the root element, which is the. You can check out GitHub’s code in your console for a good example.

Need a web developer? Maybe we can help, get in touch!

Similar Posts

More content in CSS category