Remove forced theme switching for maps based on OS theme.

This commit is contained in:
Eugene Burmakin 2025-09-26 19:28:46 +02:00
parent 7990298066
commit 38e3915404
4 changed files with 8 additions and 59 deletions

View file

@ -264,6 +264,7 @@ export default class extends BaseController {
disconnect() {
super.disconnect();
this.removeEventListeners();
if (this.tracksSubscription) {
this.tracksSubscription.unsubscribe();
}
@ -392,7 +393,7 @@ export default class extends BaseController {
baseMaps() {
let selectedLayerName = this.userSettings.preferred_map_layer || "OpenStreetMap";
let maps = createAllMapLayers(this.map, selectedLayerName, this.selfHosted, this.userTheme);
let maps = createAllMapLayers(this.map, selectedLayerName, this.selfHosted);
// Add custom map if it exists in settings
if (this.userSettings.maps && this.userSettings.maps.url) {
@ -424,7 +425,7 @@ export default class extends BaseController {
osmLayer.addTo(this.map);
maps["OpenStreetMap"] = osmLayer;
}
// Note: createAllMapLayers already added the appropriate theme-aware layer to the map
// Note: createAllMapLayers already added the user's preferred layer to the map
}
return maps;
@ -1006,11 +1007,6 @@ export default class extends BaseController {
mapElement.setAttribute('data-user_theme', this.userTheme);
injectThemeStyles(this.userTheme);
// Update location search theme if it exists
if (this.locationSearch) {
this.locationSearch.updateTheme(this.userTheme);
}
// Dispatch theme change event for other controllers
document.dispatchEvent(new CustomEvent('theme:changed', {
detail: { theme: this.userTheme }

View file

@ -45,53 +45,14 @@ export function createMapLayer(map, selectedLayerName, layerKey, selfHosted) {
}
}
// Helper function to apply theme-aware layer selection
function getThemeAwareLayerName(preferredLayerName, userTheme, selfHosted) {
// Only apply theme-aware logic for non-self-hosted (vector) maps
if (selfHosted === "true") {
return preferredLayerName;
}
// Define light and dark layer groups
const lightLayers = ["Light", "White", "Grayscale"];
const darkLayers = ["Dark", "Black"];
let finalLayerName = preferredLayerName;
if (userTheme === "light") {
// If user theme is light and preferred layer is light-compatible, keep it
if (lightLayers.includes(preferredLayerName)) {
finalLayerName = preferredLayerName;
}
// If user theme is light but preferred layer is dark, default to White
else if (darkLayers.includes(preferredLayerName)) {
finalLayerName = "White";
}
} else if (userTheme === "dark") {
// If user theme is dark and preferred layer is dark-compatible, keep it
if (darkLayers.includes(preferredLayerName)) {
finalLayerName = preferredLayerName;
}
// If user theme is dark but preferred layer is light, default to Dark
else if (lightLayers.includes(preferredLayerName)) {
finalLayerName = "Dark";
}
}
return finalLayerName;
}
// Helper function to create all map layers
export function createAllMapLayers(map, selectedLayerName, selfHosted, userTheme = 'dark') {
export function createAllMapLayers(map, selectedLayerName, selfHosted) {
const layers = {};
const mapsConfig = selfHosted === "true" ? rasterMapsConfig : vectorMapsConfig;
// Apply theme-aware selection
const themeAwareLayerName = getThemeAwareLayerName(selectedLayerName, userTheme, selfHosted);
Object.keys(mapsConfig).forEach(layerKey => {
// Create the layer and add it to the map if it's the theme-aware selected layer
const layer = createMapLayer(map, themeAwareLayerName, layerKey, selfHosted);
// Create the layer and add it to the map if it's the user's selected layer
const layer = createMapLayer(map, selectedLayerName, layerKey, selfHosted);
layers[layerKey] = layer;
});

View file

@ -1160,15 +1160,6 @@ class LocationSearch {
new Date(dateString).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
}
updateTheme(newTheme) {
this.userTheme = newTheme;
// Update search button theme if it exists
const searchButton = document.getElementById('location-search-toggle');
if (searchButton) {
applyThemeToButton(searchButton, newTheme);
}
}
}
export { LocationSearch };

View file

@ -75,4 +75,5 @@ export function applyThemeToPanel(panel, userTheme) {
applyThemeToControl(panel, userTheme, {
borderRadius: '4px'
});
}
}