Awesome Open Source
Awesome Open Source

ProtonMail Themes

Since v1.16, the encrypted mail service allows the use of themes with Cascading Style Sheets. You can pick a theme from the Themes folder or create a custom one yourself using CSS. Feel free to use the theme template provided as a starting point.

These themes were developed for v4.0.x of ProtonMail. Themes for v3.0.x can be used by downloading the v3.15.30 release.

Table of contents

Click to expand contents

Documentation 📖

How to use a theme

  1. Pick one from the themes folder in the repository.
  2. Select the theme and select the raw view to see all the code.
  3. Select all and copy the code.
  4. Install the Stylus browser if not done already.
  5. Add a new style in Stylus and paste the code in the text area.
  6. Below the text area select from the Applies to dropdown "URLs on the domain" and add beta.protonmail.com as a value and press save.
  7. Select the added theme in Stylus' Manage panel to enable it.

In order to remove a theme, open Stylus, click Manage, and untick the box of the theme or remove it altogether by pressing X.

The theme should be applied and you should see the changes immediately.

Available themes

Check out some of the available themes you can choose from.

There is also a full version available, that applies theme colors to the messages panel and more elements.

Expand theme list 👩🏻‍🎨

Green Lume

Screenshot of Green Lume theme.

Screenshot of Green Lume theme.

Vitamin C

Screenshot of Vitamin C theme.

Screenshot of Vitamin C theme.

Dark Bubble Gum

Screenshot of Dark Bubble Gum theme.

Screenshot of Dark Bubble Gum theme.

Blue and Orange

Screenshot of Blue and Orange theme.

Screenshot of Blue and Orange theme.

Ochin

Screenshot of Ochin theme.

Screenshot of Ochin theme.

Dracula

Screenshot of Dracula theme.

Screenshot of Dracula theme.

Monokai

Screenshot of Monokai theme.

Screenshot of Monokai theme.

Deutera One

Screenshot of Deutera One theme.

Screenshot of Deutera One theme.

Gruvbox

Screenshot of Gruvbox theme.

Screenshot of Gruvbox theme.

Inbox

Screenshot of Inbox theme.

Nord

Screenshot of Nord theme.

Screenshot of Nord theme.

Quick setup guide

Required for theme creation only

Install NodeJS, after forking/cloning this repository install dependencies:

cd protonmail-themes
# Requires Node v15.2.1, run `nvm use` to set the correct version. 
npm install

Themes can be created by duplicating and renaming the example theme folder and its .scss file to the theme name. Then edit that file by changing the color variables. You can also extend the theme by editing the _styles.css partial or by creating a custom one.

Two commands are available to compile themes:

*// Compiles themes as changes are made.*
npm run watch

*// Compiles all themes.*
npm run build

Feedback and fixes

If you notice something's missing feel free to make a pull request. If you have no time to fix it please open an issue.

Supporting and maintaining the project

ProtonMail is a great email service, I enjoy working on the project and provide themes for all. Please consider making a small donation, just the price of a cup of coffee goes a long way to help me maintain it and keep adding color to your private email experience! Thank you 🙇🏻

PayPal Me

Frequently Asked Questions

Do these themes compromise security?

In short, no. All themes listed here will always style existing elements from ProtonMail's UI and not import any third party files from anywhere. At the time I created these themes I've received a few directions from ProtonMail's co-founder Jason Stockman in order to avoid breaking layout and security issues.

Why is Stylus required to use custom themes?

Support for custom themes in ProtonMail's appearance settings seems to have been temporarily disabled in ~v4.0.0 beta 33.

To use custom themes an alternative needs to be used to load the stylesheet. Stylus has been recommended but any other alternative should work.

Where can I find more themes?

Web References


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
css (7,345) 
themes (133)