/tw-toggle

Floating button to toggle dark mode for Tailwind CSS

Primary LanguageJavaScriptMIT LicenseMIT

Tailwind CSS Dark Mode Toggle

Floating button to toggle dark mode for Tailwind CSS

How to use

  1. Enable selector for the dark mode.
/** @type {import('tailwindcss').Config} */

export default {
  darkMode: "selector",
  // ...
};
  1. Optional: Add the data-theme attribute to the html tag.
<html lang="en" class="dark:[color-scheme:dark]">
  <!-- ... -->
</html>
  1. Load the script before the body tag.
<script
  src="https://cdn.jsdelivr.net/gh/gasatrya/tw-toggle@1.0.1/tw-theme-toggle.min.js"
  type="module"
  defer
></script>

Demo

https://tailspace.vercel.app/components/team/team-a.html