How to make dark mode work?

[lairdresearch]

I'm using svelect in a svelte 5 app under the Skeleton (https://skeleton.dev) framework and I'm having some issues with the styling. In particular, the css does not use class based styling, rather everything is done with css variables.

When I modify the variables, there's no good way to have a dark mode variant. ie. --sv-bg="white dark:black" is not going to work. I think you could use a version with class variables instead, or alternatively you need to double up the css variables to include a dark variant (eg. --sv-bg and --sv-bg-dark).

My current workaround is to detect dark mode and change the value (i.e. --sv-bg={is_dark ? 'black' : 'white'}) -- not the best approach I think.

OR I'm doing this totally wrong and I haven't read the documentation properly. Any ideas on how to deal with dark mode?

[mskocik]

Check the "theme" page in documentation. There is complete CSS example (switch themes to see different CSS)

[github-actions]

This issue is stale because it has been open 21 days with no activity. Remove stale label or comment or this will be closed in 3 days.