8/15/2025, 4:49:32 AM
// ==UserScript==
// @name Wplace Dark Mode
// @namespace Violentmonkey Scripts
// @match https://wplace.live/*
// @grant GM_addStyle
// @grant unsafeWindow
// @version 1.3
// @author Dylan Dang
// @description 8/15/2025, 4:49:32 AM
// @run-at document-start
// @license MIT
// ==/UserScript==
const originalFetch = window.fetch;
const root = unsafeWindow || window;
root.fetch = async (req, options) => {
const res = await originalFetch(req, options);
if (res.url !== 'https://maps.wplace.live/styles/liberty') return res;
const json = await res.json();
json.layers.forEach((layer) => {
switch (layer.id) {
case 'background':
layer.paint['background-color'] = '#272e40';
break;
case 'water':
layer.paint['fill-color'] = '#000d2a';
break;
case 'waterway_tunnel':
case 'waterway_river':
case 'waterway_other':
layer.paint['line-color'] = '#000d2a';
break;
case 'natural_earth':
layer.paint['raster-brightness-max'] = 0.4;
break;
case 'landcover_ice':
layer.paint['fill-color'] = '#475677';
break;
case 'landcover_sand':
layer.paint['fill-color'] = '#775f47';
break;
case 'park':
layer.paint = {
'fill-color': '#0e4957',
'fill-opacity': 0.7,
};
break;
case 'park_outline':
layer.paint['line-opacity'] = 0;
break;
case 'landuse_pitch':
case 'landuse_track':
case 'landuse_school':
layer.paint['fill-color'] = '#3e4966';
break;
case 'landuse_cemetery':
layer.paint['fill-color'] = '#3b3b57';
break;
case 'landuse_hospital':
layer.paint['fill-color'] = '#663e3e';
break;
case 'building':
layer.paint['fill-color'] = '#1c3b69';
break;
case 'building_3d':
layer.paint['fill-extrusion-color'] = '#1c3b69';
break;
case 'waterway_line_label':
case 'water_name_point_label':
case 'water_name_line_label':
layer.paint['text-color'] = '#8bb6f8';
layer.paint['text-halo-color'] = 'rgba(0,0,0,0.7)';
break;
case 'tunnel_path_pedestrian':
case 'road_path_pedestrian':
case 'bridge_path_pedestrian':
layer.paint['line-color'] = '#7c8493';
break;
case 'bridge_path_pedestrian_casing':
layer.paint['line-color'] = '#3b4d65';
break;
case 'road_minor':
case 'tunnel_service_track':
case 'tunnel_minor':
case 'road_service_track':
case 'bridge_service_track':
case 'bridge_street':
layer.paint['line-color'] = '#3b4d65';
break;
case 'tunnel_link':
case 'tunnel_secondary_tertiary':
case 'tunnel_trunk_primary':
case 'tunnel_motorway':
layer.paint['line-color'] = '#4a627e';
break;
case 'label_other':
case 'label_state':
layer.paint['text-color'] = '#91a0b5';
layer.paint['text-halo-color'] = 'rgba(0,0,0,0.7)';
break;
case 'poi_r20':
case 'poi_r7':
case 'poi_r1':
layer.paint['text-color'] = '#91a0b5';
layer.paint['text-halo-color'] = 'rgba(0,0,0,0.7)';
break;
case 'poi_transit':
layer.paint['text-color'] = '#cde0fe';
layer.paint['text-halo-color'] = 'rgba(0,0,0,0.7)';
break;
case 'highway_name_path':
case 'highway_name_major':
layer.paint['text-color'] = '#cde0fe';
layer.paint['text-halo-color'] = 'rgba(0,0,0,0.7)';
break;
case 'highway_name_minor':
layer.paint['text-color'] = '#91a0b5';
layer.paint['text-halo-color'] = 'rgba(0,0,0,0.7)';
break;
case 'label_village':
case 'label_town':
case 'label_city':
case 'label_city_capital':
case 'label_country_3':
case 'label_country_2':
case 'label_country_1':
layer.paint['text-color'] = '#e4e5e9';
layer.paint['text-halo-color'] = 'rgba(0,0,0,0.7)';
break;
case 'airport':
layer.paint['text-color'] = '#92b7fe';
layer.paint['text-halo-color'] = 'rgba(0,0,0,0.7)';
break;
case 'aeroway_fill':
layer.paint['fill-color'] = '#2a486c';
break;
case 'aeroway_runway':
layer.paint['line-color'] = '#253d61';
break;
case 'aeroway_taxiway':
layer.paint['line-color'] = '#3d5b77';
break;
case 'boundary_3':
layer.paint['line-color'] = '#707784';
break;
}
});
const text = JSON.stringify(json)
.replaceAll('#e9ac77', '#476889') // road
.replaceAll('#fc8', '#476889') // primary roads
.replaceAll('#fea', '#3d5b77') // secondary roads
.replaceAll('#cfcdca', '#3b4d65'); // casing
return new Response(text, {
headers: res.headers,
status: res.status,
statusText: res.statusText,
});
};
GM_addStyle(/* css */ `
:root {
--color-base-100: #1b1e24;
--color-base-200: #262b36;
--color-base-300: #151922;
--color-base-content: #f5f6f9;
--noise: 0;
}
/* transparent color selector */
#color-0 {
background-color: white !important;
}
`);