Can't implement dark mode & border radius

[deadcoder0904]

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 :)

[christhofer]

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.

[deadcoder0904]

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 :)

[christhofer]

@deadcoder0904

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
        }
      },
    })

[deadcoder0904]

@christhofer

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)

[deadcoder0904]

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 👍

[christhofer]

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')

Here is the demo.

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.

[deadcoder0904]

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 :)

[christhofer]

@deadcoder0904

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

[christhofer]

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.

[deadcoder0904]

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 :)

[christhofer]

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.

[deadcoder0904]

thanks, it worked. lmk when you release it without @next tag 👍

[christhofer]

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.