aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorcristiano <[email protected]>2020-12-30 12:27:55 +0000
committercristiano <[email protected]>2020-12-30 12:27:55 +0000
commitf557dc3cf644a74f0d14d5fa97d67546c991c596 (patch)
tree73fb645e9389a8c0c299f9d1164ff7b1f800c40b
parentc5307ac837faa581a7206cdafd8aea063b10f7f8 (diff)
downloadprotonmail-themes-f557dc3cf644a74f0d14d5fa97d67546c991c596.tar.xz
protonmail-themes-f557dc3cf644a74f0d14d5fa97d67546c991c596.zip
Updates README. 📖
-rw-r--r--README.md42
-rw-r--r--docs/theme-templates-guide.md22
2 files changed, 44 insertions, 20 deletions
diff --git a/README.md b/README.md
index 9be47b7..de31954 100644
--- a/README.md
+++ b/README.md
@@ -13,20 +13,21 @@ Since [v1.16](https://blog.protonmail.ch/protonmail-beta-v1-16-release-notes/),
- [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)
+- [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](#quick-setup-guide)
- - [Themes](#themes)
- - [Templates](#templates)
- - [Theme Compilation](#theme-compilation)
- - [Contributing](#contributing)
- - [Is there something missing?](#is-there-something-missing)
+ - [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)
@@ -37,9 +38,12 @@ Since [v1.16](https://blog.protonmail.ch/protonmail-beta-v1-16-release-notes/),
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. At ProtonMail's website head over to **Settings**, click Themes under the **Appearance** section.
-1. 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.*
+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 `beta.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.
@@ -100,10 +104,6 @@ Check out some of the available themes you can choose from.
![Screenshot of Inbox theme.](screenshots/inbox.png)
</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**
@@ -130,9 +130,6 @@ 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/images/0)](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/0)[![](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/images/1)](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/1)[![](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/images/2)](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/2)[![](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/images/3)](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/3)[![](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/images/4)](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/4)[![](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/images/5)](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/5)[![](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/images/6)](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/links/6)[![](https://sourcerer.io/fame/csalmeida/csalmeida/protonmail-themes/images/7)](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 🙇🏻
@@ -140,6 +137,17 @@ ProtonMail is a great email service, I enjoy working on the project and provide
<img src='https://getflywheel.com/wp-content/uploads/2015/10/paypal-donate-button-large.png' alt='PayPal Me' width='160' />
</a>
+### 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 temporarily 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)
diff --git a/docs/theme-templates-guide.md b/docs/theme-templates-guide.md
index b404701..129e3bb 100644
--- a/docs/theme-templates-guide.md
+++ b/docs/theme-templates-guide.md
@@ -1,10 +1,12 @@
# Theme Template
-There's a template provided at [`/templates/theme_example`](`../templates/theme_example`) that allows anyone that knows a bit a about `SCSS` to quickly generate a theme.
+> This guide expands on theme creation. Please follow the [quick setup guide](README.md#quick-setup-guide) before proceeding.
+
+There's a template provided at [`/templates/theme_example`](`../templates/theme_example`) that allows anyone that knows a bit a about `SCSS` to generate a theme.
This template does not style every single element of ProtonMail's UI and sticks to changing the `color` of elements rather than `position` or `font`.
-Feel free to extend and adapt this template to your needs bu creating an `_override.scss` file and adding new styles there, those styles will be scoped to your theme only. The [Ochin theme can be consulted as an example](../templates/ochin) of using overrides can be used on a theme.
+Feel free to extend and adapt this template to your needs by creating an `_override.scss` file and adding new styles there, those styles will be scoped to your theme only. The [Ochin theme can be consulted as an example](../templates/ochin) of using overrides can be used on a theme.
## Creating a theme from the template
@@ -27,7 +29,7 @@ Each variable applies to a certain area of the UI. The `$base` color changes the
#### (Optional) Changing other variables
There is another set of variables available that will change elements that tend to fall out of the groups defined earlier. This could include content boxes, warnings, or elements that usually show up on the Settings part of the app. Feel free to experiment changing these if you are looking for a bit more customization (for adding more to the theme you can also extend the template, we'll get to this later).
-``` scss
+```scss
$text_color: #0d0d0d;
$extra_color: #e6eaf0;
$danger_color: #d62646;
@@ -64,5 +66,19 @@ Override styles will be scoped to your theme only. The [Ochin theme can be consu
@import 'override';
```
+In `_override.scss` add the styles specific to your theme:
+
+```scss
+.pm-button--primary {
+ background: peachpuff;
+}
+
+.isDarkMode .pm-button--primary {
+ background: darkgrey;
+}
+```
+
+Your theme will compile to CSS and can be found in `/themes/your_theme_name` by running the build task present in the [quick setup guide](README.md#quick-setup-guide), in the README.
+
### Final touches
Test your theme on ProtonMail and re-iterate as needed. If you think your theme is ready and *cool* you can submit a pull request and add it to this repo so everyone can use it.