Protonmail red theme

Apr 04, 2020 3 min read
Protonmail red theme

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;
}
Great! Next, complete checkout for full access to ArturoFM.
Welcome back! You've successfully signed in.
You've successfully subscribed to ArturoFM.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info has been updated.
Your billing was not updated.