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:
parent
721e630a34
commit
2cf0bc0d97
5 changed files with 17 additions and 23 deletions
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue