Custom scrollbar with dark theme
mateusabelli opened this issue · 1 comments
mateusabelli commented
Styling the scrollbar
Hello, I would like to implement some styling to make the scrollbar have the same dark theme as the website.
Please let me know if it interests you, if it does, assign me and I will happily open a PR with the following code, the --primary
and --secondary
color variables, names, values are subject to change to respect the project styling.
:root {
--primary: #363636;
--secondary: lightblue;
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--secondary) var(--primary);
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 15px;
}
*::-webkit-scrollbar-track {
background: var(--primary);
border-radius: 0px;
}
*::-webkit-scrollbar-thumb {
background-color: var(--secondary);
border-radius: 14px;
border: 3px solid var(--primary);
}
Before
After
mittal-parth commented
@mateusabelli sure, please go ahead!