Fix display of Bootstrap components in dark mode (#364)

Author: cdauth

frontend/src/lib/bootstrap.scss

@@ -4,6 +4,8 @@ $enable-gradients: true;
 
 $secondary: #fff;
 
+$color-mode-type: media-query;
+
 
 // Bootstrap import, see https://getbootstrap.com/docs/5.3/customize/optimize/
 
@@ -107,6 +109,27 @@ html,body {
 	@include button-outline-variant(#6c757d);
 }
 
+// Above, we override $secondary with white like in Bootstrap 3 instead of gray like in Bootstrap 4/5. In dark mode, use gray again.
+@include color-mode(dark) {
+	$color: secondary;
+	$value: $gray-600;
+
+	.btn-#{$color} {
+		@include button-variant($value, $value);
+
+		$border: darken($value, 14%);
+		--#{$prefix}btn-border-color: #{$border};
+		--#{$prefix}btn-hover-border-color: #{darken($border, 12%)};
+		--#{$prefix}btn-active-border-color: #{$border};
+
+		--#{$prefix}btn-hover-bg: #{darken($value, 12%)};
+		--#{$prefix}btn-active-bg: #{darken($value, 12%)};
+		--#{$prefix}btn-disabled-bg: #{darken($value, 12%)};
+
+		@include gradient-y($start-color: $value, $end-color: darken($value, 12%));
+	}
+}
+
 .list-group-item.active a {
 	color: inherit;
 }

frontend/src/lib/components/leaflet-map/leaflet-map.vue

@@ -218,6 +218,10 @@
 				outline: none;
 			}
 
+			.leaflet-pane {
+				color-scheme: only light;
+			}
+
 		}
 
 		&.isNarrow {

frontend/src/lib/components/legend/legend-content.vue

@@ -220,4 +220,8 @@
 			}
 		}
 	}
+
+	.fm-legend-icon {
+		color-scheme: only light;
+	}
 </style>

frontend/src/lib/components/search-box/search-box.vue

@@ -416,9 +416,9 @@
 		cursor: nwse-resize;
 		border: 1px solid #ddd;
 		border-radius: 1000px;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-		background: #fff;
-		color: #666;
+		box-shadow: 0 1px 2px rgba(var(--bs-body-color), .075);
+		background: var(--bs-body-bg);
+		color: var(--bs-secondary-text-emphasis);
 		padding: 2px;
 
 		display: flex;

frontend/src/lib/components/ui/sidebar.vue

@@ -102,7 +102,7 @@
 			</div>
 		</template>
 
-		<nav v-if="!context.isNarrow" class="navbar navbar-expand bg-light">
+		<nav v-if="!context.isNarrow" class="navbar navbar-expand bg-body-tertiary">
 			<div class="container-fluid" :ref="(el) => { if (el) { teleportTargetRef = el as any; } }"></div>
 		</nav>