Make matchMedia features object return values via a property getter,

allowing dynamic use of the object in event handlers.

Add window.matchMedia query + event listener for color-scheme changes,
allows map to adapt without having to shake it.

Author: prushforth

src/mapml-viewer.js

@@ -995,38 +995,49 @@ export class HTMLMapmlViewerElement extends HTMLElement {
 
     // less obviously useful: aspect-ratio, orientation, (device) resolution, overflow-block, overflow-inline
 
+    const map = this;
     const features = {
       'prefers-lang': {
         type: 'discrete',
-        values: [
-          ...new Set(navigator.languages.map((code) => code.slice(0, 2)))
-        ]
+        get values() {
+          return [
+            ...new Set(navigator.languages.map((code) => code.slice(0, 2)))
+          ];
+        }
       },
       'map-projection': {
         type: 'discrete',
-        values: [this.projection.toLowerCase()] // change this in map-projectionchange event handler
+        get values() {
+          return [map.projection.toLowerCase()]; // change this in map-projectionchange event handler
+        }
       },
       'map-zoom': {
         type: 'range',
         valueType: 'integer',
         canBeNegative: false,
         canBeZero: true,
-        extraValues: {
-          min: 0,
-          max: this.zoom // change this on map-moveend
+        get extraValues() {
+          return {
+            min: 0,
+            max: map.zoom // change this on map-moveend
+          };
         }
       },
       'prefers-color-scheme': {
         type: 'discrete',
-        values: [
-          window.matchMedia('(prefers-color-scheme: dark)').matches
-            ? 'dark'
-            : 'light'
-        ]
+        get values() {
+          return [
+            window.matchMedia('(prefers-color-scheme: dark)').matches
+              ? 'dark'
+              : 'light'
+          ];
+        }
       },
       'prefers-map-content': {
         type: 'discrete',
-        values: M.options.contentPreference
+        get values() {
+          return M.options.contentPreference;
+        }
       }
     };
 
@@ -1124,12 +1135,7 @@ export class HTMLMapmlViewerElement extends HTMLElement {
     });
 
     const observeProperties = () => {
-      const notifyIfChanged = (mapEvent) => {
-        if (mapEvent.name === 'map-projectionchange') {
-          features['map-projection'].values = [this.projection.toLowerCase()];
-        } else if (mapEvent.name === 'map-moveend') {
-          features['map-zoom'].extraValues.max = this.zoom;
-        }
+      const notifyIfChanged = () => {
         const newMatches = solveMediaQueryList(parsedQuery, {
           features,
           solveUnknownFeature
@@ -1145,11 +1151,16 @@ export class HTMLMapmlViewerElement extends HTMLElement {
       // Subscribe to internal events for changes in projection, zoom, and extent
       this.addEventListener('map-projectionchange', notifyIfChanged);
       this.addEventListener('map-moveend', notifyIfChanged);
+      const colorSchemeQuery = window.matchMedia(
+        '(prefers-color-scheme: dark)'
+      );
+      colorSchemeQuery.addEventListener('change', notifyIfChanged);
 
       // Stop observing function
       stopObserving = () => {
         this.removeEventListener('map-projectionchange', notifyIfChanged);
         this.removeEventListener('map-moveend', notifyIfChanged);
+        colorSchemeQuery.removeEventListener('change', notifyIfChanged);
       };
     };