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

<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 !