Small little issue with colors

[multiplehats]

Thanks for this great package.

Docs should probably mention that you need to add the following to your tailwind config to make it work:. Didn't create a PR, not sure if that's something you would be interested in.

module.exports = {
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		'./node_modules/svelte-theme-select/**/*.{html,js,svelte,ts}'
	],
	// ... rest stripped out for brevity
}

[CaptainCodeman]

Yeah, it would be worth documenting, although I'd expect people to normally customize the colors for use in their own project which then wouldn't require it (but I haven't documented how to do that yet either!)

[multiplehats]

The reason I created an issue is because I noticed the ThemeToggle.svelte wasn't exporting any classes.

I guess this works for me now. But I'm happy to create a PR with exported colors if that's something you'd like

[CaptainCodeman]

The colors can all be set by passing them into createThemeSwitcher, e.g. you'd have this in the +layout.svelte file:

	createThemeSwitcher({
		colors: {
			selectLabel: 'text-gray-500 dark:text-gray-300',
			selectButton:
				'ring-1 ring-gray-900/10 rounded-lg shadow-sm p-2 text-gray-700 bg-white dark:bg-gray-700 dark:ring-0 dark:highlight-white/5 dark:text-gray-200',
			selectIcon: 'text-gray-400',
			dropdownList: 'text-gray-700 bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-700 dark:ring-0 dark:highlight-white/5 dark:text-gray-300',
			dropdownHover: 'hover:bg-gray-50 hover:dark:bg-gray-800/50',
			textActive: 'text-sky-500',
			iconActiveStroke: 'stroke-sky-500',
			iconActiveFill: 'fill-sky-500',
			iconActiveShade: 'fill-sky-400/20',
			iconStroke: 'stroke-gray-400',
			iconFill: 'fill-gray-400',
		},
	})

Those should get picked up by Tailwind as they are then part of your app.

[multiplehats]

Woops! Totally overlooked that. I'm so used to checking out the component.

My bad!

[CaptainCodeman]

That's what needs to be documented :)

They different colors are used in a few places, it's a bit janky but allows them to be overridden. I was thinking it may be better to create some css properties to make configuring them more flexible (it could then go in the Tailwind config, other CSS files etc...)

[multiplehats]

Is there a reason for not exporting class props from the components themselves?

I might require different configuration depending on the type of header i'm using (just to name an example).

I'm also kinda use to just adding Tailwind classes directly on the component. My first element is usually $$props.class and after that I go for some type of naming convention.

[CaptainCodeman]

No, that might be the better, simpler, option (although I do think the css props would provide more flexibility). It kind of evolved that way, I was originally hoping to limit how many color definitions were needed but there were too many combinations.