Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/csalmeida/protonmail-themes

Customise ProtonMail with themes and enhance your encrypted email experience.
https://github.com/csalmeida/protonmail-themes

css protonmail themes

Last synced: 3 months ago
JSON representation

Customise ProtonMail with themes and enhance your encrypted email experience.

Awesome Lists containing this project

README 

        
# ProtonMail Themes

Since [v1.16](https://blog.protonmail.ch/protonmail-beta-v1-16-release-notes/), the encrypted mail service allows the use of themes with Cascading Style Sheets. You can pick a theme from the [Themes](themes/) folder or create a custom one yourself using CSS. Feel free to [use the theme template provided](templates/theme_example) as a starting point.



> These themes were developed for **[v4.0.x](https://github.com/csalmeida/protonmail-themes/releases)** of ProtonMail.



## Table of contents



Click to expand contents



- [How to use a theme](#how-to-use-a-theme)

- [Available themes](#available-themes)

  - [Do these themes compromise security?](#do-these-themes-compromise-security)

- [Quick setup guide](#quick-setup-guide)

- [Feedback and fixes](#feedback-and-fixes)

- [Supporting and maintaining the project](#supporting-and-maintaining-the-project)

- [Frequently Asked Questions](#frequently-asked-questions)

- [Where can I find more themes?](#where-can-i-find-more-themes)

- [Web References](#web-references)



#### Documentation 📖



- [Documentation](#documentation)

  - [Quick Setup Guide](docs/README.md#quick-setup-guide)

  - [Creating a theme](docs/README.md#creating-a-theme)

  - [Themes](docs/README.md#themes)

  - [Templates](docs/README.md#templates)

  - [Theme Compilation](docs/README.md#theme-compilation)

  - [Contributing](docs/README.md#contributing)

  - [Is there something missing?](docs/README.md#is-there-something-missing)

- [Project's README](../README.md)

- [Theme Template Guide](./theme-template-guide.md)

- [Theme Versioning](./theme-versioning.md)



### How to use a theme

1. Pick one from the themes folder in the repository.

1. Select the theme and select the raw view to see all the code.

1. Select all and copy the code.

1. Install the [Stylus](https://github.com/openstyles/stylus#releases) browser if not done already.

1. Add a new style in *Stylus* and paste the code in the text area.

1. Below the text area select from the *Applies to* dropdown *"URLs on the domain"* and add `protonmail.com` as a value and press save.

1. 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.



Expand theme list 👩🏻‍🎨



#### [Green Lume](themes/green_lume)



![Screenshot of Green Lume theme.](screenshots/green_lume.png)



#### [Vitamin C](themes/vitamin_c)



![Screenshot of Vitamin C theme.](screenshots/vitamin_c.png)



#### [Dark Bubble Gum](themes/dark_bubble_gum)



![Screenshot of Dark Bubble Gum theme.](screenshots/dark_bubble_gum.png)



#### [Blue and Orange](themes/blue_and_orange)



![Screenshot of Blue and Orange theme.](screenshots/blue_and_orange.png)



#### [Ochin](themes/ochin)



![Screenshot of Ochin theme.](screenshots/ochin.png)



#### [Dracula](themes/dracula)



![Screenshot of Dracula theme.](screenshots/dracula.png)



#### [Monokai](themes/monokai)



![Screenshot of Monokai theme.](screenshots/monokai.png)



#### [Deutera One](themes/deutera_one)



![Screenshot of Deutera One theme.](screenshots/deutera_one.png)



#### [Gruvbox](themes/gruvbox)



![Screenshot of Gruvbox theme.](screenshots/gruvbox.png)



### [Nord](themes/nord)



![Screenshot of Nord theme.](screenshots/nord.png)



## Quick setup guide



> **Required for theme creation only**



Install [NodeJS](https://nodejs.org/en/), after forking/cloning this repository install dependencies:



```bash

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](templates/theme_example) 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

```



## Container Setup with Docker



1. [Install Docker](https://docs.docker.com/engine/install/). For MacOS and Windows, [Docker Desktop](https://docs.docker.com/engine/install/#desktop) is recommended instead.

1. Run `docker compose up -d`. This will run the development environment.



Rebuild and run Docker container from a clean slate with with:



```bash

# Change directory into the project.

cd protonmail-themes

```



```bash

docker compose rm &&

docker compose pull &&

docker compose build --no-cache &&

docker compose up -d --force-recreate

```



**Additional notes:**



- To examine the container run `docker ps`.

- To stop the container run `docker compose down`.

- The container will run a Node image with the version this project supports along with the dependencies. Then it will run the watch command so themes can be compiled as changes are made.

- When using **Windows Subsystem Linux**, cloning the repo into a folder inside `/home/` directory of you distro of choice is reccomended since mounted drivers and folders (i.e `/mnt/c`) won't issue a file change event.



### 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](https://twitter.com/jasonstockman) 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 disabled in `~v4.0.0 beta 33`](https://www.reddit.com/r/ProtonMail/comments/j2l1im/protonmail_beta_41_removes_ability_to_use_and/g767k97/?context=3).



To use custom themes an alternative needs to be used to load the stylesheet. [Stylus](https://github.com/openstyles/stylus#releases) has been recommended but any other alternative should work.



#### Where can I find more themes?

* [ProtonMail's Official Themes](http://protonmail.tumblr.com/)

* [Austin Delamar's ProtonMail Themes](https://github.com/amdelamar/pm-theme)

* [Jérémie Cook's ProtonMail Theme](https://github.com/jeremiecook/protonmail-theme)

* [Quark, a theme creator for ProtonMail](https://github.com/csalmeida/quark)



#### Web References

* [The Green Lume theme got featured on ProtonMail's website](https://protonmail.com/blog/protonmail-themes/)