Darkened map tiles for the three dark themes

assets/css/cyborg/overrides.css

@@ -1,3 +1,26 @@
 /*!
  * No overrides for the default theme as it aligns with general.css
-*/
+*/
+
+.leaflet-tile {
+	filter: invert() hue-rotate(180deg) grayscale(0.8) !important;
+}
+
+path.grid-rectangle {
+	stroke: rgba(200, 200, 200, 0.5);
+}
+
+span.grid-text > font {
+	color: rgba(220, 220, 220, 0.7) !important; 
+	-webkit-text-stroke: 1px black !important;
+}
+
+path.grid-confirmed {
+	fill: rgba(144, 238, 144, 0.15) !important;
+	stroke: rgba(144, 238, 144, 0.15) !important;
+}
+
+path.grid-worked {
+	fill: rgba(220, 50, 50, 0.25) !important;
+	stroke: rgba(220, 50, 50, 0.25) !important;
+}

assets/css/darkly/overrides.css

@@ -1,3 +1,26 @@
 /*!
  * No overrides for the default theme as it aligns with general.css
-*/
+*/
+
+.leaflet-tile {
+	filter: invert() hue-rotate(180deg) grayscale(0.8) brightness(1.2) !important;
+}
+
+path.grid-rectangle {
+	stroke: rgba(200, 200, 200, 0.5);
+}
+
+span.grid-text > font {
+	color: rgba(220, 220, 220, 0.85) !important; 
+	-webkit-text-stroke: 1px black !important;
+}
+
+path.grid-confirmed {
+	fill: rgba(144, 238, 144, 0.15) !important;
+	stroke: rgba(144, 238, 144, 0.15) !important;
+}
+
+path.grid-worked {
+	fill: rgba(220, 50, 50, 0.25) !important;
+	stroke: rgba(220, 50, 50, 0.25) !important;
+}

assets/css/superhero/overrides.css

@@ -1,3 +1,26 @@
 /*!
  * No overrides for the default theme as it aligns with general.css
-*/
+*/
+
+.leaflet-tile {
+	filter: brightness(0.7) grayscale(0.6) !important;
+}
+path.grid-rectangle {
+	stroke: rgba(200, 200, 200, 0.5);
+}
+
+span.grid-text > font {
+	color: rgba(220, 220, 220, 0.85) !important;
+	-webkit-text-stroke: 1px black !important;
+}
+
+path.grid-confirmed {
+	fill: rgba(144, 238, 144, 0.3) !important;
+	stroke: rgba(144, 238, 144, 0.3) !important;
+}
+
+path.grid-worked {
+	fill: rgba(220, 50, 50, 0.4) !important;
+	stroke: rgba(220, 50, 50, 0.4) !important;
+}
+

assets/js/leaflet/L.Maidenhead.js

@@ -56,7 +56,7 @@ L.Maidenhead = L.LayerGroup.extend({
 		for (var lon = left; lon < right; lon += (unit*2)) {
 			for (var lat = bottom; lat < top; lat += unit) {
 			var bounds = [[lat,lon],[lat+unit,lon+(unit*2)]];
-			this.addLayer(L.rectangle(bounds, {color: this.options.color, weight: 1, fill:false, interactive: false}));
+			this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.color, weight: 1, fill:false, interactive: false}));
 			//var pont = map.latLngToLayerPoint([lat,lon]);
 			//console.log(pont.x);
 			this.addLayer(this._getLabel(lon+unit-(unit/lcor),lat+(unit/2)+(unit/lcor*c)));
@@ -66,10 +66,10 @@ L.Maidenhead = L.LayerGroup.extend({
 	},
     	
 	_getLabel: function(lon,lat) {
-	  var title_size = new Array(0 ,10,12,16,20,26,12,16,24,36,12  ,14  ,20  ,36  ,60  ,12   ,20   ,36   ,60   ,12      ,24       );
+	  var title_size = new Array(0 ,10,12,16,20,26,15,16,24,36,12  ,14  ,20  ,36  ,60  ,12   ,20   ,36   ,60   ,12      ,24       );
 	  var zoom = map.getZoom();
 	  var size = title_size[zoom]+'px';
-	  var title = '<span style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + this._getLocator(lon,lat) + '</font></span>';
+	  var title = '<span class="grid-text" style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + this._getLocator(lon,lat) + '</font></span>';
       var myIcon = L.divIcon({className: 'my-div-icon', html: title});
       var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false);
       return marker;

assets/js/leaflet/L.MaidenheadColoured.js

@@ -61,14 +61,12 @@ L.Maidenhead = L.LayerGroup.extend({
 			if(grid_two.includes(this._getLocator(lon,lat)) || grid_four.includes(this._getLocator(lon,lat)) || grid_six.includes(this._getLocator(lon,lat))) {
 
 				if(grid_two_confirmed.includes(this._getLocator(lon,lat)) || grid_four_confirmed.includes(this._getLocator(lon,lat)) || grid_six_confirmed.includes(this._getLocator(lon,lat))) {
-					
+					this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle grid-confirmed', color: 'rgba(144,238,144, 0.6)', weight: 1, fillOpacity: 1, fill:true, interactive: false}));
-					this.addLayer(L.rectangle(bounds, {color: 'rgb(144,238,144)', weight: 1, fillOpacity: 0.6, fill:true, interactive: false}));
 				} else {
-
+					this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle grid-worked', color: this.options.color, weight: 1, fillOpacity: 1, fill:true, interactive: false}));
-				this.addLayer(L.rectangle(bounds, {color: this.options.color, weight: 1, fillOpacity: 0.6, fill:true, interactive: false}));
 				}
 			} else {
-				this.addLayer(L.rectangle(bounds, {color: this.options.color, weight: 1, fill:false, interactive: false}));	
+				this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.color, weight: 1, fill:false, interactive: false}));	
 			}
 			//var pont = map.latLngToLayerPoint([lat,lon]);
 			//console.log(pont.x);
@@ -79,10 +77,10 @@ L.Maidenhead = L.LayerGroup.extend({
 	},
     	
 	_getLabel: function(lon,lat) {
-	  var title_size = new Array(0 ,10,12,16,20,26,12,16,24,36,12  ,14  ,20  ,36  ,60  ,12   ,20   ,36   ,60   ,12      ,24       );
+	  var title_size = new Array(0 ,10,12,16,20,26,15,16,24,36,12  ,14  ,20  ,36  ,60  ,12   ,20   ,36   ,60   ,12      ,24       );
 	  var zoom = map.getZoom();
 	  var size = title_size[zoom]+'px';
-	  var title = '<span style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + this._getLocator(lon,lat) + '</font></span>';
+	  var title = '<span class="grid-text" style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + this._getLocator(lon,lat) + '</font></span>';
       var myIcon = L.divIcon({className: 'my-div-icon', html: title});
       var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false);
       return marker;