add dark mode support

Author: Dimitar5555

src/index.html

@@ -93,6 +93,18 @@
         </button>
         <div class="overflow-y-auto">
             <h3>Настройки</h3>
+            Цветова схема:
+            <div class="form-check form-switch ps-2 mb-3">
+                <input type="radio" name="theme" value="auto" id="theme_auto"/>
+                <label for="theme_auto" class="form-check-label">Автоматично</label>
+                <br>
+                <input type="radio" name="theme" value="light" id="theme_light"/>
+                <label for="theme_light" class="form-check-label">Светла</label>
+                <br>
+                <input type="radio" name="theme" value="dark" id="theme_dark"/>
+                <label for="theme_dark" class="form-check-label">Тъмна</label>
+            </div>
+
             Позиции на превозни средства:
             <div class="form-check form-switch ps-2 mb-1">
                 <input type="radio" name="positions_data_source" id="sumc_gtfs" value="gtfs">

src/js/app.js

@@ -270,7 +270,8 @@ function populate_route_table(relevant_vehicles, tbody, table_cell) {
     const btns = [];
     for(const vehicle of relevant_vehicles) {
         const btn = document.createElement('button');
-        btn.classList.add('vehicle-btn', 'btn', 'btn-outline-dark', 'btn-sm');
+        const btn_main_class = is_dark_theme() ? 'btn-outline-light' : 'btn-outline-dark';
+        btn.classList.add('vehicle-btn', 'btn', btn_main_class, 'btn-sm');
         btn.addEventListener('click', (e) => {
             zoom_to_vehicle(vehicle.cgm_id);
         });
@@ -282,7 +283,7 @@ function populate_route_table(relevant_vehicles, tbody, table_cell) {
         btn.setAttribute('data-cgm-id', vehicle.cgm_id);
         if(vehicle.is_unexpected) {
             btn.classList.add('btn-warning');
-            btn.classList.remove('btn-outline-dark');
+            btn.classList.remove(btn_main_class);
             btn.setAttribute('data-is-unexpected', 'true');
             tbody.setAttribute('data-unexpected', 'true');
         }
@@ -396,4 +397,46 @@ function init_settings() {
     const virtual_board_show_relative = get_setting('stop_time_style') === 'absolute';
     const check_el = document.querySelector('#virtual_board_show_relative');
     check_el.toggleAttribute('checked', virtual_board_show_relative);
+
+    const theme = get_setting('theme') || 'auto';
+    apply_theme(theme);
+    const theme_radios = document.querySelectorAll('input[name="theme"]');
+    theme_radios.forEach(radio => {
+        radio.toggleAttribute('checked', radio.value === theme);
+        radio.addEventListener('change', (e) => {
+            if(e.target.checked) {
+                set_setting('theme', e.target.value);
+                apply_theme(e.target.value);
+            }
+        });
+    });
+}
+
+function apply_theme(theme) {
+    const html_el = document.querySelector('html');
+    html_el.classList.remove('light-theme', 'dark-theme');
+    const affected_btns = document.querySelectorAll('.btn-outline-dark, .btn-outline-light');
+    let final_theme = theme;
+    if(theme === 'auto') {
+        const prefers_dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        final_theme = prefers_dark ? 'dark' : 'light';
+    }
+    html_el.setAttribute('data-bs-theme', final_theme);
+    affected_btns.forEach(btn => {
+        btn.classList.toggle('btn-outline-light', final_theme === 'dark');
+        btn.classList.toggle('btn-outline-dark', final_theme === 'light');
+    });
 }
+
+export function is_dark_theme() {
+    const theme = get_setting('theme');
+    if(theme === 'dark') {
+        return true;
+    }
+    else if(theme === 'light') {
+        return false;
+    }
+    else {
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+}

src/js/map_vehicles.js

@@ -5,6 +5,7 @@ import { get_vehicle_model_name } from '/data/models';
 import { stops } from './map_stops';
 import { cache, zoom_to_vehicle } from './app';
 import { determine_time_ago } from './map';
+import { is_dark_theme } from './app';
 
 function generate_vehicle_popup_text(vehicle, cache) {
     const {
@@ -50,10 +51,10 @@ function generate_vehicle_popup_text(vehicle, cache) {
         first_row.appendChild(route_num_span);
         if(car) {
             first_row.appendChild(document.createTextNode(` / ${car}`));
-
+            const btn_main_class = is_dark_theme() ? 'btn-outline-light' : 'btn-outline-dark';
             if(car !== 1 && allCarsOnLine[0].car !== car) {
                 const prev_btn = document.createElement('button');
-                prev_btn.className = 'btn btn-sm btn-outline-dark mx-1';
+                prev_btn.className = `btn btn-sm ${btn_main_class} mx-1`;
                 const i = document.createElement('i');
                 i.className = 'bi bi-arrow-left';
                 prev_btn.appendChild(i);
@@ -68,7 +69,7 @@ function generate_vehicle_popup_text(vehicle, cache) {
 
             if(car !== totalCars) {
                 const next_btn = document.createElement('button');
-                next_btn.className = 'btn btn-sm btn-outline-dark mx-1';
+                next_btn.className = `btn btn-sm ${btn_main_class} mx-1`;
                 const i = document.createElement('i');
                 i.className = 'bi bi-arrow-right';
                 next_btn.appendChild(i);

src/styles.scss

@@ -1,3 +1,37 @@
+html[data-bs-theme="dark"] .panel {
+    background-color: var(--bs-dark);
+}
+
+html[data-bs-theme="dark"] .leaflet-tile-container > img {
+	filter: brightness(0.8);
+}
+
+html[data-bs-theme="dark"] .leaflet-bar > a,
+html[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
+html[data-bs-theme="dark"] .leaflet-popup-tip,
+html[data-bs-theme="dark"] .leaflet-tooltip 
+{
+	background-color: var(--bs-dark);
+	color: #fff !important;
+}
+
+html[data-bs-theme="dark"] .leaflet-tooltip-top::before {
+	border-top-color: var(--bs-dark);
+}
+
+html[data-bs-theme="dark"] .leaflet-tooltip {
+	border: none;
+}
+
+html[data-bs-theme="dark"] .leaflet-control-locate-location-arrow, 
+html[data-bs-theme="dark"] .leaflet-control-locate-spinner {
+	filter: invert(1);
+}
+
+html[data-bs-theme="dark"] .leaflet-container {
+	background: var(--bs-dark);
+}
+
 .panel {
     z-index: 1100;
     background-color: #fff;