A collection of CSS themes that's simple to edit the colors and more.
/* 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.
/* 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.
/* 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.
/* 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.
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 */
}
- Copy a CSS theme.
- Paste in ProtonMail.
Settings
>Appearance
>Custom Theme
. - Customize the colors (or leave default).
- Enjoy!
- 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:If you're using the "unpkg" or "jsdelivr" link, it always grabs the latest version from npm. So this isn't needed./* Force browser to grab fresh copy of CSS */ @import url("https://amdelamar.com/pm-theme/themes/gm-theme.min.css?v=1");
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.
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.
- Save, copy, tweak, and share any of this CSS theme.
- Licensed as MIT and free forever.