Easy Themes for ProtonMail

A collapsed CSS that's simple to edit colors and share.

 

Dark Theme

/* Copy this line into ProtonMail's custom theme box: */
@import url("https://austindelamar.com/pm-theme/themes/pm-dark-theme.min.css");

Or copy the CSS here and edit the colors.

 

Flat Theme

/* Copy this line into ProtonMail's custom theme box: */
@import url("https://austindelamar.com/pm-theme/themes/pm-flat-theme.min.css");

Or copy the CSS here and edit the colors.

 

GM Theme

/* Copy this line into ProtonMail's custom theme box: */
@import url("https://austindelamar.com/pm-theme/themes/gm-theme.min.css");

Or copy the CSS here and edit the colors.

 

Customize

Take any theme above and you can override the theme colors with your own.

/* First load the theme. */
@import url("https://austindelamar.com/pm-theme/themes/gm-theme.min.css");

/* Now you can change the colors... */
:root {
    --theme1: #3652d1; /* Blue instead of Red */
}

And that's it!

CSS variables make it easy to override colors. The root keyword just means it to set the variables globally. This CSS-only theme has been condensed down into 7 "core" colors that make it very simple to use any colors of your choice. So take one of the themes above and overwrite these colors with your own. You can generate a pretty color palette here.

:root {
/* Core Theme Colors */
    --theme1: #66669a; /* Purple */
    --theme2: #5f5f60; /* Dark Grey */
    --theme3: #f0f0f0; /* Light Grey */
    --theme4: #bcbdbf; /* Grey */
    --theme5: #797a7c; /* Medium Grey */
    --theme6: #9397cd; /* Light Purple */
    --theme7: #fefefe; /* White */
}

1. Copy a CSS theme.
2. Paste in ProtonMail. Settings > Appearance > Custom Theme.
3. Customize the colors (or leave default).
4. Enjoy!

Notes

• This is only available for the WEB version and not the MOBILE app.
• Some of these themes aren't always the best. If you have any problems you can open an issue here.
• Some browsers cache CSS pages for a long time. If you aren't seeing the latest version, try adding a `?v=1" to the end, like this:

  /* Force browser to grab fresh copy of CSS */
  @import url("https://austindelamar.com/pm-theme/themes/gm-theme.min.css?v=1");

Privacy and Performance

The above code used a CSS import statement for ease of use and quickly trying out a theme. However, the CSS import statement causes files to load sequentially instead of parallel, thus slowing down your pages load performance. Also, if your privacy is of the utmost importance, then I wouldn't use the CSS import statment from above. It potentially could reveal your behavior e.g. identifying when you load up ProtonMail using which specific theme. To avoid this, please copy & paste the entire contents of the CSS file, rather than use the import statement.

Contribute

Spot a problem or bug? You can open an issue here.

I'll accept pull requests to the master branch too. Please make sure to minify the CSS as well.

Share with friends

• Save, copy, tweak, and share any of this CSS theme.
• Licensed as MIT and free forever.