Invert dark browse icons in dark mode

diff --git a/app/assets/stylesheets/browse.scss b/app/assets/stylesheets/browse.scss
index 30cb25c00fbc5ab08c139b0b8a1188cdbffd87be..5aa6a499c0e23154bc157f701d077d20a2a4e194 100644 (file)
--- a/app/assets/stylesheets/browse.scss
+++ b/app/assets/stylesheets/browse.scss
@@ -4,74 +4,74 @@ $map-sidebar-icons: (
 
   ".aeroway.aerodrome": ("filename": "aerodrome.p.16.png"),
   
-  ".amenity.atm": ("filename": "amenity_atm.16.png"),
-  ".amenity.bank": ("filename": "amenity_bank.16.png"),
-  ".amenity.bar": ("filename": "amenity_bar.16.png"),
-  ".amenity.bench": ("filename": "amenity_bench.16.png"),
-  ".amenity.biergarten": ("filename": "amenity_biergarten.16.png"),
+  ".amenity.atm": ("filename": "amenity_atm.16.png", "invert": true),
+  ".amenity.bank": ("filename": "amenity_bank.16.png", "invert": true),
+  ".amenity.bar": ("filename": "amenity_bar.16.png", "invert": true),
+  ".amenity.bench": ("filename": "amenity_bench.16.png", "invert": true),
+  ".amenity.biergarten": ("filename": "amenity_biergarten.16.png", "invert": true),
   ".amenity.bicycle_parking": ("filename": "amenity_bicycle_parking.16.png"),
   ".amenity.bicycle_rental": ("filename": "transport_rental_bicycle.16.png"),
   ".amenity.bus_station": ("filename": "bus_station.n.16.png"),
-  ".amenity.cafe": ("filename": "amenity_cafe.16.png"),
+  ".amenity.cafe": ("filename": "amenity_cafe.16.png", "invert": true),
   ".amenity.car_rental": ("filename": "transport_rental_car.16.png"),
   ".amenity.car_sharing": ("filename": "car_share.p.16.png"),
-  ".amenity.cinema": ("filename": "amenity_cinema.16.png"),
-  ".amenity.courthouse": ("filename": "amenity_courthouse.16.png"),
+  ".amenity.cinema": ("filename": "amenity_cinema.16.png", "invert": true),
+  ".amenity.courthouse": ("filename": "amenity_courthouse.16.png", "invert": true),
   ".amenity.dentist": ("filename": "amenity_dentist.16.png"),
   ".amenity.doctors": ("filename": "amenity_doctors.16.png"),
-  ".amenity.drinking_water": ("filename": "amenity_drinking_water.16.png"),
+  ".amenity.drinking_water": ("filename": "amenity_drinking_water.16.png", "invert": true),
   ".amenity.embassy": ("filename": "amenity_embassy.16.png"),
-  ".amenity.fast_food": ("filename": "amenity_fast_food.16.png"),
-  ".amenity.fire_station": ("filename": "amenity_fire_station.16.png"),
+  ".amenity.fast_food": ("filename": "amenity_fast_food.16.png", "invert": true),
+  ".amenity.fire_station": ("filename": "amenity_fire_station.16.png", "invert": true),
   ".amenity.fuel": ("filename": "amenity_fuel.16.png"),
   ".amenity.hospital": ("filename": "amenity_hospital.16.png"),
-  ".amenity.library": ("filename": "library.p.16.png"),
+  ".amenity.library": ("filename": "library.p.16.png", "invert": true),
   ".amenity.nursery": ("filename": "education_nursery.p.16.png"),
-  ".amenity.nightclub": ("filename": "amenity_nightclub.16.png"),
+  ".amenity.nightclub": ("filename": "amenity_nightclub.16.png", "invert": true),
   ".amenity.parking": ("filename": "parking.p.16.png"),
   ".amenity.pharmacy": ("filename": "amenity_pharmacy.16.png"),
-  ".amenity.place_of_worship": ("filename": "amenity_place_of_worship.16.png"),
-  ".amenity.police": ("filename": "amenity_police.16.png"),
-  ".amenity.post_box": ("filename": "post_box.p.16.png"),
-  ".amenity.post_office": ("filename": "post_office.p.16.png"),
-  ".amenity.prison": ("filename": "amenity_prison.16.png"),
-  ".amenity.pub": ("filename": "amenity_pub.16.png"),
-  ".amenity.restaurant": ("filename": "amenity_restaurant.16.png"),
-  ".amenity.recycling": ("filename": "amenity_recycling.16.png"),
+  ".amenity.place_of_worship": ("filename": "amenity_place_of_worship.16.png", "invert": true),
+  ".amenity.police": ("filename": "amenity_police.16.png", "invert": true),
+  ".amenity.post_box": ("filename": "post_box.p.16.png", "invert": true),
+  ".amenity.post_office": ("filename": "post_office.p.16.png", "invert": true),
+  ".amenity.prison": ("filename": "amenity_prison.16.png", "invert": true),
+  ".amenity.pub": ("filename": "amenity_pub.16.png", "invert": true),
+  ".amenity.restaurant": ("filename": "amenity_restaurant.16.png", "invert": true),
+  ".amenity.recycling": ("filename": "amenity_recycling.16.png", "invert": true),
   ".amenity.school": ("filename": "education_school.p.16.png"),
   ".amenity.shelter": ("filename": "shelter2.p.16.png"),
   ".amenity.taxi": ("filename": "amenity_taxi.16.png"),
-  ".amenity.telephone": ("filename": "telephone.p.16.png"),
-  ".amenity.theatre": ("filename": "amenity_theatre.16.png"),
-  ".amenity.toilets": ("filename": "amenity_toilets.16.png"),
-  ".amenity.townhall": ("filename": "amenity_townhall.16.png"),
+  ".amenity.telephone": ("filename": "telephone.p.16.png", "invert": true),
+  ".amenity.theatre": ("filename": "amenity_theatre.16.png", "invert": true),
+  ".amenity.toilets": ("filename": "amenity_toilets.16.png", "invert": true),
+  ".amenity.townhall": ("filename": "amenity_townhall.16.png", "invert": true),
   ".amenity.university": ("filename": "education_university.p.16.png"),
   ".amenity.veterinary": ("filename": "health_veterinary.p.16.png"),
-  ".amenity.waste_basket": ("filename": "amenity_waste_basket.16.png"),
+  ".amenity.waste_basket": ("filename": "amenity_waste_basket.16.png", "invert": true),
 
-  ".barrier.gate": ("filename": "gate2.p.16.png"),
+  ".barrier.gate": ("filename": "gate2.p.16.png", "invert": true),
 
   ".highway.bus_stop": ("filename": "highway_bus_stop.16.png"),
   ".highway.mini_roundabout": ("filename": "mini_round.p.16.png"),
-  ".highway.traffic_signals": ("filename": "traffic_light.png"),
+  ".highway.traffic_signals": ("filename": "traffic_light.png", "invert": true),
   ".highway.turning_circle": ("filename": "turning_circle.p.16.png"),
 
-  ".historic.archaeological_site": ("filename": "historic_archaeological_site.16.png"),
-  ".historic.castle": ("filename": "tourist_castle.p.16.png"),
-  ".historic.memorial": ("filename": "historic_memorial.16.png"),
-  ".historic.monument": ("filename": "historic_monument.16.png"),
-  ".historic.ruins": ("filename": "tourist_ruins.p.16.png"),
-  ".historic.wreck": ("filename": "tourist_wreck.p.16.png"),
+  ".historic.archaeological_site": ("filename": "historic_archaeological_site.16.png", "invert": true),
+  ".historic.castle": ("filename": "tourist_castle.p.16.png", "invert": true),
+  ".historic.memorial": ("filename": "historic_memorial.16.png", "invert": true),
+  ".historic.monument": ("filename": "historic_monument.16.png", "invert": true),
+  ".historic.ruins": ("filename": "tourist_ruins.p.16.png", "invert": true),
+  ".historic.wreck": ("filename": "tourist_wreck.p.16.png", "invert": true),
 
   ".man_made.lighthouse": ("filename": "man_made_lighthouse.16.png"),
-  ".man_made.water_tower": ("filename": "man_made_water_tower.16.png"),
-  ".man_made.windmill": ("filename": "man_made_windmill.16.png"),
+  ".man_made.water_tower": ("filename": "man_made_water_tower.16.png", "invert": true),
+  ".man_made.windmill": ("filename": "man_made_windmill.16.png", "invert": true),
 
   ".natural.tree": ("filename": "tree.p.16.png"),
 
   ".railway.halt": ("filename": "halt.p.16.png"),
   ".railway.station": ("filename": "station.p.16.png"),
-  ".railway.level_crossing": ("filename": "level_crossing.p.16.png"),
+  ".railway.level_crossing": ("filename": "level_crossing.p.16.png", "invert": true),
 
   ".shop": ("filename": "shop_convenience.p.16.png"),
   ".shop.alcohol": ("filename": "shop_alcohol.16.png"),
@@ -109,9 +109,9 @@ $map-sidebar-icons: (
   ".tourism.hostel": ("filename": "tourism_hostel.16.png"),
   ".tourism.hotel": ("filename": "tourism_hotel.16.png"),
   ".tourism.motel": ("filename": "tourism_motel.16.png"),
-  ".tourism.museum": ("filename": "tourism_museum.16.png"),
-  ".tourism.picnic_site": ("filename": "tourism_picnic_site.16.png"),
-  ".tourism.viewpoint": ("filename": "view_point.p.16.png"),
+  ".tourism.museum": ("filename": "tourism_museum.16.png", "invert": true),
+  ".tourism.picnic_site": ("filename": "tourism_picnic_site.16.png", "invert": true),
+  ".tourism.viewpoint": ("filename": "view_point.p.16.png", "invert": true),
   ".tourism.wilderness_hut": ("filename": "tourism_wilderness_hut.16.png"),
 
   /* Ways */
@@ -158,11 +158,11 @@ $map-sidebar-icons: (
 
   ".leisure.golf_course": ("filename": "golf.png"),
   ".leisure.park": ("filename": "park.png"),
-  ".leisure.picnic_table": ("filename": "tourism_picnic_site.16.png"),
-  ".leisure.playground": ("filename": "leisure_playground.16.png"),
+  ".leisure.picnic_table": ("filename": "tourism_picnic_site.16.png", "invert": true),
+  ".leisure.playground": ("filename": "leisure_playground.16.png", "invert": true),
   ".leisure.pitch": ("filename": "pitch.png"),
   ".leisure.nature_reserve": ("filename": "reserve.png"),
-  ".leisure.water_park": ("filename": "leisure_water_park.16.png"),
+  ".leisure.water_park": ("filename": "leisure_water_park.16.png", "invert": true),
 
   ".natural.grassland": ("filename": "grassland.png"),
   ".natural.heath": ("filename": "heathland.png"),

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 8a5aa142cc6de9506430166912fae3ee36a30487..eba3df61be6ca6e4b13012cd65b812b6904e2d78 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1032,4 +1032,12 @@ img.trace_image {
   .browse-section #{$class}::before {
     content: image-url('browse/#{map.get($item, "filename")}');
   }
+
+  @if map.get($item, "invert") {
+    @include color-mode(dark) {
+      .browse-section #{$class}::before {
+        filter: invert(.8) hue-rotate(180deg);
+      }
+    }
+  }
 }