Dark Mode

Ensure you're using the latest version of LuxeyUI. Use this if you're using CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luxeyui@0.6.3/dist/index.css" />
<script src="https://cdn.jsdelivr.net/npm/luxeyui@0.6.3/dist/index.js" defer></script>

Use this if you're installing via npm:

npm i luxeyui@latest

To enable dark mode, add one of these snippets to your tailwind.config.js file:

tailwind.config = { darkMode: "class" } // For CDN

module.exports = {
  darkMode: "class",
  // ...
}

Modify your CSS file to tweak dark mode to suit your design needs. Use hsla format without the parenthesis and hsla to customize colors:

:root.dark {
  --base-primary: 188.6 100% 46.7%;
  --content-4: 0 0% 99.6%;
}

Add functionality for toggling dark mode. For example:

<input type="checkbox" id="toggler" class="switch" />
<script>
  document.querySelector("#toggler").addEventListener("click", e => {
    document.documentElement.className = e.target.checked ? "dark" : "";
  });
</script>