Checker Plus for Gmail: A Theme by Erel

CheckerPlus-forGmail-Theme.css

/* 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;
}

input[type="text"], textarea {
    background-color: var(--highlight-background-color);
}


/* --- 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);
}

/* multiple accounts side-drawer */
.accountAvatarUnreadCount {
 background: var(--accent-color);
}

/* --- OPEN MAIL window --- */


/* body background */
app-header-layout {
    background: var(--secondary-background-color) !important;
}

/* labels */
.label {
    margin-bottom: none;
}

.labelName, .removeLabel {
    height: 1.2em;
    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);
}

.viewMessageDetails {
    color: var(--secondary-text-color);
}

.viewMessageDetails:hover {
    color: var(--highlight-text-color);
}

.messageDetails {
    color: var(--secondary-text-color);
    background: var(--highlight-background-color);
}

/* Attachments */
.filename {
    color: var(--accent-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);
}

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;
}

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;
}

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:

   

4. Enter the main code under the dialog textarea:

   

   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.

It says 'contribution required'. What do I do?