Dark mode

Smelte uses css pseudo-class variant feature of Tailwind to enable dark mode. Basic dark mode switch looks like this:

<button bind:value={$darkMode}>Toggle dark mode</button>

This will append mode-dark class to the document body which will enable all generated classes preceded by pseudo-class "dark:". By default smelte generates following variants:

backgroundColor: ["dark", "dark-hover", "hover"],
borderColor: ["dark", "dark-focus"],
textColor: ["dark", "dark-hover", "dark-active"]

Now you can use dark theme classes like dark:bg-white (try using the theme toggle on the top right).

<div class="duration-200 ease-in p-10 my-10 bg-black dark:bg-white text-white dark:text-black">
  I am a {$darkMode ? "dark" : "light"} div.
</div>

If you don't need dark mode at all, you can pass darkMode: false to the smelte-rollup-plugin and it will generate no extra CSS.