Dark Mode

[mahyarmirrashed]

Is it possible to make the map into dark mode on the controls themselves?

[dimfeld]

I haven't looked into it, but the controls are just the standard Maplibre controls, so if they support it then it should be possible to make it work here too. Worst case you could probably provide your own CSS that targets the control classes.

[mahyarmirrashed]

So, I ended up finding a solution. It was a modified solution that I had found on Stack Overflow. Basically, you need to add the following CSS code:

.dark .maplibregl-ctrl-scale,
.dark .maplibregl-ctrl-attrib.maplibregl-compact,
.dark .maplibregl-ctrl-attrib a {
  color: hsl(var(--foreground));
}

.dark .maplibregl-ctrl-group,
.dark .maplibregl-ctrl-scale,
.dark .maplibregl-ctrl-attrib.maplibregl-compact {
  background: hsl(var(--background));
}

.dark .maplibregl-ctrl-group button + button,
.dark .maplibregl-ctrl-scale,
.dark .maplibregl-ctrl-attrib.maplibregl-compact {
  border-color: hsl(var(--border));
}

.dark .maplibregl-ctrl-icon,
.dark .maplibregl-ctrl-attrib-button {
  filter: invert(0.75);
}

Cheers, and thanks for your work with this library :)

[dimfeld]

Nice, thanks for sharing it here!