Enable dark mode in WME.
As of
// ==UserScript==
// @name WME Dark Mode
// @namespace https://greasyfork.org/en/users/1434751-poland-fun
// @version 0.7
// @description Enable dark mode in WME.
// @author poland_fun
// @match *://*.waze.com/*editor*
// @match *://*.waze.com/chat*
// @grant GM.addStyle
// ==/UserScript==
/*
Change log
Version
0.1 - Initial Release
0.2 - Fixed some scripts that used custom CSS
0.3 - Fixed welcome screen, turn/segment closures
0.4 - Fixed house number backgrounds
0.5 - First pass at fixing WMEPH look.
Fixed URC pop-up overlay.
0.6 - Made chat dark.
Fixed go to link, and delete buttons for google links, entrances
0.7 - Undid go to link, and delete buttons for google links, entrances - Broke other stuff
Preliminary pass on darkening of WME Toolbox, and Editor info
*/
/* TODO */
/* Editing is diabled pop-up */
/* When you click the online editors */
/* Allow/Disallow all turns */
/* Google/Entrance/Exit delete and go to buttons */
/* Notification box */
/* WME Toolbox properties editor look wonky */
if (window.top === window.self) {
// We are not in an iframe
GM.addStyle ( `
/* Dark mode palette found in the chat code */
:host,:root {
--alarming: #ff8f8f;
--alarming_variant: #ff8f8f;
--always_white: #fff;
--always_black: #000;
--always_dark: #202124;
--always_dark_background_default: #202124;
--always_dark_background_variant: #000;
--always_dark_content_default: #e8eaed;
--always_dark_content_p1: #d5d7db;
--always_dark_content_p2: #b7babf;
--always_dark_inactive: #55595e;
--always_dark_surface_default: #3c4043;
--background_default: #202124;
--background_modal: rgba(32,33,36,0.6);
--background_table_overlay: rgba(144,149,156,0.6);
--background_variant: #000;
--brand_carpool: #1ee592;
--brand_waze: #3cf;
--cautious: #fce354;
--cautious_variant: #ffc400;
--content_default: #e8eaed;
--content_p1: #d5d7db;
--content_p2: #b7babf;
--content_p3: #90959c;
--disabled_text: #72767d;
--hairline: #55595e;
--hairline_strong: #72767d;
--handle: #d5d7db;
--hint_text: #90959c;
--ink_elevation: #e8eaed;
--ink_on_primary: #fff;
--ink_on_primary_focused: hsla(0,0%,100%,0.12);
--ink_on_primary_hovered: hsla(0,0%,100%,0.04);
--ink_on_primary_pressed: hsla(0,0%,100%,0.1);
--leading_icon: #72767d;
--on_primary: #202124;
--primary: #3cf;
--primary_variant: #3cf;
--promotion_variant: #c088ff;
--report_chat: #1ee592;
--report_closure: #feb87f;
--report_crash: #d5d7db;
--report_gas: #1bab50;
--report_hazard: #ffc400;
--report_jam: #ff5252;
--report_place: #c088ff;
--report_police: #1ab3ff;
--safe: #1ee592;
--safe_variant: #1ee592;
--separator_default: #3c4043;
--shadow_default: #000;
--surface_alt: #18427c;
--surface_default: #3c4043;
--surface_variant: #3c4043;
--surface_variant_blue: #1a3950;
--surface_variant_green: #1f432f;
--surface_variant_yellow: #4d421d;
--surface_variant_orange: #4c342c;
--surface_variant_red: #46292c;
--surface_variant_purple: #3d285b;
background-color: var(--background_default);
color: var(--content_default);
color-scheme: dark
}
#waze-logo {
filter: invert(100%);
}
/* 'Show dismissed alerts again after' button */
.alert-settings .alert-settings-period-label {
color: var(--content_p1);;
}
body{
background-color: var(--background_default);
color: var(--content_p1);
}
/* Background of all panes which pop in on left */
.tab-content {
background: var(--background_default);
}
/* 'Map layers' pane */
.layer-switcher .menu {
background: var(--background_default);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
color: var(--content_p1) !important;
}
.label-text {
color: var(--content_p1) !important;
}
/* Background of 'Add new Event' Under Events */
.mteListViewFooter--u_CxF {
background: var(--background_default);
}
/* Footer background */
.wz-map-ol-footer {
background-color: var(--background_default);
}
/* Links in footer */
a.wz-map-black-link {
color: var(--content_p1);
}
a {
color: var(--content_p1);
}
/* Lat/Long in footer*/
.wz-map-ol-control-span-mouse-position {
color: var(--content_p1);
}
/* Map imagery attribution */
.wz-map-ol-control-attribution {
color: var(--content_p1);
}
/* Background of script list/buttons */
#sidebar .nav-tabs {
background: var(--background_default);
}
/* Background of active script button */
#sidebar .nav-tabs li.active a {
background: var(--always_dark_surface_default);
}
/* Script button text */
#sidebar .nav-tabs li a {
color: var(--content_p1);
}
/* Background of 'Update results when map moves' in Solve pane */
.issues-tracker-wrapper .issues-tracker-footer {
background: var(--background_default);
}
/* Route Speeds */
#sidepanel-routespeeds {
color: var(--content_p1) !important;
}
#routespeeds-passes-label {
color: var(--content_p1) !important;
}
.waze-btn.waze-btn-blue {
color: white !important;
}
/* Textboxes/Dropdowns/Input Feilds */
input[type=text],input[type=email],input[type=number],input[type=password],select,button,textarea,.form-control {
color: var(--content_p2) !important;
}
a:hover, a:visited {
color: var(--content_p1);
}
/* UR section headers */
.problem-edit .section .title {
background-color: var(--always_dark_inactive);
color: var(--content_p1);
border-bottom: 1px solid var(--always_dark_surface_default);
border-top: 1px solid var(--always_dark_surface_default);
}
.issue-panel-header .sub-title-and-actions {
color: var(--content_p2);
}
.conversation-view .comment-list {
border: 1px solid var(--always_dark_surface_default);
}
/* 'Search This Area' box */
.container--wzXTu {
background: var(--background_default);
}
/* 'Filter Map issues' pane */
#filter-panel-region {
background: var(--background_default);
}
/* PL box */
[class^="container"]::after {
background: var(--always_dark_surface_default);
height: 2px;
}
/* Changelog */
[class^="changesLogContainer"] {
background: var(--background_default);
}
/* Online editors */
.online-editors-bubble {
--wz-button-background-color: var(--always_dark_surface_default);
--wz-button-border: var(--always_dark_surface_default);
}
.online-editors-bubble:hover {
--wz-button-background-color: var(--always_dark_inactive);
--wz-button-border: var(--always_dark_surface_default);
}
/* PL box */
[class^="bordered"] * {
background-color: var(--background_default);
}
/* Turn Restrictions */
.restriction-editing-region .restriction-editing-section .restriction-editing-container {
background-color: var(--always_dark_surface_default);
}
.form-control {
background: var(--always_dark_surface_default);
}
.timeframe-hours-controls {
--background_variant: var(--always_dark_inactive);
}
/* Turn Instructions */
.turn-instructions-panel .exit-signs,.turn-instructions-panel .turn-instructions,.turn-instructions-panel .towards-instructions {
background: var(--always_dark_surface_default);
}
.turn-instructions-panel .exit-sign-item,.turn-instructions-panel .turn-instruction-item {
background: var(--always_dark_surface_default);
border: 1px dashed var(--always_dark_inactive);
}
.wz-tooltip-content-holder {
background-color: var(--background_default);
}
/* House Numbers */
.house-number-marker {
background: var(--background_default);
}
.house-numbers-layer .house-number .content .input-wrapper {
background-color: var(--background_default) !important;
}
#urceDiv {
background-color: var(--background_default) !important;
box-shadow: 5px 5px 10px black !important;
}
.urceDivCloseButton {
background-color: var(--surface_default) !important;
box-shadow: 5px 5px 10px black !important;
}
/* Button text color */
.btn.btn-default {
color: var(--content_p1);
}
/* URC-E Plugin */
#sidepanel-urc-e #panel-urce-comments .URCE-openLink {
color: var(--content_p3) !important;
}
.URCE-span {
color: var(--content_p1);
}
.urceToolsButton {
background-color: var(--always_dark_surface_default) !important;
}
/* Grey screen when your save has errors */
#map-viewport-overlay {
background-color: var(--background_default);
}
/* default background is not super noticble here, so we do black */
#sidebar .overlay.editingDisabled {
background-color: black;
}
/* WMEPH Plugin */
/* These are gray icons. We can either make a white border per icon
or put a white boarder around all of them */
#WMEPH_services {
background-color: white;
}
/*
.serv-valet {
filter: invert(100%);
}
.serv-wifi {
filter: invert(100%);
}
.serv-restrooms {
filter: invert(100%);
}
.serv-credit {
filter: invert(100%);
}
.serv-reservations {
filter: invert(100%);
}
.serv-outdoor {
filter: invert(100%);
}
.serv-ac {
filter: invert(100%);
}
.serv-parking {
filter: invert(100%);
}
.serv-curbside {
filter: invert(100%);
}
.serv-wheelchair {
filter: invert(100%);
}
.serv-247 {
filter: invert(100%);
}
*/
#WMEPH_banner .banner-row.gray {
color: var(--content_p1) !important;
background-color: var(--surface_default) !important;
}
#wmeph-hours-list {
color: var(--content_p1) !important;
background-color: var(--background_default) !important;
}
#WMEPH_banner .wmeph-btn {
background-color: var(--background_default) !important;
}
/* Click Saver */
.cs-group-label {
color: var(--content_p1) !important;
}
/* Turn, Segment Closures */
.edit-closure {
background: var(--background_default);
}
.closure-node-item {
background-color: var(--background_default);
}
[class^="welcome_popup_container"] {
background-color: var(--background_default);
}
/* Script update message */
#WWSU-Container {
background-color: var(--background_default);
}
/* WME Toolbox Extension */
.tb-tabContainer {
background-color: var(--background_default) !important;
}
.tb-tab-tab {
background-color: var(--background_default) !important
}
.tb-tab-tab > img {
filter: invert(100%);
}
.tb-feature-label-image {
filter: invert(87%);
}
.ToolboxMeasurementTool {
background-color: var(--background_default) !important;
}
/* Editor info -------------------------------------- */
#header {
background-color: var(--background_default);
}
#header .user-headline .header-info {
background-color: var(--always_dark_surface_default);
}
#recent-edits .recent-edits-list .recent-edits-list-header {
background-color: var(--background_default);
}
#recent-edits .recent-edits-list .recent-edits-list-items .transaction-header {
background-color: var(--always_dark_surface_default);
}
#recent-edits .recent-edits-list .recent-edits-list-items .transaction-header.active, #recent-edits .recent-edits-list .recent-edits-list-items .transaction-header:hover {
background-color: var(--always_dark_background_default);
}
#recent-edits .recent-edits-list .recent-edits-list-items .transaction-content {
background-color: var(--always_black);
}
.type-icon {
filter: invert(100%);
}
.map .leaflet-tile-pane {
filter: grayscale(100%) brightness(0.8) contrast(160%) invert(77%)
}
#recent-edits .recent-edits-map-polygon {
fill: white;
}
` );
}
else {
//We are in an iframe whcih will be the chat
GM.addStyle ( `
:root[wz-theme=light],:root[wz-theme=light] :host {
--alarming: #ff8f8f;
--alarming_variant: #ff8f8f;
--always_white: #fff;
--always_black: #000;
--always_dark: #202124;
--always_dark_background_default: #202124;
--always_dark_background_variant: #000;
--always_dark_content_default: #e8eaed;
--always_dark_content_p1: #d5d7db;
--always_dark_content_p2: #b7babf;
--always_dark_inactive: #55595e;
--always_dark_surface_default: #3c4043;
--background_default: #202124;
--background_modal: rgba(32,33,36,0.6);
--background_table_overlay: rgba(144,149,156,0.6);
--background_variant: #000;
--brand_carpool: #1ee592;
--brand_waze: #3cf;
--cautious: #fce354;
--cautious_variant: #ffc400;
--content_default: #e8eaed;
--content_p1: #d5d7db;
--content_p2: #b7babf;
--content_p3: #90959c;
--disabled_text: #72767d;
--hairline: #55595e;
--hairline_strong: #72767d;
--handle: #d5d7db;
--hint_text: #90959c;
--ink_elevation: #e8eaed;
--ink_on_primary: #fff;
--ink_on_primary_focused: hsla(0,0%,100%,0.12);
--ink_on_primary_hovered: hsla(0,0%,100%,0.04);
--ink_on_primary_pressed: hsla(0,0%,100%,0.1);
--leading_icon: #72767d;
--on_primary: #202124;
--primary: #3cf;
--primary_variant: #3cf;
--promotion_variant: #c088ff;
--report_chat: #1ee592;
--report_closure: #feb87f;
--report_crash: #d5d7db;
--report_gas: #1bab50;
--report_hazard: #ffc400;
--report_jam: #ff5252;
--report_place: #c088ff;
--report_police: #1ab3ff;
--safe: #1ee592;
--safe_variant: #1ee592;
--separator_default: #3c4043;
--shadow_default: #000;
--surface_alt: #18427c;
--surface_default: #3c4043;
--surface_variant: #3c4043;
--surface_variant_blue: #1a3950;
--surface_variant_green: #1f432f;
--surface_variant_yellow: #4d421d;
--surface_variant_orange: #4c342c;
--surface_variant_red: #46292c;
--surface_variant_purple: #3d285b;
background-color: var(--background_default);
color: var(--content_default);
color-scheme: dark
}
`);
}