Dark Theme for Proton Mail

proton-mail.css

/* ProtonMail */
/* CLASSIC THEME */

body { font-size: 14px }

body,
.pm_opensans {
    font-family: 'Lucida Grande', Verdana, Arial, sans-serif
}

/* UI Elements */

.pm_buttons,
.pm_button,
.pm_toggle span.knob {
    border-color: #999;
}

.pm_button {
    background-image: -webkit-linear-gradient(#fff, #ddd);
    background-image: linear-gradient(#fff, #ddd);
    background: -moz-linear-gradient(#fff, #ddd)
}

.pm_button:active {
    box-shadow: inset 0 0 2rem rgba(0,0,0,.1) ;
}

.pm_button.primary {
    background: #7575a3;
    background-image: -webkit-linear-gradient(#7575a3, #669);
    background-image: linear-gradient(#7575a3, #669);
}

.pm_button.success {
    background: #93bf73;
    background-image: -webkit-linear-gradient(#93bf73, #aecf96);
    background-image: linear-gradient(#93bf73, #aecf96)
}

.pm_button.error {
    background: #c26164;
    background-image: -webkit-linear-gradient(#c26164, #ad4346);
    background-image: linear-gradient(#c26164, #ad4346);
    color: #fff ;
    border-color: #ad4346;
}

.pm_button.primary,
.pm_button.success {
    text-shadow: none;
    color: #fff;
    border-color: transparent
}

.pm_button.link,
.pm_button.primary,
.pm_button.success {
    border-color: transparent
}

.pm_button.link {
    background-color: transparent;
    color: #8286c5;
    text-decoration: underline;
    box-shadow: none;
    background-image: none;
}

.pm_button,
.pm_buttons :not(.pm_dropdown) a,
.pm_buttons :not(.pm_dropdown) button {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.pm_buttons a {
    background-image: -webkit-linear-gradient(#fff, #ddd);
    background-image: linear-gradient(#fff, #ddd);
    background: -moz-linear-gradient(#fff, #ddd)
}

.pm_buttons a.active,
.pm_buttons button.active,
.pm_buttons a:active,
.pm_buttons button:active,
.navigation-link:active,
.navigation-link.active {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 2px 2px 0 rgba(0,0,0,.2), inset 0 0 2rem rgba(0,0,0,.1)
}

.pm_buttons .pm_dropdown a {
    background: none;
}

.pm_table th { color: #555 }

.pm_toggle { box-shadow: 0 0 0 1px #999 }

.pm_toggle.off .on,
.pm_toggle.off .off,
.pm_toggle.on .on,
.pm_toggle.on .off {
    opacity: 1;
}


/* Layout */

.sidebarApp-container,
.mobileMode .sidebarApp-container,
.headerDesktop-logo,
.composerHeader-container { background: #333 }

.search-form-fieldset,
.searchForm-action-button-toggle:hover,
.searchForm-action-button-advanced:hover { background-color: rgba(0,0,0,0.2) }

.headerDesktop-container { background: #555 }

.composer-container {
    box-shadow: none !important;
    border: 1px solid #333;
}

/* Mobile */

#pm_header-mobile { background: #555 }


/* Conversations */

.conversation.read,
.conversation.read .pm_labels label,
#conversation-list-rows .conversation.read .subject .pm_labels,
#conversation-list-rows .conversation.read .subject .pm_labels label,
#conversation-list-columns .conversation.read .subject .pm_labels,
#conversation-list-columns .conversation.read .subject .pm_labels label {
    background: #ddd;
}

#conversation-list-rows .conversation.active,
#conversation-list-columns .conversation.active {
    background: #555;
}

.conversation.read .pm_labels label { box-shadow: 0.25rem 0 0 0.25rem #ddd }
.conversation.active .pm_labels label {
    box-shadow: 0.25rem 0 0 0.25rem #555;
    background: #555;
}

#conversation-list-rows .conversation { border-color: #999 }


/*
 * ----------------------------------------
 * Dark Theme Changes
 * ----------------------------------------
 */

.sidebarApp-container,
.mobileMode .sidebarApp-container,
.headerDesktop-logo,
.composerHeader-container,
.headerDesktop-container {
  background: #17172c;
}

#pm_main {
  color: #fff;
  background: #252535;
}

body #conversation-list-rows .conversation {
  background: #4f527b;
}

body #conversation-list-rows .conversation.read {
  background: #252535;
}

body #conversation-list-rows .conversation .subject h4 {
  color: #fff;
}

.conversation.read,
.conversation.read .pm_labels label,
#conversation-list-rows .conversation.read .subject .pm_labels,
#conversation-list-rows .conversation.read .subject .pm_labels label,
#conversation-list-columns .conversation.read .subject .pm_labels,
#conversation-list-columns .conversation.read .subject .pm_labels label {
  background: #252535;
}

#conversation-view .frame {
  background: #fff;
  color: #555;
}

#conversation-view .message .summary,
#conversation-view .message .summary .labels,
#conversation-view .message .summary .status,
#conversation-view .message .summary .time,
#conversation-view .message .details {
  background: inherit;
}

#conversation-view header h1,
#conversation-view header h1 .starButton a {
  color: #fff;
}

#conversation-view .message .summary .time::after {
  background: none;
}

.customRadio-input:checked + .customRadio-mask {
  border-color: #252535;
}

.pm_toggle span.knob {
  background: #252535;
}

a,
.alert.alert-danger a, .alert.alert-info a, .alert.alert-success a, .alert.alert-warning a {
  color: #7575a3;
}

.alert.alert-info {
  background: #4b4c57;
  color: #fff;
}

.pm_buttons,
.pm_button,
.pm_toggle span.knob {
    border-color: #252535;
}

.pm_toggle { box-shadow: 0 0 0 1px #252535 }

.pm_table table.plain th,
.pm_table table td {
  color: #fff;
}

#pm_settings .donate .well {
  box-shadow: none;
}

.pm_form select,
.pm_form .pm_select select {
  color: #fff;
  background: #252535;
  border: 1px solid #fff;
}

.pm_form .pm_select .fa {
  z-index: 3;
}

#plans .plans .plan.plus-plan footer,
#plans .plans .plan.plus-plan header {
  background: #252535;
}

#plans .plans .plan footer .cycle label,
#plans .plans .plan footer .cycle {
  color: #fff;
}

.pm_sort ul li.highlight {
  background-color: #252535;
}

.pm_table table tr.hasTable table {
  background-color: #252535;
}

code {
  color: #fff;
}

.searchForm-advanced-wrapper {
  background: #252535;
}

.searchForm-advanced-container label,
.pm_form .pm_select .fa {
  color: #fff;
}

.settingsDashboard-overview-section-table-container .overviewSection-container .overviewSection-tbody-billing,
.settingsDashboard-plans,
.settingsDashboard-plans::after, .settingsDashboard-plans::before {
  background: initial;
}

@dylants , @bapillmore and @2803media Nice work, thanks!

Amazing work! Actually I gave you a star before see the results ^^ but now I see you really deserved it!

Actually its incomplete. Buttons are white (Linux KDE Firefox). Unread messages are white, text is white ... contrast sucks because its to extreme. That bright white text needs to be more grayish.

Compared to https://addons.mozilla.org/de/firefox/addon/darkreader/ this it looks really really bad. But the dark reader somehow changes the checkbox background and looks very confusing so I ended up here. You may take some inspiration how this addon does things. It super impressive as its not just inverting colors but it does some smart colors calculations I guess and it works for almost every site including Github and you can set brightness and contrast and even changes images colors in some cases I think.

Thanks @dylants , @bapillmore and @2803media. I noticed that the top left large compose button and bottom left footer mail storage statistics are still purple. Could you make them the same yellow as the stars that are used for the unread messages or some other color other than purple or just post the CSS and we can fill in the color of our choosing? Thank you.

Great job! Thank you!

high, wizards!!
how about frame containing inbox items - which are still white by the code presented
that shit kinda drive me nuts )
i just wana all frames 55555555

<div class="summary-right"> which is a child of <div class="summary"> has the wrong background.

The message background will need to stay white IMO. Too many email apps and even more email users are background color unaware of their formatting changes. They assume white even though they don't know they do. They use an overridden foreground with an inherited background for example. Works right on their machine is good enough for 99.9%.

FWIW I believe Dark Reader uses alpha / transparency to make some things look darker.

That's perfect
Thank you very much for this hard work

Many thanks kind sir!

I fixed unread conversation backgrounds on desktop and mobile. We need to select by #conversation-list-columns and #conversation-list-mobile instead of #conversation-list-rows. It also fixes the .summary-right issue mentioned above

/*
 * ----------------------------------------
 * Dark Theme Changes
 * ----------------------------------------
 */

.sidebarApp-container,
.mobileMode .sidebarApp-container,
.headerDesktop-logo,
.composerHeader-container,
.headerDesktop-container {
  background: #17172c;
}

#pm_main {
  color: #fff;
  background: #252535;
}

body #conversation-list-columns .conversation,
body #conversation-list-mobile .conversation {
  background: #4f527b;
}

body #conversation-list-columns .conversation.read,
body #conversation-list-mobile .conversation.read {
  background: #252535;
}

body #conversation-list-columns .conversation .subject,
body #conversation-list-mobile .conversation .subject {
  color: #fff;
}

