Can't implement dark mode & border radius
Closed this issue ยท 13 comments
I want my scrollbar to look like this:
the code for the above is:
::-webkit-scrollbar {
/* h-[10px] => height of horizontal scrollbar, w-[10px] => width of vertical scrollbar */
@apply h-[10px] w-[10px] bg-gray-200 dark:bg-scrollbar;
}
::-webkit-scrollbar-track {
@apply rounded-md bg-transparent;
}
::-webkit-scrollbar-thumb {
@apply rounded-md bg-gray-500 dark:bg-gray-300;
&:hover {
@apply bg-gray-400 dark:bg-gray-400;
}
}
but instead when i used this plugin, it looks like:
notice, the thumb is square & there is no background color.
the code looks like:
scrollbar: (theme) => ({
DEFAULT: {
size: theme('spacing.3'),
borderRadius: theme('borderRadius.md'),
colors: {
track: theme('colors.transparent'),
thumb: theme('colors.gray.500'),
thumbHover: theme('colors.gray.400'),
},
backgroundColor: theme('bg-gray-200'),
},
dark: {
size: theme('spacing.3'),
borderRadius: theme('borderRadius.md'),
colors: {
track: theme('colors.transparent'),
thumb: theme('colors.gray.300'),
thumbHover: theme('colors.gray.400'),
},
backgroundColor: theme('bg-scrollbar'),
},
}),
what am i doing wrong?
i have just commented my scrollbar.css
file so my bg-scrollbar
variable is still present but it isn't giving me the same output.
would love to use this plugin :)
Didn't know we can use border radius there.
Currently this plugin doesn't support attribute borderRadius, I'll add it later today after I'm back from work.
thanks. also, the background color isn't working if u can compare both the screenshots.
fwiw, i want the 2nd one to look exactly like the 1st one :)
What is your theme('bg-scrollbar')
does?
For background color, change the property inside colors
scrollbar: theme => ({
DEFAULT: {
size: theme('spacing.1'),
colors: {
track: theme('colors.gray.300'),
thumb: theme('colors.gray.100'), // change this value to your color, this will apply css property background, which I believe what you are asking
thumbHover: theme('colors.gray.600'), // this is when the scroll bar is hovered
}
},
})
no, that's different. my bg-scrollbar
is inside theme > extend > colors
that looks like:
theme: {
extend: {
colors: {
'primary-lighter': 'hsl(0, 0.0%, 15.0%)',
'primary-light': 'hsl(0, 0.0%, 12.0%)',
primary: 'hsl(0, 0.0%, 9.0%)',
'primary-dark': 'hsl(0, 0.0%, 6.0%)',
'primary-darker': 'hsl(0, 0.0%, 3.0%)',
scrollbar: 'hsla(0, 0%, 100%, 0.1)',
syntaxBg: 'hsl(0, 0.0%, 12%)',
},
}
}
you are little wrong about that 2nd part. i thought i must use backgroundColor
property but what i wanted was to use track
property like this:
scrollbar: (theme) => ({
DEFAULT: {
size: theme('spacing.3'),
borderRadius: theme('borderRadius.md'),
colors: {
track: theme('colors.gray.200'),
thumb: theme('colors.gray.500'),
thumbHover: theme('colors.gray.400'),
},
},
dark: {
size: theme('spacing.3'),
borderRadius: theme('borderRadius.md'),
colors: {
track: theme('colors.scrollbar'),
thumb: theme('colors.gray.300'),
thumbHover: theme('colors.gray.400'),
},
},
}),
this worked.
borderRadius
doesn't work & i think dark theme isn't working either.
this is how it should look (this is my scrollbar.css
file):
this is how it looks:
i've kept tailwind.config.js
(see the above code) exactly like my scrollbar.css
file (see my 1st comment for code)
if you also check my scrollbar.css
file again, you can see thumb
& track
both are rounded so would love both of them to have support ๐
Yes, the dark mode can't be used like that.
I'll add another attribute darkColors, or maybe colors.darkTrack, colors.darkThumb for dark mode.
if theme('bg-scrollbar')
is supposed to access theme > extend > colors, change it to theme('colors.bg-scrollbar')
P.s hsla(0, 0%, 100%, 0.1) appears very transparent to me, I changed it in the tailwind play to be more clear.
So, background color should be working with colors.track, colors.thumb, colors.thumbHover
Darkmode and border radius is not supported yet.
I'll add another attribute darkColors, or maybe colors.darkTrack, colors.darkThumb for dark mode.
this looks unnecessary. why not make it work like your other plugin? my imaginary api mentioned above would be perfect so if you can make it work like that, then it'd be awesome. i don't like darkColors
, darkTrack
, & darkThumb
tbh.
if theme('bg-scrollbar') is supposed to access theme > extend > colors, change it to theme('colors.bg-scrollbar')
if i'm using gray.200
for bg-gray-200
then scrollbar
looks accurate for bg-scrollbar
just like in your tailwind play. again, that is not a problem. it works properly.
So, background color should be working with colors.track, colors.thumb, colors.thumbHover
oh yes, it will work after dark mode support :)
this looks unnecessary. why not make it work like your other plugin? my imaginary api mentioned above would be perfect so if you can make it work like that, then it'd be awesome. i don't like darkColors, darkTrack, & darkThumb tbh.
so that DEFAULT can have light and dark colors without the need for extra class.
and if you need to add another variant, it can have different light and dark color.
scrollbar: (theme) => ({
DEFAULT: {
size: theme('spacing.3'),
colors: {
track: theme('colors.gray.200'),
thumb: theme('colors.gray.500'),
thumbHover: theme('colors.gray.400'),
darkTrack: theme('colors.gray.600'),
darkThumb: theme('colors.gray.200'),
darkThumbHover: theme('colors.gray.100'),
},
},
green: {
size: theme('spacing.3'),
colors: {
track: theme('colors.green.200'),
thumb: theme('colors.green.500'),
thumbHover: theme('colors.green.400'),
darkTrack: theme('colors.green.500'),
darkThumb: theme('colors.green.900'),
darkThumbHover: theme('colors.green.800'),
},
},
}),
green setting will be available under .scrollbar-green
I just don't think dark
should belongs there with .loading-dark
or maybe with darkColors property
DEFAULT: {
size: theme('spacing.3'),
colors: {
track: theme('colors.green.200'),
thumb: theme('colors.green.500'),
thumbHover: theme('colors.green.400'),
},
darkColors: {
track: theme('colors.green.600'),
thumb: theme('colors.green.200'),
thumbHover: theme('colors.green.100'),
}
},
or maybe with array
DEFAULT: {
size: theme('spacing.3'),
colors: {
track: [theme('colors.gray.200'), theme('colors.gray.600']
thumb: [theme('colors.gray.500'), theme('colors.gray.200')]
thumbHover: [theme('colors.gray.400'), theme('colors.gray.100')]
},
},
Sorry, I accidentally pressed the shortcut to close the issue
My requirement is that the plugin should work without the need to add class in the DOM at all.
So I need the dark theme colors to be available in the config without the need to add dark:loading-dark class
I don't know if it will work great. I'll be in home in another 1 hour.
and if you need to add another variant, it can have different light and dark color.
oh yeah, now it makes sense but adam wathan (creator of tailwind) did say once that supporting multiple themes is overengineering.
and i agree with the sentiment as i coded a very small app with multiple themes & safe to say the experience was horrendous.
My requirement is that the plugin should work without the need to add class in the DOM at all. So I need the dark theme colors to be available in the config without the need to add dark:loading-dark class
oh yes, i guess it's the right approach.
i like the object approach darkColors: {}
& would prefer that :)
Released in v2.0.0
npm install @gradin/tailwindcss-scrollbar@next
Released as @next because I haven't added support for scrollbar classes and updated the README.
Hopefully I can finish it tomorrow.
This is a breaking change for people who use custom config.
New config structure:
theme: {
scrollbar: theme => ({
DEFAULT: {
size: '10px',
track: {
background: theme('colors.gray.50'),
darkBackground: theme('colors.green.500'),
borderRadius: '40px',
// add as many css attributes here, will be merged to ::-webkit-scrollbar-track
},
thumb: {
background: theme('colors.gray.300'),
darkBackground: theme('colors.green.800'),
borderRadius: '40px',
// add as many css attributes here, will be merged to ::-webkit-scrollbar-thumb
},
hover: {
background: theme('colors.gray.600'),
darkBackground: theme('colors.green.700'),
borderRadius: '40px',
// add as many css attributes here, will be merged to ::-webkit-scrollbar-thumb:hover
},
}
}),
},
I had to swap the config and put track, thumb, hover at the outer most to let more css in the config without me specifying every supported attributes. Now the code doesn't even have borderRadius, just put borderRadius there and it will be merged into the css. And it also mean, it also supports border, shadow, margin, padding, etc.
thanks, it worked. lmk when you release it without @next
tag ๐
Released v2.0.2 as @latest.
- Updated the README.
- Fixed bug when using prefix such as
'tw-
still adds darkmode variant as.dark
instead of.tw-dark
. - Fixed bug when using
darkMode: 'class'
still showing dark mode even when the class '.dark' is removed.
Support for scrollbar classes is coming next week.
Let me know if there's any problem.