diff --git a/styling/media-queries/match-media/map-projection/dark.mapml b/styling/media-queries/match-media/map-projection/dark.mapml
index 8fdf7b5..34820a8 100644
--- a/styling/media-queries/match-media/map-projection/dark.mapml
+++ b/styling/media-queries/match-media/map-projection/dark.mapml
@@ -8,11 +8,8 @@
     <map-meta name="extent" content="top-left-easting=-11625919, top-left-northing=5565456, bottom-right-easting=-11479160, bottom-right-northing=5494446"></map-meta>
   </map-head>
   <map-body>
-    <map-extent label="CBMT - Lambert" units="CBMTILE" checked >
-      <map-input name="z" type="zoom" min="0" max="18"></map-input>
-      <map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
-      <map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
-      <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
+    <map-extent units="OSMTILE" checked="checked" hidden="hidden">
+      <map-link rel="tile" type="application/pmtiles" tref="https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark"></map-link>
     </map-extent>
   </map-body>
-</mapml->
+</mapml->
\ No newline at end of file
diff --git a/styling/media-queries/match-media/map-projection/index.html b/styling/media-queries/match-media/map-projection/index.html
index 7fde7ab..bdd5f7b 100644
--- a/styling/media-queries/match-media/map-projection/index.html
+++ b/styling/media-queries/match-media/map-projection/index.html
@@ -8,7 +8,7 @@
   <title>Map Projection Toggle</title>
   <script type="module" src="../../../../dist/mapml.js"></script>
   <link rel="stylesheet" href="../../../../global.css">
-  <style>
+  <style media="">
     body {
       display: flex;
     }
@@ -36,44 +36,47 @@
 </head>
 
 <body>
-  <template id="layers">
-    <map-layer id="OSMTILE" src="light.mapml" checked></map-layer>
-    <map-layer id="CBMTILE" checked>
-      <map-extent label="CBMT - Lambert" units="CBMTILE" checked >
-        <map-input name="z" type="zoom" min="0" max="18"></map-input>
-        <map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
-        <map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
-        <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
-      </map-extent>
-    </map-layer>
-  </template>
 
   <script>
     document.addEventListener('DOMContentLoaded', () => {
       const map = document.querySelector('mapml-viewer');
-      const template = document.querySelector('#layers');
-
-      const OSM = template.content.querySelector('#OSMTILE').cloneNode(true);
-      const CBMT = template.content.querySelector('#CBMTILE').cloneNode(true);
-
-      const loadLayer = (projection) => {
-        map.innerHTML = '';
-        map.setAttribute('projection', projection);
+      let projectionMatcher = map.matchMedia('(map-projection: OSMTILE)'),
+            osmtile = map.querySelector('#OSMTILE'),
+            cbmtile = map.querySelector('#CBMTILE');
 
-        const layer = projection === 'OSMTILE' 
-          ? OSM.cloneNode(true)
-          : CBMT.cloneNode(true);
-        map.appendChild(layer);
+      const hideLayer = (matchesOSMTILE) => {
+        map.whenLayersReady().then(() => {
+          if (matchesOSMTILE) {
+            cbmtile.setAttribute('hidden','hidden');
+            osmtile.removeAttribute('hidden');
+          } else {
+            osmtile.setAttribute('hidden','hidden');
+            cbmtile.removeAttribute('hidden');
+          }
+        });
       };
-
-      loadLayer('OSMTILE');
-
-      document.querySelector('.switchOSM').addEventListener('click', () => loadLayer('OSMTILE'));
-      document.querySelector('.switchCBMT').addEventListener('click', () => loadLayer('CBMTILE'));
+      hideLayer(projectionMatcher.matches === 'true');
+      document.querySelector('.switchOSM').addEventListener('click', () => map.projection='OSMTILE');
+      document.querySelector('.switchCBMT').addEventListener('click', () => map.projection='CBMTILE');
+              
+      const changeHandler = (e) => {
+          let matchesOSMTILE = projectionMatcher.matches === 'true';
+          hideLayer(matchesOSMTILE); 
+        };
+        projectionMatcher.addEventListener('change', changeHandler);
     });
   </script>
 
   <mapml-viewer projection="OSMTILE" zoom="9" lat="44.630550504861795" lon="-103.86611938476564" controls>
+    <map-layer media="(map-projection: OSMTILE)" id="OSMTILE" src="light.mapml" checked></map-layer>
+    <map-layer media="(map-projection: CBMTILE)" id="CBMTILE" checked>
+      <map-extent label="CBMT - Lambert" units="CBMTILE" checked >
+        <map-input name="z" type="zoom" min="0" max="18"></map-input>
+        <map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
+        <map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
+        <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
+      </map-extent>
+    </map-layer>
   </mapml-viewer>
 
   <div class="description">
diff --git a/styling/media-queries/match-media/prefers-color-scheme/dark.mapml b/styling/media-queries/match-media/prefers-color-scheme/dark.mapml
index 607a3e6..34820a8 100644
--- a/styling/media-queries/match-media/prefers-color-scheme/dark.mapml
+++ b/styling/media-queries/match-media/prefers-color-scheme/dark.mapml
@@ -1,16 +1,15 @@
 <mapml- xmlns="http://www.w3.org/1999/xhtml">
   <map-head>
-    <map-title>Canada Base Map - Transportation (CBMT)</map-title>
-    <map-meta http-equiv="Content-Type" content="text/mapml;projection=CBMTILE"></map-meta>
-    <map-meta charset="utf-8"></map-meta>
-    <map-link rel="license" href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285" map-title="Canada Base Map © Natural Resources Canada"/>
+    <map-title>pmtiles - dark theme</map-title>
+    <map-link rel="stylesheet" type="application/pmtiles+stylesheet" href="darkTheme.js"></map-link>
+    <map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
+    <map-link rel="self style" title="Dark theme" href="dark.mapml"></map-link>
+    <map-link rel="style" title="Light theme" href="light.mapml"></map-link>
+    <map-meta name="extent" content="top-left-easting=-11625919, top-left-northing=5565456, bottom-right-easting=-11479160, bottom-right-northing=5494446"></map-meta>
   </map-head>
   <map-body>
-    <map-extent units="CBMTILE"  checked="checked" hidden="hidden">
-      <map-input name="z" type="zoom"  value="17" min="0" max="17"></map-input>
-      <map-input name="y" type="location" units="tilematrix" axis="row" min="29750"  max="34475"></map-input>
-      <map-input name="x" type="location" units="tilematrix" axis="column" min="26484"  max="32463"></map-input>
-      <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" />
+    <map-extent units="OSMTILE" checked="checked" hidden="hidden">
+      <map-link rel="tile" type="application/pmtiles" tref="https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark"></map-link>
     </map-extent>
   </map-body>
-</mapml-> 
\ No newline at end of file
+</mapml->
\ No newline at end of file
