Show map color scheme on user preferences page

[rails.git] / app / assets / stylesheets / common.scss

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 31ce7dd28a2e15f4645b4263e30a4eae99bed57f..d39535417e1d6868c8f2c7b6b3560568d9feac19 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -502,17 +502,29 @@ body.small-nav {
 }
 
 @include color-mode(dark) {
+  .leaflet-container .leaflet-control-attribution a {
+    color: var(--bs-link-color);
+  }
+
+  .leaflet-control-scale-line {
+    border-color: rgba(var(--bs-light-rgb), .75) !important;
+  }
+}
+
+@mixin dark-map-color-scheme {
   .leaflet-tile-container .leaflet-tile,
   .mapkey-table-entry td:first-child > * {
     filter: brightness(.8);
   }
+}
 
-  .leaflet-control-attribution a {
-    color: var(--bs-link-color);
-  }
+body[data-map-theme="dark"] {
+  @include dark-map-color-scheme;
+}
 
-  .leaflet-control-scale-line {
-    border-color: rgba(var(--bs-light-rgb), .75) !important;
+@include color-mode(dark) {
+  body:not([data-map-theme]) {
+    @include dark-map-color-scheme;
   }
 }
 
@@ -973,6 +985,10 @@ img.trace_image {
   .node, .way, .relation {
     margin-left: 25px;
   }
+
+  .node::before     { content: image-url('browse/node.svg'); }
+  .way::before      { content: image-url('browse/way.svg'); }
+  .relation::before { content: image-url('browse/relation.svg'); }
 }
 
 @each $class, $item in $map-sidebar-icons {