Floating button to toggle dark mode for Tailwind CSS
- Enable
selectorfor the dark mode.
/** @type {import('tailwindcss').Config} */
export default {
darkMode: "selector",
// ...
};- Optional: Add the
data-themeattribute to thehtmltag.
<html lang="en" class="dark:[color-scheme:dark]">
<!-- ... -->
</html>- Load the script before the
bodytag.
<script
src="https://cdn.jsdelivr.net/gh/gasatrya/tw-toggle@1.0.1/tw-theme-toggle.min.js"
type="module"
defer
></script>