Create live-updating reactive theme for dark mode

[kevinghim]

Background

When looking into #15870 I noticed that on Chrome, for the system settings to take affect, I have to close the extension and reopen it. In other words, if the extension is on the open state, the system preference isn't set dynamically. View the video attached to that PR. For the theme change to take affect, the user needs to close and reopen the extension to correctly reflected the light setting.

Solution

Possible solution is to use live-updating reactive theme to update the selected theme dynamically. @darkwing looked into the following as a possible solution: https://codepen.io/darkwing/pen/zYjgWza

window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', event => {
  if (event.matches) {
    //dark mode
    console.log("change to dark mode!")
  } else {
    //light mode
        console.log("change to light mode!")
  }
})