Easy Themes for ProtonMail

A collection of CSS themes that's simple to edit the colors and more.

Dark Theme

/* Copy this line into ProtonMail's custom theme box: */
@import url("https://amdelamar.com/pm-theme/themes/pm-dark-theme.min.css");
/* Or this line: */
@import url("https://unpkg.com/pm-theme/themes/pm-dark-theme.min.css");
/* Or this one: */
@import url("https://cdn.jsdelivr.net/npm/pm-theme/themes/pm-dark-theme.min.css");

Or copy the CSS directly and edit the colors.

Flat Theme

/* Copy this line into ProtonMail's custom theme box: */
@import url("https://amdelamar.com/pm-theme/themes/pm-flat-theme.min.css");
/* Or this line: */
@import url("https://unpkg.com/pm-theme/themes/pm-flat-theme.min.css");
/* Or this one: */
@import url("https://cdn.jsdelivr.net/npm/pm-theme/themes/pm-flat-theme.min.css");

Or copy the CSS directly and edit the colors.

Background Image Theme

/* Copy this line into ProtonMail's custom theme box: */
@import url("https://amdelamar.com/pm-theme/themes/bg-image-theme.min.css");
/* Or this line: */
@import url("https://unpkg.com/pm-theme/themes/bg-image-theme.min.css");
/* Or this one: */
@import url("https://cdn.jsdelivr.net/npm/pm-theme/themes/bg-image-theme.min.css");

Or copy the CSS directly and edit the image variable --image to your own image. Take a look at coolbackgrounds.io for awesome backgrounds.

GM Theme

/* Copy this line into ProtonMail's custom theme box: */
@import url("https://amdelamar.com/pm-theme/themes/gm-theme.min.css");
/* Or this line: */
@import url("https://unpkg.com/pm-theme/themes/gm-theme.min.css");
/* Or this one: */
@import url("https://cdn.jsdelivr.net/npm/pm-theme/themes/gm-theme.min.css");

Or copy the CSS directly 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://unpkg.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 will set the variables globally. These themes have been simplified down into 7 "core" colors that make it easy to overwrite any colors of your choice. So take one of the themes above and set the colors with your own. You can also 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://amdelamar.com/pm-theme/themes/gm-theme.min.css?v=1");

  If you're using the "unpkg" or "jsdelivr" link, it always grabs the latest version from npm. So this isn't needed.

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.