4aiman
8ec95adcaf
The .focusbox tooltip rect stayed white and our .elevation text rule turned its text light — light-on-light, unreadable on the dark chart. Give the box a dark ground with light text (same for the on-line height label), and lighten the near-black guide lines/markers so they show on the dark chart.
112 lines
8.6 KiB
JavaScript
112 lines
8.6 KiB
JavaScript
(function () {
|
|
var LS_DARK = "baldav_bw_dark";
|
|
function isDark() { try { return localStorage.getItem(LS_DARK) === "1"; } catch (e) { return false; } }
|
|
|
|
// Inject the dark rules as a <style> in <head> (no dependency on an external CSS file,
|
|
// and it covers elements created later — e.g. the elevation chart, drawn only once a
|
|
// route exists). Toggling body.bw-dark activates/deactivates everything.
|
|
function injectStyle() {
|
|
if (document.getElementById("baldav-dark-style")) return;
|
|
var st = document.createElement("style");
|
|
st.id = "baldav-dark-style";
|
|
st.textContent = [
|
|
"body.bw-dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(1.5)}",
|
|
"body.bw-dark .leaflet-container{background:#1b1f24}",
|
|
// right sidebar / layers panel
|
|
"body.bw-dark #sidebar,body.bw-dark #sidebar .leaflet-sidebar-content,body.bw-dark .leaflet-sidebar-pane,body.bw-dark .leaflet-control-layers,body.bw-dark .leaflet-control-layers-expanded{background:#20242a!important;color:#dfe3e8!important}",
|
|
"body.bw-dark #sidebar label,body.bw-dark #sidebar span,body.bw-dark #sidebar a,body.bw-dark #sidebar h1,body.bw-dark #sidebar h2{color:#dfe3e8!important}",
|
|
"body.bw-dark #sidebar input[type=text],body.bw-dark #sidebar select{background:#2b3038!important;color:#dfe3e8!important;border-color:#454b54!important}",
|
|
// left toolbar + all leaflet control buttons (zoom, draw, etc.)
|
|
"body.bw-dark .leaflet-bar a,body.bw-dark .leaflet-control-zoom a,body.bw-dark .leaflet-control a,body.bw-dark .leaflet-control button{background:#2b3038!important;color:#fff!important;border-color:#454b54!important}",
|
|
"body.bw-dark .leaflet-bar a:hover,body.bw-dark .leaflet-control a:hover{background:#3a4048!important}",
|
|
// bottom elevation profile panel + footer/stats
|
|
"body.bw-dark #elevation-chart,body.bw-dark #elevation-chart svg,body.bw-dark .elevation,body.bw-dark .elevation svg{background:#20242a!important;color:#dfe3e8!important}",
|
|
"body.bw-dark .elevation .background{background-color:#20242a!important}",
|
|
"body.bw-dark .elevation rect.background,body.bw-dark .elevation .background rect{fill:#20242a!important}",
|
|
"body.bw-dark footer,body.bw-dark #stats-info,body.bw-dark #stats-container,body.bw-dark #stats,body.bw-dark #track_statistics{background:#20242a!important;color:#dfe3e8!important}",
|
|
"body.bw-dark .elevation text,body.bw-dark .elevation .axis text{fill:#dfe3e8!important}",
|
|
"body.bw-dark .elevation .domain,body.bw-dark .elevation .tick line,body.bw-dark .elevation .grid line{stroke:#55606a!important}",
|
|
"body.bw-dark .elevation path.area,body.bw-dark .elevation .area{fill:#2b3038!important;opacity:.6}",
|
|
// elevation SVG axis text (was black on dark)
|
|
"body.bw-dark #elevation-chart text,body.bw-dark #elevation-chart .tick text,body.bw-dark #elevation-chart .axis text{fill:#dfe3e8!important}",
|
|
"body.bw-dark #elevation-chart .tick line,body.bw-dark #elevation-chart .domain,body.bw-dark #elevation-chart path.grid,body.bw-dark #elevation-chart line{stroke:#3a4048!important}",
|
|
// hover tooltip on the elevation chart (.focusbox): its rect is white and our
|
|
// .elevation text rule turned the text light — light-on-light, unreadable. Give the
|
|
// box a dark ground and keep the text light. Same for the on-line height label.
|
|
"body.bw-dark .focusbox rect{fill:rgba(32,36,42,.92)!important;stroke:#667!important}",
|
|
"body.bw-dark .focusbox,body.bw-dark .focusbox text{fill:#dfe3e8!important}",
|
|
"body.bw-dark .height-focus.label rect{fill:rgba(32,36,42,.9)!important;stroke:#667!important}",
|
|
"body.bw-dark .height-focus.label text{fill:#dfe3e8!important}",
|
|
// guide lines/markers were near-black (#141414) — invisible on the dark chart
|
|
"body.bw-dark .focusLine line,body.bw-dark .height-focus.line{stroke:#aab4be!important}",
|
|
"body.bw-dark .height-focus.circle{stroke:#20242a!important}",
|
|
// right vertical sidebar tab strip (layers/settings/data/stats icons)
|
|
"body.bw-dark .leaflet-sidebar-tabs,body.bw-dark .leaflet-sidebar-tabs>ul,body.bw-dark .leaflet-sidebar-tabs li,body.bw-dark .leaflet-sidebar-tabs li a{background:#20242a!important;color:#dfe3e8!important}",
|
|
"body.bw-dark .leaflet-sidebar-tabs li.active a,body.bw-dark .leaflet-sidebar-tabs li a:hover{background:#2b3038!important;color:#fff!important}",
|
|
"body.bw-dark .leaflet-sidebar.collapsed,body.bw-dark .leaflet-sidebar-header{background:#20242a!important;color:#dfe3e8!important}",
|
|
// Bootstrap form controls: search fields, the profile dropdown/select, etc.
|
|
"body.bw-dark input,body.bw-dark textarea,body.bw-dark select,body.bw-dark .form-control,body.bw-dark .custom-select{background:#2b3038!important;color:#dfe3e8!important;border-color:#454b54!important}",
|
|
"body.bw-dark ::placeholder{color:#9aa4ae!important}",
|
|
// dropdown menus (Load, profile chooser)
|
|
"body.bw-dark .dropdown-menu{background:#20242a!important;color:#dfe3e8!important;border-color:#454b54!important}",
|
|
"body.bw-dark .dropdown-item{color:#dfe3e8!important}",
|
|
"body.bw-dark .dropdown-item:hover,body.bw-dark .dropdown-item:focus{background:#2b3038!important;color:#fff!important}",
|
|
// light-styled buttons (incl. those above the elevation chart) → dark; keep coloured btns
|
|
"body.bw-dark .btn-light,body.bw-dark .btn-outline-secondary,body.bw-dark .btn-secondary,body.bw-dark .btn-default,body.bw-dark button.btn:not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]){background:#2b3038!important;color:#dfe3e8!important;border-color:#454b54!important}",
|
|
"body.bw-dark .card,body.bw-dark .modal-content,body.bw-dark .list-group-item,body.bw-dark .popover,body.bw-dark .popover-body{background:#20242a!important;color:#dfe3e8!important}",
|
|
// brouter-web bottom footer buttons / export-image control
|
|
"body.bw-dark footer .btn,body.bw-dark footer button,body.bw-dark #export-to-image,body.bw-dark .leaflet-control button{background:#2b3038!important;color:#dfe3e8!important;border-color:#454b54!important}"
|
|
].join("\n");
|
|
(document.head || document.documentElement).appendChild(st);
|
|
}
|
|
|
|
function apply() {
|
|
document.body.classList.toggle("bw-dark", isDark());
|
|
var b = document.getElementById("baldav-daynight");
|
|
if (b) b.textContent = isDark() ? "☀ День" : "☾ Ночь";
|
|
}
|
|
function toggle() {
|
|
try { localStorage.setItem(LS_DARK, isDark() ? "0" : "1"); } catch (e) {}
|
|
apply();
|
|
}
|
|
// Standalone floating button — independent of the navbar so it can't be invisible or
|
|
// zero-width. Fixed bottom-right, explicit colours/size.
|
|
function addButton() {
|
|
if (document.getElementById("baldav-daynight")) return true;
|
|
var a = document.createElement("button");
|
|
a.id = "baldav-daynight";
|
|
a.type = "button";
|
|
a.textContent = isDark() ? "☀ День" : "☾ Ночь";
|
|
a.style.cssText = "position:fixed;bottom:24px;right:24px;z-index:100000;" +
|
|
"padding:8px 12px;font:600 14px sans-serif;background:#2b3038;color:#fff;" +
|
|
"border:1px solid #667;border-radius:8px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5)";
|
|
a.addEventListener("click", function (e) { e.preventDefault(); e.stopPropagation(); toggle(); });
|
|
document.body.appendChild(a);
|
|
return true;
|
|
}
|
|
var WANT = ["Cycling","Hiking","Bench","Toilets","Bank","ATM","Bar","BBQ","Cafe","Drinking water","Fast food","Food court","Pub","Restaurant","Bicycle parking","Bus station","Bakery","Beverages","Coffee","Supermarket","Picnic site","Viewpoint","Shelter","Route quality"];
|
|
function setDefaultOverlays() {
|
|
try { if (localStorage.getItem("baldav_bw_overlays_v1") === "1") return true; } catch (e) {}
|
|
var labels = document.querySelectorAll("#layers-control-wrapper label, .leaflet-control-layers-overlays label");
|
|
if (!labels.length) return false;
|
|
labels.forEach(function (lab) {
|
|
var t = (lab.textContent || "").trim();
|
|
if (!WANT.some(function (w) { return t.indexOf(w) !== -1; })) return;
|
|
var cb = lab.querySelector("input[type=checkbox]") || lab.control || (lab.htmlFor && document.getElementById(lab.htmlFor));
|
|
if (cb && cb.type === "checkbox" && !cb.checked) cb.click();
|
|
});
|
|
try { localStorage.setItem("baldav_bw_overlays_v1", "1"); } catch (e) {}
|
|
return true;
|
|
}
|
|
function init() {
|
|
injectStyle();
|
|
apply();
|
|
var tries = 0;
|
|
var iv = setInterval(function () {
|
|
tries++;
|
|
var b = addButton(); var o = setDefaultOverlays();
|
|
if ((b && o) || tries > 60) clearInterval(iv);
|
|
}, 500);
|
|
}
|
|
if (document.readyState !== "loading") init(); else document.addEventListener("DOMContentLoaded", init);
|
|
})();
|