.conversation.read,
.conversation.read .pm_labels label,
#conversation-list-rows .conversation.read .subject .pm_labels,
#conversation-list-rows .conversation.read .subject .pm_labels label,
#conversation-list-columns .conversation.read .subject .pm_labels,
#conversation-list-columns .conversation.read .subject .pm_labels label {
  background: #252535;
}

#conversation-view .frame {
  background: #fff;
  color: #555;
}

#conversation-view .message .summary,
#conversation-view .message .summary .labels,
#conversation-view .message .summary .status,
#conversation-view .message .summary .time,
#conversation-view .message .summary .summary-right,
#conversation-view .message .details {
  background: inherit;
}

#conversation-view header h1,
#conversation-view header h1 .starButton a {
  color: #fff;
}

#conversation-view .message .summary .time::after {
  background: none;
}

.customRadio-input:checked + .customRadio-mask {
  border-color: #252535;
}

.pm_toggle span.knob {
  background: #252535;
}

a,
.alert.alert-danger a, .alert.alert-info a, .alert.alert-success a, .alert.alert-warning a {
  color: #7575a3;
}

.alert.alert-info {
  background: #4b4c57;
  color: #fff;
}

.pm_buttons,
.pm_button,
.pm_toggle span.knob {
    border-color: #252535;
}

