Always react on color scheme changes, even when permanent is set

GoogleChromeLabs · Oct 22, 2019 · ac48837 · ac48837
1 parent 30c699e
commit ac48837
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 101 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dark-mode-toggle",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "Web Component that toggles dark mode 🌒",
   "main": "./src/dark-mode-toggle.mjs",
   "browser": "src/dark-mode-toggle.mjs",
@@ -38,9 +38,9 @@
     "eslint-config-google": "^0.14.0",
     "http-server": "^0.11.1",
     "shx": "^0.3.2",
-    "stylelint": "^11.0.0",
+    "stylelint": "^11.1.1",
     "stylelint-config-standard": "^19.0.0",
-    "terser": "^4.3.4"
+    "terser": "^4.3.9"
   },
   "eslintConfig": {
     "parserOptions": {

diff --git a/src/dark-mode-toggle.mjs b/src/dark-mode-toggle.mjs
@@ -135,13 +135,11 @@ export class DarkModeToggle extends HTMLElement {
     // Does the browser support native `prefers-color-scheme`?
     const hasNativePrefersColorScheme =
         matchMedia(MQ_DARK).media !== NOT_ALL;
-    // Listen to `prefers-color-scheme` changes, unless `permanent` is true.
+    // Listen to `prefers-color-scheme` changes.
     if (hasNativePrefersColorScheme) {
       matchMedia(MQ_DARK).addListener(({matches}) => {
-        if (!this.permanent) {
-          this.mode = matches ? DARK : LIGHT;
-          this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
-        }
+        this.mode = matches ? DARK : LIGHT;
+        this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
       });
     }
     // Set initial state, giving preference to a remembered value, then the