background.js

chrome.action.onClicked.addListener(async (tab) => {     ///runs when you click the extension's icon in the Chrome toolbar
  const [{ result: isDark }] = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => !!document.getElementById('dark-mode-style') //converts the value to a boolean(true if it exists and false if not)
  });

  if (isDark) {
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        const styleEl = document.getElementById('dark-mode-style');
        if (styleEl) styleEl.remove();
      }
    });
  } else {
    await chrome.scripting.executeScript({ ///runs a small function inside the current webpage 
      target: { tabId: tab.id },
      func: () => {
        const styleEl = document.createElement('style');
        styleEl.id = 'dark-mode-style';
        styleEl.textContent = `
          html {
            filter: invert(99%) hue-rotate(180deg);
            background-color: #fefefe;
          }
          img, video, iframe {
            filter: invert(99%) hue-rotate(180deg);
          }
        `;
        document.head.appendChild(styleEl);
      }
    });
  }
});