blob: 3343ac38f2def1571ede7795da247703e23e26e4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
# 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
<details>
<summary>Click to expand contents</summary>
- [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)
- [Contributors](#contributors)
- [Supporting and maintaining the project](#supporting-and-maintaining-the-project)
- [Where can I find more themes?](#where-can-i-find-more-themes)
- [Web References](#web-references)
</details>
### 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. At ProtonMail's website head over to **Settings**, click Themes under the **Appearance** section.
5. Paste the code under the *Custom Theme* section and press save.
> *In order to remove a theme, switch to default or remove Custom Theme contents and press save.*
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 to the messages panel and more elements.
<details>
<summary><b>Expand theme list</b> 👩🏻🎨</summary>
#### [Green Lume](themes/green_lume)
#### [Vitamin C](themes/vitamin_c)
#### [Dark Bubble Gum](themes/dark_bubble_gum)
#### [Blue and Orange](themes/blue_and_orange)
#### [Ochin](themes/ochin)
#### [Dracula](themes/dracula)
#### [Monokai](themes/monokai)
#### [Deutera One](themes/deutera_one)
#### [Gruvbox](themes/gruvbox)
</details>
### 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.
## Quick setup guide
> **Required for theme creation only**
Install [NodeJS](https://nodejs.org/en/), after forking/cloning this repository install dependencies:
```
cd protonmail-themes
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
```
### 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.
### Contributors
[](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/0)[](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/1)[](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/2)[](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/3)[](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/4)[](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/5)[](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/6)[](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/7)
### 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 🙇🏻
<a href='https://www.paypal.me/csalmeida/5'>
<img src='https://getflywheel.com/wp-content/uploads/2015/10/paypal-donate-button-large.png' alt='PayPal Me' width='160' />
</a>
#### 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 Greenlume theme got featured on ProtonMail's website](https://protonmail.com/blog/protonmail-themes/)
|
