[V3] Setting iconActiveBase or controlActive styles for Switch component do not work as expected

[PaoloTorregroza]

Current Behavior

Expected Behavior

Setting controlActive does not have the desired effect, I tried changing iconActiveBase as well but it did not worked, when checking the component the colors of it do not change.

Steps To Reproduce

Im using Svelte 5 with sveltekit using skeleton 3.0.0-next.10 and skeleton-svelte 1.0.0-next.16

This is how my code looks right now and its output

<Switch
	name="mode"
	controlInactive="bg-surface-200"
	controlActive="bg-surface-800"
	iconActiveBase="bg-surface-950 text-surface-50"
	iconInactiveBase="bg-surface-50"
	checked={uiModeHandler.uiMode === 'dark'}
	onCheckedChange={handleModeChange}
>
	{#snippet inactiveChild()}<IconSun size="14" />{/snippet}
	{#snippet activeChild()}<IconMoon size="14" />{/snippet}
</Switch>

If I only use the code in the documentation for a light switch (https://next.skeleton.dev/docs/components/switch/svelte/) it looks like this:

<Switch
	name="mode"
	controlActive="bg-surface-200"
	onCheckedChange={handleModeChange}
	checked={uiModeHandler.uiMode === 'dark'}
>
	{#snippet inactiveChild()}<IconSun size="14" />{/snippet}
	{#snippet activeChild()}<IconMoon size="14" />{/snippet}
</Switch>

The name of the theme Im using is "mona" but I had this problem with other themes as well.

Link to Reproduction / Stackblitz

No response

More Information

No response

[PaoloTorregroza]

Just noticed there was a new release for skeleton-svelte, just upgraded to 1.0.0-next.17 but the problem stills there.

[endigo9740]

@PaoloTorregroza first thing first, make sure to take caution when replacing base styles. This essentially nukes all defaults present and replaces them with your own. You're removing the pointer-events-none class specifically:
https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton-svelte/src/lib/components/Switch/Switch.svelte#L42

We cover the use of each type of prop here if it helps:
https://next.skeleton.dev/docs/get-started/fundamentals#component-props

Can you verify the Lightswitch example displays as expected with the Mono theme on our documentation:
https://next.skeleton.dev/docs/components/switch/svelte/#lightswitch

[PaoloTorregroza]

Hi @endigo9740 yes, the switch works well with the mona theme on the docs webpage.

And thanks for the advice, I was just messing around with al the possible options to see if I was able to found why the styles where not changing when switching the theme.

I forgot to mention im using Firefox.

Im trying skeleton v3 on a personal project, this one https://github.com/PaoloTorregroza/Libreedu/, maybe you will be able to replicate it by running it?

[endigo9740]

@PaoloTorregroza it's late for me, so I'm just stepping away for the day. But I'll put this on my list to review tomorrow. I should be able to take a look and see what's up. Thanks for sharing the repo itself, that'll help a lot!

[PaoloTorregroza]

No problem, I really like skeleton, and just migrated to V3, will be reporting everything weird I find!

[endigo9740]

Hey @PaoloTorregroza so I've had a chance to review this. I think part of the issue is on either side here, yours and ours.

First up, this will be easier to explain with a visual diagram. Here's what the structure of the markup looks like for the component. We'll focus on the GREEN parts here as those are what's visible.

In your code snippet, you're modifying the Control and the Icon.

• Control: Affects the pill-shaped box behind the animated Thumb element
• Icon: Affects the SVG icon inside the Thumb element

For either, you're setting the styles for a specific state, such as Active/Inactive. Which means a color will be applied in those states. However, I don't think you're taking into account light and dark mode. We provide some documentation covering how this works here:
https://next.skeleton.dev/docs/guides/mode#styling-elements

Without the presence of a dark: variant, your color changes will ONLY affect the base mode (aka Light mode). So do make sure you're account for this. In most cases, when updating colors, we do advise you consider providing both the base/dark variants -or- utilizing Color Pairings - which control affects BOTH modes.

Additionally, you're using styles such as bg (background) and text for the Icon position. Icons are SVGs, which means their color is affected by two CSS properties: text and fill. While text can work, it's recommended you focus on fill to be a bit more specific. Additionally, we use Presets for some of the default Control styles, which go beyond Color Pairings and include both light/dark background styles, but ALSO text/fill colors. So those can affect the SVG.

On our side - we're unfortunately lacking diagrams like I've shown above to help visualize where in the template each style props is being used, which means some of this information is obscured from end users. But are looking to improve this soon. Until then, the best source of truth will be the component Source Code. Which you can find by tapping the small "Svelte" button at the top of each component page.

To finish up here, I'd typically provide an example of code that implement the desired visual changes. However, it's occurred to me I don't know what you were aiming for. If you can provide a mock or talk me through what you were going for, I can provide a code snippet in return.

Thanks.

[endigo9740]

One more quick suggestion here. If I've overwhelmed you with info above, consider doing this. It's a nice little trick:

1. Remove all custom style props so you strip the component back down to it's defaults. Reference from the doc examples if needed.
2. Slowly add style changes one by one and ensure they are affecting what you want to do.
3. Be sure to flip between light/dark mode as you go, to ensure the style affects what you intend
4. When adding a style for the first time, considering adding a super obvious class like bg-green-500 or bg-pink-500 to ensure it's only affecting what you want to change.

Something like this:

<Switch
	name="mode"
	controlInactive="bg-green-500"
	checked={uiModeHandler.uiMode === 'dark'}
	onCheckedChange={handleModeChange}
>
	{#snippet inactiveChild()}<IconSun size="14" />{/snippet}
	{#snippet activeChild()}<IconMoon size="14" />{/snippet}
</Switch>

With this in place, you'll see only the Control's inactive state is affected in base/light mode. For dark mode you could do:

<Switch
	name="mode"
	controlInactive="dark:bg-pink-500"
	checked={uiModeHandler.uiMode === 'dark'}
	onCheckedChange={handleModeChange}
>
	{#snippet inactiveChild()}<IconSun size="14" />{/snippet}
	{#snippet activeChild()}<IconMoon size="14" />{/snippet}
</Switch>

Then you'll see pink in dark mode. Then combine both to come up with something like this:

<Switch
	name="mode"
	controlInactive="bg-green-500 dark:bg-pink-500"
	checked={uiModeHandler.uiMode === 'dark'}
	onCheckedChange={handleModeChange}
>
	{#snippet inactiveChild()}<IconSun size="14" />{/snippet}
	{#snippet activeChild()}<IconMoon size="14" />{/snippet}
</Switch>

Finally replace with the desired colors.

[PaoloTorregroza]

Thanks for the explanation very useful!

Im aiming to achieve what the LightSwitch component did on V2, if the dark mode is enabled the switch will have a white icon inside a dark circle on top of a darker background.

Im trying to achieve exactly what it is in the documentation, but having the dark mode as the active state.

https://next.skeleton.dev/docs/components/switch/svelte

[endigo9740]

@PaoloTorregroza so this will get you in the ballpark. Note I've used Presets here for convenience.

<Switch
	name="mode"
	controlActive="bg-surface-200"
	thumbInactive="preset-filled-surface-950-50"
	thumbActive="preset-filled-surface-950-50"
	bind:checked={mode}
	onCheckedChange={handleModeChange}
>
	{#snippet inactiveChild()}<IconMoon size="14" />{/snippet}
	{#snippet activeChild()}<IconSun size="14" />{/snippet}
</Switch>

Here is is in the Cerberus theme, but should be close in Mona.

[PaoloTorregroza]

Thanks, it is working great, I appreciate the explanation!

I think I found an actual bug with the Avatar component but that might be worth discussing on another issue.

edit: Nvm, just playing around with what you just showed me I found it was a me problem

[endigo9740]

Glad to hear that worked out Paolo. We'll go ahead and mark this complete in that case.