popup.js

document.addEventListener("DOMContentLoaded", async function () {
  const toggle = document.getElementById("darkModeToggle");
  const status = document.getElementById("status");

  // Get current tab
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  // Get current dark mode state
  const result = await chrome.storage.sync.get([`darkMode_${tab.url}`]);
  const isDarkMode = result[`darkMode_${tab.url}`] || false;

  // Set toggle state
  toggle.checked = isDarkMode;
  updateStatus(isDarkMode);

  // Handle toggle change
  toggle.addEventListener("change", async function () {
    const isEnabled = toggle.checked;

    // Save state
    await chrome.storage.sync.set({ [`darkMode_${tab.url}`]: isEnabled });

    // Send message to content script
    try {
      await chrome.tabs.sendMessage(tab.id, {
        action: "toggleDarkMode",
        enabled: isEnabled,
      });
      updateStatus(isEnabled);
    } catch (error) {
      console.log("Error sending message:", error);
      // Reload the page if content script isn't loaded
      chrome.tabs.reload(tab.id);
    }
  });

  function updateStatus(isDark) {
    status.textContent = isDark ? "Dark mode ON" : "Dark mode OFF";
  }
});