Skip to content

Google Maps Dark by Kejmil404

Screenshot of Google Maps Dark
Write a review Install Get Stylus

Details

AuthorKejmil404

LicenseCC BY-NC-SA 4.0

Categorygoogle, google maps

Created

Updated

Size3.3 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark mode for Google Maps. Works for all most popular broswers (Opera, Firefox, Chrome)

Notes

alt text Google Maps Dark for Stylish (19.10.2023 v.)
ㅤ
ㅤ

Changelog

Update 11.02.2024

-Style kept to a minimum, now performs only the most important function - making the map dark.
if you want other elements to be dark simply use the option to force dark mode in your browser

Update 05.11.2023

-minimal fixes
-added dark to place view
-added dark to search items
-added transparent elements to street view

Update 29.10.2023

-implemented for street view
-implemented for images view for place
-added customization options
-added Google Maps logo in top left corner (possible to disable in options)
-now you can switch the map style: Dark - classic, Grayed out, Light - classic (also in options)

Update 23.10.2023

-minimal design changes
-code beautification

Update 19.10.2023

-fixed regexp url
-make more elements black and texts white

Source code

/* ==UserStyle==
@name         Google Maps Dark
@version      05112023.1
@description Dark mode for Google Maps. It works for all most popular broswers (Opera, Firefox, Chrome).
@author Kejmil404 
@namespace    -
@license CC-BY-NC-SA-4.0

@advanced dropdown AddLogo "Add Google Maps logo in left top corner"{
1. "ON" <<<EOT  width: 30px; height: 30px; content: url("https://cdn.discordapp.com/attachments/1042039058920120393/1167284473403035710/g.png?ex=654d9161&is=653b1c61&hm=36cda0e293d1e72b98a9bc2528ee60bc9bf316e8f913f784f61dd6b964511136&");  EOT;
2. "OFF" <<<EOT EOT;
}

@advanced dropdown MapStyle "Select style of the map"{
1. "Classic - dark" <<<EOT  filter: invert(100%) contrast(102%) saturate(150%) hue-rotate(185deg);
		-webkit-filter: invert(100%) contrast(102%) saturate(150%) hue-rotate(185deg);  EOT;
2. "Grayed out" <<<EOT  filter: grayscale(34%) brightness(95%) hue-rotate(155deg) saturate(67%) invert(100%);
-webkit-filter: grayscale(34%) brightness(95%) hue-rotate(155deg) saturate(67%) invert(100%);
-moz-filter: grayscale(34%) brightness(95%) hue-rotate(155deg) saturate(67%) invert(100%);  EOT;
3. "Classic - light" <<<EOT filter: none; EOT;
}

@advanced dropdown MinimapStyle "Select style of the minimap"{
1. "Classic - dark" <<<EOT  filter: invert(100%) contrast(102%) saturate(150%) hue-rotate(185deg);
		-webkit-filter: invert(100%) contrast(102%) saturate(150%) hue-rotate(185deg);  EOT;
2. "Grayed out" <<<EOT  filter: grayscale(34%) brightness(95%) hue-rotate(155deg) saturate(67%) invert(100%);
-webkit-filter: grayscale(34%) brightness(95%) hue-rotate(155deg) saturate(67%) invert(100%);
-moz-filter: grayscale(34%) brightness(95%) hue-rotate(155deg) saturate(67%) invert(100%);  EOT;
}
==/UserStyle== */
@-moz-document regexp("https:\\/\\/www\\.google\\.[A-Za-z0-9]{1,3}\\/maps\\/@.{5,15},.{5,15},.{1,6}\\?(hl=[A-Za-z]{2}&)?entry=ttu(?:&?https:\\/\\/www\\.google\\.com\\/maps\\/place\\/.{1,80}\\/@.{5,15},.{5,15},.{1,9}z\\/.{1,200})?") {
	/*CODE FOR MAP VIEW*/
	/*map in dark*/
	#scene {
		filter: /*[[MapStyle]]*/;
	}

	/*add gmaps logo*/
	.IySOjf{
		content: /*[[AddLogo]]*/;
		height: /*[[AddLogo]]*/;
		width: /*[[AddLogo]]*/;
	}


}

@-moz-document regexp("https:\\/\\/www\\.google\\.[A-Za-z0-9]{1,3}\\/maps\\/@.{5,15},.{5,15},.{1,30}\\/data=.{1,20}entry=ttu") {
	/*CODE FOR SATELITE VIEW*/
	/*add gmaps logo*/
	.IySOjf {
		content: /*[[AddLogo]]*/;
		height: /*[[AddLogo]]*/;
		width: /*[[AddLogo]]*/;
	}
/*minimap*/
	#minimap {
		filter: /*[[MinimapStyle]]*/
		box-shadow: rgba(0, 0, 0, 1);
	}
}


@-moz-document regexp("https:\\/\\/www\\.google\\.com\\/maps\\/place\\/.{1,80}\\/@.{5,15},.{5,15},.{1,9}z\\/.{1,200}") {
	/*CODE FOR MAP VIEW + PLACE IN LEFT*/
	/*map in dark*/
	#scene {
		filter: /*[[MapStyle]]*/;
	}

	/*add gmaps logo*/
	.IySOjf {
		content: /*[[AddLogo]]*/;
		height: /*[[AddLogo]]*/;
		width: /*[[AddLogo]]*/;
	}

}
@-moz-document regexp("https:\\/\\/www\\.google\\.com\\/maps\\/place\\/.{1,80}\\/@.{5,15},.{5,15},.{1,9}m\\/.{1,200}") {
	/*CODE FOR STATELITE VIEW + PLACE IN LEFT*/
	/*add gmaps logo*/
	.IySOjf {
		content: /*[[AddLogo]]*/;
		height: /*[[AddLogo]]*/;
		width: /*[[AddLogo]]*/;
	}
    /*minimap*/
	#minimap {
		filter: /*[[MinimapStyle]]*/
		box-shadow: rgba(0, 0, 0, 1);
	}
}

Reviews

No reviews yet.