Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom scrollbar with dark theme #27

Closed
mateusabelli opened this issue Oct 2, 2022 · 1 comment · Fixed by #28
Closed

Custom scrollbar with dark theme #27

mateusabelli opened this issue Oct 2, 2022 · 1 comment · Fixed by #28
Assignees
Labels
enhancement New feature or request hacktoberfest

Comments

@mateusabelli
Copy link
Contributor

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

@mittal-parth
Copy link
Owner

@mateusabelli sure, please go ahead!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request hacktoberfest
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants