Add color-scheme attribute for dark/light/system map theming (#279)

* Add color-scheme attribute for dark/light/system map theming

Adds a `color-scheme` attribute to `<lit-google-map>` that forwards the
value to the Google Maps API `colorScheme` option. Accepts `'LIGHT'`,
`'DARK'`, or `'FOLLOW_SYSTEM'`. When omitted the Maps API defaults to
`'LIGHT'`. Attribute changes after initialization are applied via
`setOptions` so the map responds to live updates.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Bump version to 0.0.6

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: dfalling

README.md

@@ -9,6 +9,7 @@ This project is a fork of [lit-google-map](https://github.com/arkadiuszwojcik/li
 - add `zoom_changed`, `center_changed`, and `view_changed` events
 - move to [AdvancedMarkerElement](https://developers.google.com/maps/documentation/javascript/advanced-markers/migration)
 - add location button control for centering map on user's current location
+- add `color-scheme` attribute for dark/light/system color scheme support
 
 ## Table of contents
 
@@ -94,6 +95,7 @@ or/and shapes:
 - '_map-type_' - Map type to display: 'roadmap', 'satellite', 'hybrid', 'terrain'
 - '_center-latitude_'- Latitude of map initial center point
 - '_center-longitude_' - Longitude of map initial center point
+- '_color-scheme_' - Map color scheme: `'LIGHT'`, `'DARK'`, or `'FOLLOW_SYSTEM'` (optional, defaults to `'LIGHT'`)
 
 Example:
 

dist/lit-google-map.bundle.js

@@ -86,6 +86,7 @@ var LitGoogleMap = (function (exports) {
           this.centerLongitude = 150.644;
           this.language = "";
           this.mapId = "DEMO_MAP_ID";
+          this.colorScheme = "";
           this.map = null;
           this.markers = [];
           this.shapes = [];
@@ -104,6 +105,9 @@ var LitGoogleMap = (function (exports) {
               else if (name === "zoom") {
                   this.map.setZoom(this.zoom);
               }
+              else if (name === "color-scheme" && this.colorScheme) {
+                  this.map.setOptions({ colorScheme: this.colorScheme });
+              }
           }
       }
       dispatchViewChanged() {
@@ -176,13 +180,7 @@ var LitGoogleMap = (function (exports) {
           this.updateControls();
       }
       getMapOptions() {
-          return {
-              zoom: this.zoom,
-              center: { lat: this.centerLatitude, lng: this.centerLongitude },
-              mapTypeId: this.mapType,
-              styles: this.styles,
-              mapId: this.mapId,
-          };
+          return Object.assign({ zoom: this.zoom, center: { lat: this.centerLatitude, lng: this.centerLongitude }, mapTypeId: this.mapType, styles: this.styles, mapId: this.mapId }, (this.colorScheme && { colorScheme: this.colorScheme }));
       }
       mapApiLoaded() {
           this.initGMap();
@@ -399,6 +397,10 @@ var LitGoogleMap = (function (exports) {
       n({ type: String, attribute: "map-id" }),
       __metadata("design:type", Object)
   ], exports.LitGoogleMap.prototype, "mapId", void 0);
+  __decorate([
+      n({ type: String, attribute: "color-scheme" }),
+      __metadata("design:type", String)
+  ], exports.LitGoogleMap.prototype, "colorScheme", void 0);
   exports.LitGoogleMap = __decorate([
       t("lit-google-map")
   ], exports.LitGoogleMap);

dist/lit-google-map.bundle.min.js

@@ -15,6 +15,7 @@ let LitGoogleMap = class LitGoogleMap extends LitElement {
         this.centerLongitude = 150.644;
         this.language = "";
         this.mapId = "DEMO_MAP_ID";
+        this.colorScheme = "";
         this.map = null;
         this.markers = [];
         this.shapes = [];
@@ -33,6 +34,9 @@ let LitGoogleMap = class LitGoogleMap extends LitElement {
             else if (name === "zoom") {
                 this.map.setZoom(this.zoom);
             }
+            else if (name === "color-scheme" && this.colorScheme) {
+                this.map.setOptions({ colorScheme: this.colorScheme });
+            }
         }
     }
     dispatchViewChanged() {
@@ -105,13 +109,7 @@ let LitGoogleMap = class LitGoogleMap extends LitElement {
         this.updateControls();
     }
     getMapOptions() {
-        return {
-            zoom: this.zoom,
-            center: { lat: this.centerLatitude, lng: this.centerLongitude },
-            mapTypeId: this.mapType,
-            styles: this.styles,
-            mapId: this.mapId,
-        };
+        return Object.assign({ zoom: this.zoom, center: { lat: this.centerLatitude, lng: this.centerLongitude }, mapTypeId: this.mapType, styles: this.styles, mapId: this.mapId }, (this.colorScheme && { colorScheme: this.colorScheme }));
     }
     mapApiLoaded() {
         this.initGMap();
@@ -328,6 +326,10 @@ __decorate([
     property({ type: String, attribute: "map-id" }),
     __metadata("design:type", Object)
 ], LitGoogleMap.prototype, "mapId", void 0);
+__decorate([
+    property({ type: String, attribute: "color-scheme" }),
+    __metadata("design:type", String)
+], LitGoogleMap.prototype, "colorScheme", void 0);
 LitGoogleMap = __decorate([
     customElement("lit-google-map")
 ], LitGoogleMap);

dist/lit-google-map.esm.js

@@ -1,6 +1,6 @@
 {
   "name": "lit-google-map",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Google Maps web components based on Lit v2",
   "private": false,
   "license": "MIT",

dist/lit-google-map.esm.min.js

@@ -58,6 +58,9 @@ export class LitGoogleMap extends LitElement {
   @property({ type: String, attribute: "map-id" })
   mapId = "DEMO_MAP_ID";
 
+  @property({ type: String, attribute: "color-scheme" })
+  colorScheme: google.maps.ColorScheme | "" = "";
+
   map: google.maps.Map | null = null;
 
   markers: Array<Node> = [];
@@ -78,6 +81,8 @@ export class LitGoogleMap extends LitElement {
         });
       } else if (name === "zoom") {
         this.map.setZoom(this.zoom);
+      } else if (name === "color-scheme" && this.colorScheme) {
+        this.map.setOptions({ colorScheme: this.colorScheme });
       }
     }
   }
@@ -187,6 +192,7 @@ export class LitGoogleMap extends LitElement {
       mapTypeId: this.mapType,
       styles: this.styles,
       mapId: this.mapId,
+      ...(this.colorScheme && { colorScheme: this.colorScheme }),
     };
   }