mittal-parth/personal-portfolio

Custom scrollbar with dark theme

mateusabelli opened this issue · 1 comments

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

BEFORE

After

AFTER

@mateusabelli sure, please go ahead!