Chrome Extension Is not saving the value in local storage

I’m trying to build my own custom made dark mode theme in Javascript, it is a chrome extension. It is almost finished, the click handler is working just fine, it makes the website darker and vice versa. However, I want it to save the value so if I turn the webpage darker, I want it to be dark even after I refresh the page, or, open the same page again so it’s still dark (I hope I make sense). At this point once I refresh the page it loses the value, so if dark mode is applied – it becomes white again (and if I open the same page it is white on the second tab). I’m attaching the screenshots, could anyone let me know what’s wrong or what’s causing the issue so I can finally finish the extension.

 **chrome.storage.sync.set({ key: "dark" }, function () {
    console.log("Value is set to " + "dark");
  });
  chrome.storage.sync.get(["key"], function (result) {
    console.log("Value currently is " + result.key);
  });
  //   localStorage.setItem("darkMode", 1);
})();


The manifest.json code:
{
  "name": "chrome extension",
  "description": "Go to dark mode from Light mode and vice versa",
  "version": "1.0.0",
  "manifest_version": 2,
  "background": {
    "scripts": ["popup.js"],
    "persistent": true
  },
  "browser_action": {
    "default_title": "PYL",
    "default_popup": "popup.html"
  },
  "permissions": ["https://*/*", "http://*/*", "tabs", "storage", "activeTab"]
}**