Theming the component

[rafalkrupinski]

Hi
Can someone help with theming the component?

Looks like only the input and the buttons can be themed with css classes, while all the rest uses CSS variables.
Using CSS classes works perfect [edit: only for input, not for buttons] within my skeleton.dev (tailwind wrapper) project, but I'm having a hard time to set these variables to my theme variables.
Setting them to constants or to other variables within the same file works fine, but any other variables are ignored.

Example using accent colour to make it more visible:

    --sdt-bg-main: rgb(var(--color-tertiary-500));

[rafalkrupinski]

example attempt to theme with CSS classes.
Only the inputClasses are honoured, buttons seem to lose styling.

<SveltyPicker
        inputClasses="input w-[200px]"
        theme="text-secondary-50-900-token bg-primary-500-400-token border rounded shadow"
        todayBtnClasses="btn btn-primary"
        clearBtnClasses="btn btn-secondary"
/>

[mskocik]

Button classes are perfectly fine, see example, but you need to override them properly.

If you want to keep default styling you need to pass also default class/classes in *BtnClasses props.

[rafalkrupinski]

In the example above, I was trying to style the component with skeleton.dev classes. I didn't write them.

It was easier to override .std-component-wrap to use the theme variables

[mskocik]

Yes, that's what std-component-wrap is for. I thought your use case was slightly different.