Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support dark mode

See original GitHub issue

Add a prefers-color-scheme CSS media query for dark mode.

Something like:

.leaflet-bar a,
.leaflet-bar a:hover {
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
}

@media (prefers-color-scheme: light) {
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	color: black;
        }
}

@media (prefers-color-scheme: dark) {
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #000;
	border-bottom: 1px solid #333;
	color: white;
	}
}

Issue Analytics

State:
Created 2 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

vanillajonathancommented, Jun 29, 2021

Something like this:

.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	color: black;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
}

@media (prefers-color-scheme: dark) {
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #000;
	border-bottom: 1px solid #333;
	color: white;
	}
}

1reaction

Malvozcommented, Jun 29, 2021

A note on backwards compatibility:

The “light” styles (the current styles applied by default) should remain outside a prefers-color-scheme media query, otherwise nothing will apply in browsers that do not support that media feature. I.e. only a prefers-color-scheme: dark media query is necessary (to override the default light colors).