Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

pm-theme

3.13.7 • Public • Published

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 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://amdelamar.com/pm-theme/themes/gm-theme.min.css?v=1");
    If you're using the "unpkg.com" 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.

install

npm i pm-theme

Downloadsweekly downloads

18

version

3.13.7

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar