Skip to content

Gmail UI+ (Dark) by MRCREEPRO11

Screenshot of Gmail UI+ (Dark)
Write a review Install Get Stylus

Details

AuthorMRCREEPRO11

LicenseMRCREEP Licenses

Categorymail.google.com

Created

Updated

Size63 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark mode
This require the gmail theme to be black (dark)

Notes

No

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         Gmail Redesigned (Dark Mode)
@namespace    USO Archive
@author       Globex Designs, Inc.
@description  A dark style for Gmail from the creators of the original "Google Redesigned" extension.    To report issue please visit: https://github.com/EvHaus/google-redesigned    NOTE: This style does not support the right-side Keep/Reminders sidebar.
@version      20230514.03.09
@license      CC-BY-4.0
@preprocessor uso
==/UserStyle== */
/* ==UserStyle==
@name           Gmail Redesigned (Dark Mode)
@namespace      Globex Designs, Inc.
@version        20230513.0.0
@homepageURL    https://github.com/EvHaus/google-redesigned
@license        CC-BY-4.0
@author         Globex Designs, Inc.
@description    A dark style for Gmail from the creators of the original
				"Google Redesigned" extension. To report issue please visit:
				https://github.com/EvHaus/google-redesigned
				NOTE: This style does not support Gmail's new Chat & Meet features.
==/UserStyle== */