.pm_toggle { box-shadow: 0 0 0 1px #252535 }

.pm_table table.plain th,
.pm_table table td {
  color: #fff;
}

#pm_settings .donate .well {
  box-shadow: none;
}

.pm_form select,
.pm_form .pm_select select {
  color: #fff;
  background: #252535;
  border: 1px solid #fff;
}

.pm_form .pm_select .fa {
  z-index: 3;
}

#plans .plans .plan.plus-plan footer,
#plans .plans .plan.plus-plan header {
  background: #252535;
}

#plans .plans .plan footer .cycle label,
#plans .plans .plan footer .cycle {
  color: #fff;
}

.pm_sort ul li.highlight {
  background-color: #252535;
}

.pm_table table tr.hasTable table {
  background-color: #252535;
}

code {
  color: #fff;
}

.searchForm-advanced-wrapper {
  background: #252535;
}

.searchForm-advanced-container label,
.pm_form .pm_select .fa {
  color: #fff;
}

.settingsDashboard-overview-section-table-container .overviewSection-container .overviewSection-tbody-billing,
.settingsDashboard-plans,
.settingsDashboard-plans::after, .settingsDashboard-plans::before {
  background: initial;
}

Appreciate this CSS; support says there's supposed to be a dark mode available in the web client but I don't see it. This is fantastic! Cheers!

Thank you for your hard work for us!

Best regards

Appreciate this CSS; support says there's supposed to be a dark mode available in the web client but I don't see it. This is fantastic! Cheers!

It appears it's only available in the beta protonmail. You can get there via: beta.protonmail.com

Thank you for the CSS! This is safe, right? Just a little paranoid since Proton says some might be safe.

Good theme thanks !