Create live-updating reactive theme for dark mode

## 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!")
}
})
```

Start by locating the extension theme selection and open-state UI, then compare its behavior with the linked CodePen and the window.matchMedia('prefers-color-scheme: dark') change listener shown here. Done means changing the system preference updates the open extension's theme without closing and reopening it; verify this in Chrome.

Written by the indexing model from the issue text.