// tailwind.config.js
export default {
  darkMode: 'class',
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background: {
          light: "#ffffff",
          dark: "#0f172a",
        },
        text: {
          light: "#1f2937",
          dark: "#f8fafc",
        },
      },
    },
  },
  plugins: [],
}

<div class="bg-background-light text-text-light dark:bg-background-dark dark:text-text-dark">
  <h1 class="text-3xl font-bold">Hello, Tailwind!</h1>
  <p>Lorem ipsum dolor sit amet</p>
  
  <button data-theme="light" id="btn-light">☀️ Light</button>
  <button data-theme="dark" id="btn-dark>🌙 Dark</button>
  <button data-theme="system" id="btn-system>💻 System</button>

</div>

const html = document.documentElement;

  // Set theme
  function setTheme(mode) {
    if (mode === "light") {
      html.classList.remove("dark");
      localStorage.setItem("theme", "light");
    } 
    else if (mode === "dark") {
      html.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } 
    else if (mode === "system") {
      localStorage.removeItem("theme"); 
      applySystemTheme();
    }
  }

  // Apply system preference
  function applySystemTheme() {
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    if (localStorage.theme === "dark" || (!localStorage.theme && prefersDark)) {
      html.classList.add("dark");
    } else {
      html.classList.remove("dark");
    }
  }

  // Initialize theme
  function initTheme() {
    applySystemTheme();
    window.matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", applySystemTheme);
  }

  // Start
  initTheme();

  // Button events
  document.getElementById("btn-light").addEventListener("click", () => setTheme("light"));
  document.getElementById("btn-dark").addEventListener("click", () => setTheme("dark"));
  document.getElementById("btn-system").addEventListener("click", () => setTheme("system"));

  const html = document.documentElement;
  const applyTheme = () => {
    const prefersDark = matchMedia("(prefers-color-scheme: dark)").matches;
    const theme = localStorage.theme ?? (prefersDark ? "dark" : "light");
    html.classList.toggle("dark", theme === "dark");
  };

  applyTheme();
  matchMedia("(prefers-color-scheme: dark)").addEventListener("change", applyTheme);

  document.querySelectorAll("[data-theme]").forEach(btn =>
    btn.addEventListener("click", () => {
      const t = btn.dataset.theme;
      t === "system" ? localStorage.removeItem("theme") : localStorage.setItem("theme", t);
      applyTheme();
    })
  );