script.js

/* =====================================================
   QR Code Generator + Dark Mode (Inverted QR Support)
   ===================================================== */

/* ---------- DOM ELEMENTS ---------- */
const qrInput = document.getElementById("qr-code-url");
const generateBtn = document.getElementById("generate-btn");
const qrContainer = document.getElementById("qrcode");
const themeToggle = document.getElementById("theme-toggle");

/* ---------- STATE ---------- */
// Stores the last generated QR text so we can regenerate on theme change
let currentQRText = "";

/* ---------- QR CODE GENERATION ---------- */
/**
 * Generates a QR code based on the provided text.
 * Automatically inverts QR colors based on theme.
 */
function generateQRCode(text) {
    // Clear any existing QR code
    qrContainer.innerHTML = "";

    // Check if dark mode is active
    const isDarkMode = document.body.classList.contains("dark");

    // Create QR code with theme-aware colors
    new QRCode(qrContainer, {
        text: text,
        width: 200,
        height: 200,
        colorDark: isDarkMode ? "#ffffff" : "#000000",
        colorLight: isDarkMode ? "#121212" : "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
}

/* ---------- GENERATE BUTTON ---------- */
generateBtn.addEventListener("click", () => {
    const value = qrInput.value.trim();

    // Prevent empty QR generation
    if (!value) {
        alert("Please enter text or a URL");
        return;
    }
    currentQRText = value;
    generateQRCode(currentQRText);
});

/* ---------- THEME TOGGLE ---------- */
themeToggle.addEventListener("click", () => {
    document.body.classList.toggle("dark");

    const isDarkMode = document.body.classList.contains("dark");

    // Update toggle button text
    themeToggle.textContent = isDarkMode
        ? "☀️ Light Mode"
        : "🌙 Dark Mode";

    // Regenerate QR to invert colors if QR already exists
    if (currentQRText) {
        generateQRCode(currentQRText);
    }

    // Persist theme preference
    localStorage.setItem("theme", isDarkMode ? "dark" : "light");
});

/* ---------- LOAD SAVED THEME ---------- */
(function loadSavedTheme() {
    const savedTheme = localStorage.getItem("theme");

    if (savedTheme === "dark") {
        document.body.classList.add("dark");
        themeToggle.textContent = "☀️ Light Mode";
    }
})();