Style scrollbars for Webkit browsers #525
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds scrollbar colors and styles them to match the site a little better.
Currently, the scrollbars do not match the theme on webkit based browsers (chrome, edge, etc.). This does not affect browsers which do not use webkit (e.g. firefox) as they handle scrollbars differently. This pull request adds styles to them for users with a pointer and just corrects the
color-scheme
for everyone else.The changes are made through Tailwind via the
@apply
property, so no magic numbers.Before:
After:
Concerns
This change modifies the size of the scrollbar which could possibly be an accessibility concern. It is possible to remove the extra styles and just keep the
color-scheme
if that is the case.Another concern is the use of
.dark
to hook into dark mode. The current tailwind settings set the dark mode to be set with a class, but this could theoretically be changed, leading to this breaking. This specific scenario is unlikely as the'media'
option also breaks the theme switcher, but it is technically one possible issue.Possible Other Solutions
This change works on the scrollbars by styling them directly. It is also possible to just use the
color-scheme
property on theHTML
element when there is the.dark
class. This would address the issue of the changed size.I have separated the dark mode scrollbar colors and the styled scrollbars into separate commits, so feel free to revert the style scrollbars commit if this seems to be the better solution.
Here is what that would result in: