Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Checker Plus for Gmail: A Theme by Erel
/* Add your desirable color pallete over here
* {
--primary-text-color: [COLOR];
--primary-background-color: [COLOR];
--secondary-text-color: [COLOR];
--secondary-background-color: [COLOR];
--disabled-text-color: [COLOR];
--highlight-background-color: [COLOR];
--hover-message-color: [COLOR];
--error-color: [COLOR];
--primary-color: [COLOR];
--accent-color: [COLOR];
--icons: [COLOR];
} */
/* --- GENERAL --- */
html,
body,
paper-button,
paper-item,
paper-icon-item {
font-family: 'Google Sans', Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
}
/* invert text colors for messageBody */
.messageBody p:not(.message a),
.messageBody font:not(.message a),
.messageBody h1[style *= 'color']:not(.message a),
.messageBody h2[style *= 'color']:not(.message a),
.messageBody h3[style *= 'color']:not(.message a),
.messageBody h4[style *= 'color']:not(.message a),
.messageBody h5[style *= 'color']:not(.message a),
.messageBody h6[style *= 'color']:not(.message a),
.messageBody span[style *= 'color']:not(.message a),
.messageBody div[style *= 'color']:not(.message a),
.messageBody table tr[style *= 'color']:not(.message a),
.messageBody table td[style *= 'color']:not(.message a),
.messageBody table div[style *= 'color']:not(.message a) {
color: var(--secondary-text-color) !important;
}
/* links */
.message a,
.message a > span[style *= 'color'] {
color: var(--accent-color) !important;
text-decoration: none;
}
.message a:hover,
.message a:hover > span[style *= 'color'],
.message a:visited {
color: var(--primary-color) !important;
}
/* --- MAIN window --- */
/* header and body background */
html:not(#z) #inboxSection,
html:not(#z) #inboxSection #main-header-toolbar {
color: var(--primary-text-color);
background-color: var(--primary-background-color) !important;
}
/* app toolbar (account header) */
body.popup app-toolbar {
color: var(--primary-text-color);
background-color: var(--highlight-background-color) !important;
}
/* Search option */
#searchInput {
color: var(--primary-text-color);
}
/* mail */
.mail {
background-color: var(--secondary-background-color) !important;
border-bottom: 1px solid var(--highlight-background-color);
}
.mail:hover {
background-color: var(--hover-message-color) !important;
box-shadow: inset 1px 0 0 var(--accent-color), 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
z-index: 1;
}
/* mail snippet text */
.snippet {
color: var(--secondary-text-color);
}
/* menus */
paper-item:hover,
paper-icon-item:hover {
background-color: var(--secondary-background-color);
}
/* menus outer frame */
#options-menu,
.accountOptionsMenu {
border: 1px solid var(--highlight-background-color);
}
paper-item:active,
paper-icon-item:active {
background-color: var(--highlight-background-color);
}
/* menu divider */
paper-item.separator {
background: var(--highlight-background-color) !important;
}
/* toasts */
paper-toast {
background-color: var(--secondary-background-color);
border: 1px solid var(--highlight-background-color);
}
/* --- OPEN MAIL window --- */
/* body background */
app-header-layout {
background: var(--secondary-background-color) !important;
}
/* labels */
.label {
margin-bottom: none;
}
#openEmailLabels .labelName {
margin-top: 2px;
}
#openEmailLabels .removeLabel {
padding-bottom: 3px;
}
/* mail content */
#openEmail {
color: var(--primary-text-color);
background-color: var(--secondary-background-color);
}
/* Message */
.message {
border-top: 1px solid var(--highlight-background-color);
}
/* Message Expander (conversation) -> Messages Hidden badge */
#messagesHidden {
color: var(--primary-text-color);
background: var(--primary-background-color);
border: 1px solid var(--highlight-background-color);
}
#messagesHidden:hover {
font-size: 0;
padding: 10px;
content: url(https://www.gstatic.com/images/icons/material/system/1x/expand_all_white_20dp.png);
background: var(--secondary-background-color);
}
#messagesHidden:active {
background: var(--highlight-background-color);
}
#messageExpander::before,
#messageExpander::after {
border-top: 1px solid var(--highlight-background-color);
}
/* Progressbar Loader */
#primaryProgress {
background: var(--accent-color);
}
#progressContainer,
.indeterminate::after {
background: var(--hover-message-color) !important;
}
/* Reply */
#replyArea {
color: var(--primary-text-color);
background: var(--primary-background-color);
border: 1px solid var(--highlight-background-color);
}
#replyArea.clicked,
#replyArea:hover {
background: var(--secondary-background-color) !important;
}
.showTrimmedContent {
color: var(--primary-text-color);
background-color: var(--hover-message-color);
border: 1px solid var(--primary-background-color);
border-radius: 10px;
font-size: 16px;
padding: 3px 5px;
}
.showTrimmedContent:hover {
color: var(--primary-text-color);
background-color: var(--highlight-background-color);
}
/* --- DIALOGS --- */
/* Dialog window */
paper-dialog {
border: 1px solid var(--highlight-background-color);
}
/* Dialog icons */
paper-dialog .buttons paper-icon-button {
color: var(--icons);
}
/* Dialog textarea */
textarea {
color: var(--text-primary);
background-color: var(--secondary-background-color);
}
/* Skins & Themes > OK button */
paper-button[raised].colored {
background-color: var(--accent-color) !important;
}
/* Skins & Themes > Available Themes alignment fix */
paper-dialog > div {
padding-left: 0px !important;
}
#skinsDialog #availableSkins paper-item {
padding-left: 12px;
}
/* Skins Dialog -> Add Button */
#skinsDialog .addButton {
background-color: var(--highlight-background-color);
}
/* Quick Contact */
#quickContactPhoto.contactPhoto {
background-color: var(--highlight-background-color);
padding: 5px;
}
/* Scroll Bar */
::-webkit-scrollbar,
::-webkit-scrollbar-corner {
background-color: var(--highlight-background-color);
max-width: 10px;
}
::-webkit-resizer {
background-color: var(--primary-background-color);
}
::-webkit-scrollbar-thumb {
background-color: var(--accent-color);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--primary-color);
}
@E-RELevant

This comment has been minimized.

Copy link
Owner Author

E-RELevant commented May 20, 2020

Dark Color Palettes

Midnight - Dark blue theme:

* {
--primary-text-color: #e9e9e9;
--primary-background-color: #1f232a;
--secondary-text-color: #858788;
--secondary-background-color: #252a33;
--disabled-text-color: #63666c;
--highlight-background-color: #333943;
--hover-message-color: #2b303a;
--error-color: #d04a48;
--primary-color: #308fdf;
--accent-color: #39a3fc;
--icons: #ffffff;
}

Dark WhatsApp - Dark green theme:

* {
    --primary-text-color: #ededed;
    --primary-background-color: #0b1419;
    --secondary-text-color: #b0b3b8;
    --secondary-background-color: #101d24;
    --disabled-text-color: #6f6f6f;
    --highlight-background-color: #1a252c;
    --hover-message-color: #212d33;
    --error-color: #d04a48;
    --primary-color: #009688;
    --accent-color: #0ca448;
    --icons: #ffffff;
}

Dark Facebook - Dark theme with blue

* {
    --primary-text-color: #e4e6eb;
    --primary-background-color: #18191a;
    --secondary-text-color: #909192;
    --secondary-background-color: #242526;
    --disabled-text-color: #4b4c4f;
    --highlight-background-color: #3a3b3c;
    --hover-message-color: #4e4f50;
    --error-color: #ee254c;
    --primary-color: #2379ef;
    --accent-color: #1f64cd;
    --icons: #ffffff;
}

Color palette for Brave browser - Dark theme with orange:

* {
    --primary-text-color: #ededed;
    --primary-background-color: #222222;
    --secondary-text-color: #909192;
    --secondary-background-color: #282828;
    --disabled-text-color: #6f6f6f;
    --highlight-background-color: #393939;
    --hover-message-color: #444444;
    --error-color: #d04a48;
    --primary-color: #cb4014;
    --accent-color: #f95234;
    --icons: #ffffff;
}

Spotify - Dark theme with green

* {
    --primary-text-color: #ffffff;
    --primary-background-color: #040404;
    --secondary-text-color: #b3b3b3;
    --secondary-background-color: #121212;
    --disabled-text-color: #919496;
    --highlight-background-color: #282828;
    --hover-message-color: #535353;
    --error-color: #f55050;
    --primary-color: #28d764;
    --accent-color: #25b958;
    --icons: #ffffff;
}
@E-RELevant

This comment has been minimized.

Copy link
Owner Author

E-RELevant commented May 20, 2020

Other Color Palettes

Navy Blue - Dark shades of blue theme

* {
--primary-text-color: #ecedef;
--primary-background-color: #32466f;
--secondary-text-color: #bebebe;
--secondary-background-color: #1e2b46;
--disabled-text-color: #63666c;
--highlight-background-color: #497be3;
--hover-message-color: #468cd6;
--error-color: #d04a48;
--primary-color: #d3beaa;
--accent-color: #ebdacb;
--icons: #ffffff;
}

Black, Gold and White - Dark golden theme

* {
    --primary-text-color: #ededed;
    --primary-background-color: #333333;
    --secondary-text-color: #676767;
    --secondary-background-color: #2d2d2d;
    --disabled-text-color: #525252;
    --highlight-background-color: #cda959;
    --hover-message-color: #414141;
    --error-color: #d04a48;
    --primary-color: #ffeec6;
    --accent-color: #ededed;
    --icons: #ffffff;
}
@E-RELevant

This comment has been minimized.

Copy link
Owner Author

E-RELevant commented May 20, 2020

How to use

This theme is made for the Checker Plus for Gmail web extension.

  1. In the extension popup, go to the main Options menu.

  2. Navigate to Skins & Themes.

  3. Click on the Custom button:

    image

  4. Enter the main code under the dialog textarea:

    image

    REMINDER: Replace the comment code at the top with your desirable color palette.

  5. Press Test it out! to check it, and Done to apply it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.