map marker rings keyed on surface, legend parity

frontend/src/components/ShopFloorMap.vue

@@ -38,7 +38,7 @@
           :key="t.machinetypeid"
           class="legend-item"
         >
-          <span class="legend-dot" :style="{ background: getTypeColor(t.machinetype) }"></span>
+          <span class="legend-dot" :style="legendDotStyle(getTypeColor(t.machinetype))"></span>
           {{ t.machinetype }}
         </span>
       </div>
@@ -53,7 +53,7 @@
           :key="subtypeId"
           class="legend-item"
         >
-          <span class="legend-dot" :style="{ background: color }"></span>
+          <span class="legend-dot" :style="legendDotStyle(color)"></span>
           {{ subtypeNames[subtypeId] || `Type ${subtypeId}` }}
         </span>
       </template>
@@ -64,7 +64,7 @@
           :key="assetType"
           class="legend-item"
         >
-          <span class="legend-dot" :style="{ background: color }"></span>
+          <span class="legend-dot" :style="legendDotStyle(color)"></span>
           {{ assetTypeLabels[assetType] || assetType }}
         </span>
       </template>
@@ -240,6 +240,13 @@ const visibleAssetTypes = computed(() => {
   return result
 })
 
+// Legend swatches wear the same ring as the markers they stand for, so the key
+// reads as a key. Without this the dot took a surface-colored border and a light
+// color looked ringed in white next to its black-ringed marker.
+function legendDotStyle(color) {
+  return { background: color, borderColor: markerRingColor(props.theme) }
+}
+
 // Get visible subtypes when a type is selected
 const visibleSubtypes = computed(() => {
   if (!props.selectedAssetType) return {}
@@ -477,9 +484,9 @@ function renderMarkers() {
     const marker = L.circleMarker([leafletY, leafletX], {
       radius: 6,
       fillColor: color,
-      // Ring picked from the fill, not fixed white - a white ring on a light
-      // marker vanished against the light (white) blueprint.
-      color: markerRingColor(color),
+      // Ring keyed on the theme's surface: dark on the white blueprint, light on
+      // the dark one. A fixed white ring vanished against the light blueprint.
+      color: markerRingColor(props.theme),
       weight: 2,
       fillOpacity: 1,
       renderer: canvasRenderer
@@ -630,6 +637,8 @@ watch(() => props.machines, (newVal, oldVal) => {
 watch(() => props.theme, (newTheme) => {
   if (imageOverlay && map) {
     imageOverlay.setUrl(blueprintUrlFor(newTheme))
+    // Marker rings are keyed on the surface, so they have to be redrawn too.
+    renderMarkers()
   }
 })