@-moz-document url-prefix("https://mail.google.com") {

/* COLOR PALETTE */

/* stylelint-disable color-no-hex */
:root {
	--GR0: #0F1112; /* Background */
	--GR1: #17191B;
	--GR2: #1E2224;
	--GR3: #252A2D;
	--GR4: #2D3236;
	--GR5: #343A3F;
	--GR6: #3B4348; /* Dropdown/Popover Background */
	--GR7: #434B51;
	--GR8: #4A535A;
	--GR9: #515B62;
	--GR10: #606970;
	--GR11: #70787E;
	--GR12: #80878C;
	--GR13: #90969B;
	--GR14: #A0A5A9;
	--GR15: #AFB4B7;
	--GR16: #BFC3C5;
	--GR17: #CFD2D4; /* Text/Icons */
	--GR18: #DFE1E2;
	--GR19: #EFF0F0; /* Text/Icons Hover */
	--GRSELECTED: #FB0;
}
/* stylelint-enable color-no-hex */

/* GLOBAL */

	body { background: var(--GR0) !important }

/* ICONS */

	.gb_Ia svg, /* Header Icons */
	.gb_Qe button svg /* Search Dropdown Icons */
	{
		color: var(--GR17) !important;
		fill: var(--GR17) !important;
	}

/* LOADING */

#loading { background: var(--GR0) !important }

	/* Envelope */
	/* stylelint-disable color-no-hex */
	.la-k .la-m { background: var(--GR0) !important }
	.la-i > .la-l, .la-i > .la-r, .la-k .la-l, .la-k .la-r { border-color: var(--GR0) !important }
	.la-i div[style*="background:#fafbfb"] { background: var(--GR0) !important }
	.la-b .la-l, .la-b .la-r, .la-b .la-m { background: var(--GR4) }
	.la-b .la-l.la-c { background: #C5221F }
	.la-b .la-c.la-r { background: #FBBC04 }
	#loading div[style*="background:#d23f31"] { background: #CE9702 !important }
	#loading div[style*="background:#db4437"] { background: #FB0 !important }
	/* stylelint-enable color-no-hex */

	/* Progress Bar */
	#nlpt { background: var(--GR6) !important }

		#nlpt::before { background: var(--GRSELECTED) !important }

	/* Text */
	.msg { color: var(--GR12) !important }

	/* Footer */
	.msgb { color: var(--GR12) !important }

		/* "Load basic HTML" */
		.submit_as_link { color: var(--GRSELECTED) !important }
			
			.submit_as_link:hover { color: var(--GR19) !important }

/* LEFT-SIDE APP BAR (Aug 2022) */
	
	.WR:not(.aBA):not(.aTO), .a6o::before { background: var(--GR4) !important }
	
	/* Item */
    
        /* Hamburger Icon */
        .gb_Da svg { color: var(--GR16) !important }
	
		/* Text (Mail, Chat, Spaces, Meet) */
		.apW { color: var(--GR16) !important }
	
		/* Selected */
		.apV .V6, .apV .V6:hover { background: var(--GR8) !important }
	
		/* Hovered */
		.aIk .V6.CL::after, /* Chat / Spaces */
		.CL:hover::after /* Meet */
		{
			background: var(--GR2) !important;
			outline: 2px solid var(--GRSELECTED) !important
		}
	
	/* Icons */
	
		/* Mail */
		.CL.W9::before { background-image: url("https://www.gstatic.com/images/icons/material/system_gm/1x/mail_white_20dp.png") !important }
	
		/* Mail (Selected) */
		.apV .W9::before { background-image: url("https://www.gstatic.com/images/icons/material/system_gm_filled/1x/mail_white_20dp.png") !important }
	
		/* Chat */
		.CL.su::before { background-image: url("https://www.gstatic.com/images/icons/material/system_gm/1x/chat_bubble_outline_white_20dp.png") !important }
	
		/* Spaces */
		.CL.V2::before { background-image: url("https://www.gstatic.com/images/icons/material/system_gm/1x/gmail_groups_white_20dp.png") !important }
	
		/* Meet */
		.CL.Xj::before { background-image: url("https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/meet_white_20dp.png") !important }
	
/* HEADER */

	.aiw { border-bottom: 1px solid var(--GR6) !important }

	/* Icons */
	.gb_oa svg { color: var(--GR16) !important }

	/* "Gmail" logo */
	[aria-label="Gmail"][title="Gmail"][href="#inbox"] > img {
		background: url("https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_dark_1x_r4.png") no-repeat center center !important;
		height: 0 !important;
		padding: 40px 109px 0 0 !important;
		width: 0 !important;
	}
	
	/* Chat Status */
	
	.Yb {
		border-color: var(--GR10) !important;
	}
	
		/* "Active" text */
		.Yc { color: var(--GR17) !important }

/* SEARCH HEADER */
	
	/* Input Wrapper Focused */

	/* NOTE: The classes on this seems to change very often, so using ID instead */
	#aso_search_form_anchor {
		background: var(--GR6) !important;
		border-color: var(--GR8) !important;
	}
	
		/* Input */
		#aso_search_form_anchor input { color: var(--GR17) !important }

			/* "Search mail" placeholder */
			#aso_search_form_anchor input::placeholder { color: var(--GR15) !important }
		
	/* Search Options Dropdown */
	.ZF-zT {
		background: var(--GR6) !important;
		color: var(--GR17) !important;
	}

		/* "No recent items" message */
		.gsan_a { color: var(--GR15) !important }

		/* Labels */
		.boo > .ZG { color: var(--GR17) !important }

		/* Select Fields */
		.boo .aQl > .J-JN-M-I-Jm,
		.boo .aaa > .J-JN-M-I-Jm,
		.boo .ZE > .J-JN-M-I-Jm {
			color: var(--GR17) !important
		}

		/* Select Arrow Icons */
		.T-axO .J-JN-M-I-JG { filter: invert(1) !important }

		/* Calendar Icon */
		.bs5::after { filter: invert(1) !important }

		/* Text Input */
		.boo .nr {
			background: var(--GR4) !important;
			color: var(--GR17) !important;
		}
			
			.boo .nr:focus {
				box-shadow: inset 0 -1px 0 0 var(--GRSELECTED) !important;
			}

		/* Checkbox */
		.bs1 + .bs3::before, .btj + .aD::before {
			filter: invert(1) !important
		}

		/* Checkbox Labels */
		.bs1 + .bs3, .btj + .aD { color: var(--GR17) !important }

/* GENERIC DROPDOWNS */

	/* Body */
	.J-M { background: var(--GR6) !important }

		/* Inbox Type Dropdown - Right Border */
		.afL .J-M-Jz { border-color: var(--GR8) !important }

		/* Title */
		.J-awr,
		.afQ, /* Inbox Type Dropdown - Right-side title */
		.SK /* Email View - Label Toolbar */
		{
			color: var(--GR15) !important
		}

		/* Row */
		.J-N,
		.afP,  /* Inbox Type Dropdown - Right-side text */
		.J-JK, /* Email View - Move To Dropdown - Footer Rows */
		.J-LC  /* Email View - Labels Dropdown - Checkmark Rows */
		{
			border-color: transparent !important;
			color: var(--GR17) !important
		}

			/* Selected */
			.J-Ks-KO .J-N-Jz { color: var(--GRSELECTED) !important }

			/* Hover */
			.J-N-JT,
			.J-JK-JT,
			.J-LC-JT {
				background: var(--GR8) !important;
			}

				/* Hover Text */
				.J-N-JT .J-N-Jz { color: var(--GR19) !important }
	
			/* Checkmark */
			.J-LC-Jo { background-image: url("https://www.gstatic.com/images/icons/material/system_gm/1x/check_box_outline_blank_white_20dp.png") !important }
	
				/* Checked */
				.J-LC-JR-Jp .J-LC-Jo { background-image: url("https://www.gstatic.com/images/icons/material/system_gm/1x/check_box_white_20dp.png") !important }

		/* Search Field */
		.agd .J-M-JJ input {
			background: var(--GR4) !important;
			color: var(--GR17) !important;
		}
	
			.agd .J-M-JJ input:focus {
				box-shadow: inset 0 -2px 0 0 var(--GRSELECTED) !important;
			}
	
			/* Icon */
			.A0 { background-image: url("https://www.gstatic.com/images/icons/material/system_gm/1x/search_white_20dp.png") !important }
	
	
		/* Divider */
		.J-Kh { border-color: var(--GR10) !important }

		/* Checkmark Icon */
		.J-Ks-KO .J-N-Jo {
			background-image: url("https://www.gstatic.com/images/icons/material/system/1x/check_white_20dp.png") !important;
		}

		/* Links */
		.e { color: var(--GR17) !important }
			
			.e:focus,
			.e:hover {
				color: var(--GR19) !important
			}

/* SEARCH DROPDOWN */

	.gssb_e {
		background: var(--GR6) !important;
		border-color: var(--GR8) !important;
	}
		
		/* Toolbar Row */
		.aRp { background: var(--GR4) !important }
	
			/* Toolbar */
			.aSP { border-color: var(--GR8) !important }
	
				/* Button */
				.H2 {
					background: var(--GR6) !important;
					border-color: var(--GR8) !important;
					color: var(--GR17) !important;
					fill: currentColor !important;
				}
	
					.H2:focus, .H2:hover {
						background: var(--GR8) !important;
					}
	
					/* Icon */
					.ap6 { filter: brightness(100) }
	
		/* Row */
		.gssb_m {
			background: transparent !important;
			color: var(--GR17) !important;
		}
		
			/* Row Color */
			.asor_x { color: var(--GR17) !important }
		
			/* Row Hover */
			.gssb_i {
				background: var(--GR8) !important;
				cursor: pointer;
			}
			
			/* Group Separator */
			.gssb_l { background: var(--GR8) !important }
			
			/* Row Details */
			.gstq_c, .asor_e { color: var(--GR15) !important }

			/* Row Icons */
			.asor, /* Historical Search */
			.asor_o, /* Attachment Icon */
			.gsaq_b, /* Remove Historical Search */
			.gsoi_0 /* Mail Icon */
			{
				filter: invert(1) !important
			}

		/* "Create Filter" Button */
		.acM { color: var(--GR15) !important }

		/* "Search" Button */
		.T-I-atl { background: var(--GR8) !important }

			.T-I-atl:hover { box-shadow: 0 1px 2px 0 var(--GR10), 0 1px 3px 1px var(--GR1) !important }

/* FILTER CREATION DROPDOWN */...

Reviews

No reviews yet.