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

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