React on prefers-color-scheme changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dark-mode-toggle",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Web Component that toggles dark mode 🌒",
   "main": "./src/dark-mode-toggle.mjs",
   "browser": "src/dark-mode-toggle.mjs",
@@ -11,6 +11,7 @@
     "dist"
   ],
   "scripts": {
+    "start": "npx http-server && echo \"Server running on http://localhost:8080/demo/\"",
     "clean": "rm -rf ./dist && mkdir dist",
     "lint:js": "npx eslint './src/*.mjs' --fix && npx eslint './demo/*.mjs' --fix",
     "lint:css": "cp ./src/dark-mode-toggle.mjs ./src/dark-mode-toggle.html && npx stylelint './src/*.html' --fix && cp ./src/dark-mode-toggle.html ./src/dark-mode-toggle.mjs && rm ./src/dark-mode-toggle.html && npx stylelint './demo/*.css' --fix",
@@ -35,9 +36,10 @@
   "devDependencies": {
     "eslint": "^6.1.0",
     "eslint-config-google": "^0.13.0",
+    "http-server": "^0.11.1",
     "stylelint": "^10.1.0",
     "stylelint-config-standard": "^18.3.0",
-    "terser": "^4.1.2"
+    "terser": "^4.1.3"
   },
   "eslintConfig": {
     "parserOptions": {
@@ -75,6 +77,5 @@
         }
       ]
     }
-  },
-  "dependencies": {}
+  }
 }

src/dark-mode-toggle.mjs

@@ -302,6 +302,14 @@ export class DarkModeToogle extends HTMLElement {
     // Does the browser support native `prefers-color-scheme`?
     const hasNativePrefersColorScheme =
         win.matchMedia('(prefers-color-scheme)').media !== 'not all';
+    // Listen to `prefers-color-scheme` changes, unless `permanent` is true.
+    if (hasNativePrefersColorScheme) {
+      win.matchMedia(MQ_DARK).addListener(({matches}) => {
+        if (!this.permanent) {
+          this.mode = matches ? DARK : LIGHT;
+        }
+      });
+    }
     // Set initial state, giving preference to a remembered value, then the
     // native value (if supported), and eventually defaulting to a light
     // experience.