Skip to content

Commit

Permalink
feat: scrollbars now have transparent background and currentColor for…
Browse files Browse the repository at this point in the history 
…eground
  • Loading branch information
@saadeghi
saadeghi committed Jun 5, 2024
1 parent a8a7d6e commit f0ea341
Showing 1 changed file with 3 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/base/general.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,6 @@
html {
-webkit-tap-highlight-color: transparent;
}
* {
scrollbar-color: currentColor transparent;
}

14 comments on commit f0ea341

@microtactical
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I preferred it before to be honest. It can look quite harsh with a black scrollbar.

@whitetown
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh no.. please restore it or say how to override it

@whitetown
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • {
    scrollbar-color: unset;
    }

@saadeghi
Copy link
Owner Author

@saadeghi saadeghi commented on f0ea341 Jun 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before, it was gray as the OS color and it didn't feel good with the theme if the theme is not white or black.
Now it adapts the currentColor which is the text color of current element. It's better visually and also better for accessibility.
It's also now consistent among all devices. Previously you would see a different colors on each OS as it was the default OS scrollbar color.

@kavika-1
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm... @saadeghi, based on your white/black remark, would it be a reasonable suggestion for the light and dark themes, that they should retain the previous behavior? In any case, thanks @whitetown, will use that to reset it.

@TomoyaHamasaki
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love the fact you added scroll bar support, but would appreciate the ability to change the color to a semantic value like primary, secondary, base-200, etc.

@wootapa
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add option to either style it with semantic values or configurable so we can opt out of this behavior.

@s-kitade
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert to previous version.......

@SeanHWard
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • {
    scrollbar-color: unset;
    }

where do we apply this code? Is it in config somewhere?

@whitetown
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • {
    scrollbar-color: unset;
    }

where do we apply this code? Is it in config somewhere?

in your global.css

@mintong89
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like the color is too constrast and it kinda eye strain to look at. Can you at least use base-200 or base-300 for the background?

@saadeghi
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Fixed scrollbar high contrast issue in 4.12.8
scrollbar color is now currentColor (default text color) with 35% transparency which is similar to OS default colors on light/dark themes.

@nbran
Copy link

@nbran nbran commented on f0ea341 Jun 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is breaking/superseding ::-webkit-scrollbar rules. Appropriateness of using that pseudo-element aside, a bit harsh to have the library break previously styled scrollbars without warning.

@saadeghi
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nbran

This is breaking/superseding ::-webkit-scrollbar rules.

::-webkit-scrollbar is not standard CSS and never was. It shouldn't be used in production:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

scrollbar-color is the standard CSS attribute for customizing scrollbars.

a bit harsh to have the library break previously styled scrollbars without warning.

scrollbar-color was added to daisyUI in 4.12 minor update, minor updates are for new features.

Projects which were using 4.11 wouldn't get updated to 4.12 automatically. It won't effect existing websites automatically unless you update daisyUI to the latest minor version manually.

I would suggest using standard scrollbar-color instead of -webkit-scrollbar.
Also, you can simply disable daisyUI base styles from daisyUI config if you don't need them:

https://daisyui.com/docs/config/#base

Let me know if you have any questions

Please sign in to comment.