search

Snoobyx / protonmail-material-themes

Material design inspired themes for ProtonMail Web Client
MIT License
36 stars 3 forks source link

readme

ProtonMail Material Themes

ProtonMail themes inspired by material design guidelines.

ProtonMail Material Theme

Install

1. Choose a theme

Click on the theme and copy the CSS from the raw file.

ProtonMail ProtonMail Material

Inbox ProtonMail Material - Inbox

Gmail ProtonMail Material - Gmail

2. Paste the CSS in your ProtonMail

In ProtonMail go to Settings > Appearance and paste the CSS you copied into "Custom theme" field. Click "Save" and enjoy the new modern look of your inbox

Features

The themes changes not only colors and shapes, but some of the layout and behavior (as far it is possible to be done with simple CSS).

Advanced Search

Advanced Search

Column & Rows Layouts

Column Rows

Contacts

Contacts

Settings

Settings

Composer

Composer

Mobile

Mobile

Labels, folders, buttons, switches and many more are redesigned.

Build your own theme

Clone the project:

git clone https://github.com/Snoobyx/protonmail-material-themes.git

Go to scss folder

cd scss

Create new scss file with your theme's name.

touch example.scss

Add the colors you want to change and add @import "theme/_default.scss"; at the end of the file.

Example:

$primary-color: #1E88E5;
$secondary-color: #D32F2F;

@import "theme/_default.scss";

Save the file and run compass compile

compass compile

Your new theme should appear in the css folder, copy the content to Settings > Appearance in ProtonMail and you're done!

You can check which variables you can add and change in your theme in scss/theme/_default.scss

Feedback

If you see something wrong or you want some feature please open an issue. If you want to fix or add something yourself feel free to make a pull request.

ToDo