Why Paginator pagging component is theme inverted? about skeleton HOT 4 CLOSED

If you browse the Skeleton documentation you'll notice most button elements use this neutral tone by default. It's a stylistic choice.

https://www.skeleton.dev/components/paginators

If you would like to change this, we provide a slew of style props for doing so:

https://www.skeleton.dev/components/paginators?tab=properties

from skeleton.

@endigo9740

I opted to use a custom variant with controlVariant="variant-filled-paginator",
that works with both theme flavours and I'm happy with it for now
I leave it here, maybe can be useful for others like me that prefer dark on dark, white on white option

	.variant-filled-paginator {
		@apply bg-surface-200 text-surface-900 dark:bg-surface-700 dark:text-on-surface-token;
	}

thanks @endigo9740 really appreciate your help

I love skeleton ui,
it's a great for persons like me that just want to use some ready made opinionated components and move on coding

from skeleton.

hello, first thank for the quick answer

it make sense if is a stylistic choice
sorry to ask, you are referring the controlVariant property?

if so, can you help me to use the mentioned property to invert the stylistic choice,
for me is not clear how can I do that,

a simple snippet example will be appreciated

in my case I prefer a dark in dark theme, and a white in white theme, is a matter of "taste",

I will appreciate any help

thanks in advance

from skeleton.

@koakh controls contain a set of buttons, so you'll want to adjust he styles here.

Here's where it's detailed in the docs:

Here's an example changing it:

<Paginator ... controlVariant="variant-filled-secondary" />

You can preview other button styles using variants here:
https://www.skeleton.dev/elements/buttons

And learn more about variants here:
https://www.skeleton.dev/docs/variants

If there's not a variant that applies the styles you want, then you my have to create your own custom option. In most cases these are a combination of light/dark mode styles for background, text, and fills. Here's the source for a more specific example:
https://github.com/skeletonlabs/skeleton/blob/master/packages/plugin/src/styles/components/variants.css

from skeleton.