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

add support for coloring using CSS variables #149

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

McShelby
Copy link

Thank you very much for your contribution! Please make sure the followings
are checked.

  • Read CONTRIBUTING.md
  • Run npm test to make sure it formats and build successfully
  • Provide the scenario this PR will address
  • Refer to concerning issues if exist

This PR adds support for coloring the scrollbar via CSS variables.

A demo is included within this PR in examples/colors.html which was derived from examples/basic.html.

I was in need to support a dark mode variant of my project but coloring of the scrollbars did not fit. Instead of redefining all the selectors to set the CSS color attributes within my project, I wanted a more robust solution.

This fixes #15, #102

Now colors are easily modifiable by CSS variables if the browser supports them. If the browser does not support CSS variables it defaults back to the old mechanism, making it compatible with at least IE11.

To set the colors simply add the following snippet to your project's CSS

:root {
  --ps-thumb-color: #faa;
  --ps-thumb-hover-color: #f99;
  --ps-rail-hover-color: #fee;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Provide custom style API
1 participant