Fix: Karte CSS-Filter statt CartoDB Dark, Social Wrapper 860px

Karte Dark-Mode:
- CSS-Filter statt CartoDB Dark Matter (war zu dunkel)
  invert(93%) hue-rotate(180deg) brightness(0.88) contrast(0.88) saturate(0.85)
  Gleiche OSM-Tiles, Marker bleiben unbeeinflusst (tilePane separater Layer)
- Filter sofort bei Init + bei Theme-Wechsel via MutationObserver

Social:
- Outer Wrapper width:100%;max-width:860px;margin:0 auto
  Header-Karte und Tabs sind jetzt konsistent gleich breit
SW by-v1023, APP_VER 1023
This commit is contained in:
rene 2026-05-16 11:19:37 +02:00
parent 721e630a34
commit 2cf0bc0d97
5 changed files with 17 additions and 23 deletions

View file

@ -533,7 +533,10 @@ window.Page_map = (() => {
_tileLayer = _buildTileLayer();
_tileLayer.addTo(_map);
// Theme-Wechsel → Tile-Layer tauschen
// Sofort Dark-Filter anwenden wenn nötig (nach Tile-Load)
_tileLayer.on('load', _applyTileTheme);
_applyTileTheme();
// Theme-Wechsel → Filter aktualisieren
_themeObserver = new MutationObserver(() => _applyTileTheme());
_themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', _applyTileTheme);
@ -629,28 +632,17 @@ window.Page_map = (() => {
return window.matchMedia('(prefers-color-scheme: dark)').matches;
}
const _OSM_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const _DARK_FILTER = 'invert(93%) hue-rotate(180deg) brightness(0.88) contrast(0.88) saturate(0.85)';
function _buildTileLayer() {
if (_isDarkMode()) {
return L.tileLayer(
'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
{ maxZoom: 19, subdomains: 'abcd' }
);
}
return L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ maxZoom: 19 }
);
return L.tileLayer(_OSM_URL, { maxZoom: 19 });
}
function _applyTileTheme() {
if (!_map || !window.L) return;
const dark = _isDarkMode();
const url = dark
? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
if (_tileLayer) {
_tileLayer.setUrl(url);
}
if (!_map) return;
const tilePaneEl = _map.getPane('tilePane');
if (tilePaneEl) tilePaneEl.style.filter = _isDarkMode() ? _DARK_FILTER : '';
}
function _updateZoomDisplay() {