Protonmail red theme

0

Full article

This is my favorite theme for protonmail, honestly it looks awesome:

You can add the following css code in settings, if you are not sure how, leave a comment below.


li[data-key="allmail"] {
    display: none;
}

li[data-key="starred"] {
    display: none;
}

.headerDesktop-container {
    background-color: #2B3441;
}

.search-form-fieldset {
    background: #414E62;
}

[class*="searchForm-action-button-"] {
    color: #f2f2f2;
}

.searchForm-action-button-advanced:hover,
.searchForm-action-button-toggle:hover {
    background: #ff5752;
}

.customRadio-input:checked+.customRadio-mask {
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px #ff5752;
    border-color: #ff5752;
}

.pm_button.primary,
.pm_button.primary:active {
    color: #fff;
    background-color: #2B3441;
    border-color: #2B3441;
}

.pm_button.primary:hover,
.pm_button.primary:focus {
    background-color: #414E62;
    border-color: #414E62;
}

.navigation>li.active,
.navigation>li:hover {
    box-shadow: 0 5px 0 0 #ff5752 inset;
}

.navigation-link {
    color: #f2f2f2;
}

.navigation-link:hover {
    color: #ff5752;
}

.pm_dropdown .navigationUser-logout {
    background-color: #2B3441 !important;
    border-color: #2B3441 !important;
    color: #f2f2f2 !important;
}

.pm_dropdown .navigationUser-logout:hover {
    background-color: #414E62 !important;
    border-color: #414E62 !important;
    color: #f2f2f2 !important;
}

.sidebar-btn-compose,
.sidebar-btn-compose:active {
    color: #fff !important;
    background: #ff5752 !important;
    border: none !important;
}

.sidebar-btn-compose:hover {
    color: #fff !important;
    background: #ff5752 !important;
    border: none !important;
    box-shadow: inset 0 400px 400px rgba(0, 0, 0, 0.1);
}

.headerDesktop-logo {
    background-color: #2B3441;
}

body section.sidebar {
    background: #2B3441;
}

body section.sidebar a.compose {
    background: #ff5752;
    color: #f2f2f2;
}

body section.sidebar a.compose:hover {
    background: #f2f2f2;
    border-color: #f2f2f2;
    color: #2B3441;
}

body section.sidebar ul.menu li a {
    color: #f2f2f2;
}

body section.sidebar ul.menu li a:hover {
    color: #ff5752;
}

body section.sidebar ul.menu li.active a,
body section.sidebar ul.menu li.active a {
    color: #f2f2f2;
}

body section.sidebar ul.menu li.active a i.fa,
body section.sidebar ul.menu li.active a i.fa:hover {
    color: #ff5752 !important;
    opacity: 1;
}

body section.sidebar ul.menu li a .fa-repeat {
    color: #f2f2f2;
    opacity: 1;
}

body section.sidebar ul.menu li a i.fa {
    color: #f2f2f2;
    opacity: 0.5;
}

body section.sidebar ul.menu li a i.fa:hover,
body section.sidebar ul.menu li a:hover i.fa {
    color: #f2f2f2;
    opacity: 1;
}

body section.sidebar ul.menu li a em {
    color: #f2f2f2;
    opacity: 0.5;
}

body section.sidebar div.labels ul li a {
    color: #f2f2f2;
    opacity: 0.5;
}

body section.sidebar div.labels ul li a:hover {
    color: #f2f2f2;
    opacity: 1;
}

body section.sidebar div.footer div.link a,
body section.sidebar a.version {
    color: #f2f2f2;
    opacity: 0.5;
}

body section.sidebar div.footer div.link a:hover,
body section.sidebar a.version:hover {
    color: #ff5752;
    opacity: 1;
}

body section.sidebar div.footer div.storage strong {
    color: #f2f2f2;
    opacity: 0.5;
}

body section.sidebar div.footer .bar em {
    background: #ff5752;
    height: 3px;
}

body section.sidebar div.footer .bar {
    background: #f2f2f2;
    height: 3px;
}

.pm_buttons,
.pm_buttons a {
    color: #2B3441;
}

.conversation.marked::before {
    background: #ff5752;
    width: 5px;
}

#pm_composer .composer header {
    background: #2B3441;
    color: #f2f2f2;
}

p a {
    color: #ff5752;
}

#pm_composer .composer footer .pm_button {
    background: #f2f2f2;
    color: #2B3441;
}

#pm_composer .composer footer .pm_button:hover {
    background: #f2f2f2;
    color: #2B3441;
}

#pm_composer .composer footer .pm_button.primary {
    background: #2B3441;
    color: #f2f2f2;
}

#pm_composer .composer footer .pm_button.primary:hover {
    background: #ff5752;
    color: #f2f2f2;
}

#pm_settings .pm_tabs {
    background: #e6eaf0;
}

#pm_settings .pm_tabs li a.pm_button {
    color: #2B3441;
    border-color: #e6eaf0;
}

#pm_settings .pm_tabs li a.pm_button:hover {
    color: #ff5752;
}

#pm_settings .pm_tabs li.active a.pm_button {
    color: #ff5752;
}

.pm_button.link {
    color: #ff5752;
}

.pm_toggle.off .off,
.pm_toggle.on .on {
    background: #2B3441;
    color: #f2f2f2;
}

.alert.alert-info {
    background: #e6eaf0;
    color: #000;
}

html.protonmail .text-purple {
    color: #ff5752;
}

#pm_settings .bar em {
    background: #ff5752;
    height: 4px;
}

#pm_settings .bar {
    background: #2B3441;
    opacity: 0.5;
    height: 4px;
}

#plans .plans .plan h3 {
    background: #2B3441;
    color: #f2f2f2;
}

#plans .plans .plan.plus-plan h3 span,
#plans .plans .plan.visionary-plan h3 span,
#plans .plans .plan.visionary-plan header {
    color: #f2f2f2;
}

#plans .plans .plan footer .cycle strong {
    color: #ff5752;
}

#plans .plans .plan footer .cycle .discount {
    border-color: transparent #ff5752 transparent transparent;
}

#plans .plans .plan footer .cycle .discount span {
    color: #f2f2f2;
}

.pm_modal .modal-dialog {
    border-color: #2B3441;
}

.pm_modal .modal-dialog .close {
    color: #f2f2f2;
    background: #2B3441;
}

.pm_badge {
    color: #f2f2f2;
}

.pm_badge.primary {
    background: #2B3441;
    color: #f2f2f2;
}

.pm_badge.success {
    background: #ff5752;
    color: #f2f2f2;
}

.pm_table table th a,
.pm_table table th .fa {
    color: #ff5752;
}

body .cg-notify-message.notification-success {
    background-color: #ff5752;
    color: #f2f2f2;
}

.protonLoader::after {
    border-top-color: #ff5752;
}

.protonLoaderIcon path {
    fill: #ff5752;
}

a {
    color: #ff5752;
}

#conversation-view .message .toggleDetails {
    color: #ff7777;
}

.conversation .row .meta .fa-star,
.starButton.starButton-starred .starButton-unstar,
#conversation-view .fa-star {
    color: #ff5752;
}

Comments