/* * GeoPolMap — application styles. * * All theming is driven by CSS custom properties keyed off the * `data-theme` attribute on , which js/app.js sets to "light" or * "dark" (and keeps in sync with the basemap + localStorage). Setting the * attribute before first paint (see the inline logic in app.js) avoids a * flash of the wrong theme. */ /* ---- Theme tokens --------------------------------------------------------- */ /* Light theme is the default set of tokens. */ :root { --bg: #f5f3ee; /* page backdrop; roughly matches the light basemap */ --ctrl-bg: #ffffff; /* control (button) background */ --ctrl-bg-hover: #efefef; --ctrl-fg: #1a1a1a; /* control icon/text colour */ --ctrl-border: rgba(0, 0, 0, 0.12); --ctrl-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } /* Dark theme overrides. */ :root[data-theme="dark"] { --bg: #14181c; /* roughly matches the dark basemap */ --ctrl-bg: #232a31; --ctrl-bg-hover: #2d353d; --ctrl-fg: #e8eaed; --ctrl-border: rgba(255, 255, 255, 0.14); --ctrl-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } /* ---- Layout --------------------------------------------------------------- */ html, body { margin: 0; height: 100%; } body { background: var(--bg); /* shown behind the canvas until tiles paint */ } /* Full-viewport map. */ #map { position: absolute; inset: 0; /* top/right/bottom/left: 0 */ width: 100%; height: 100%; } /* ---- Light/dark toggle control ------------------------------------------- * The container reuses MapLibre's own control classes (.maplibregl-ctrl, * .maplibregl-ctrl-group) so it sits and spaces itself like the built-in * controls. We restyle the button with our theme tokens so it matches the * active theme rather than MapLibre's fixed white default. */ .theme-toggle__btn { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; padding: 0; border: none; background: var(--ctrl-bg); color: var(--ctrl-fg); cursor: pointer; } .theme-toggle__btn:hover { background: var(--ctrl-bg-hover); } /* The inline SVG inherits the button's text colour. */ .theme-toggle__btn svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Give the toggle's own container group the themed surface + shadow so it * reads as one piece with the button. */ .theme-toggle.maplibregl-ctrl-group { background: var(--ctrl-bg); border: 1px solid var(--ctrl-border); box-shadow: var(--ctrl-shadow); }