GithubHelp home page GithubHelp logo

magician11 / protonmail-themes Goto Github PK

View Code? Open in Web Editor NEW

This project forked from csalmeida/protonmail-themes

0.0 0.0 0.0 30.43 MB

Customise ProtonMail with themes and enhance your encrypted email experience.

CSS 99.28% JavaScript 0.72%

protonmail-themes's Introduction

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 v3.16.x of ProtonMail.

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 the Appearance tab.
  5. Paste the code under the Custom Theme section and press save.

In order to remove a theme, press clear.

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.

Green Lume

Screenshot of Green Lume theme.

Vitamin C

Screenshot of Vitamin C theme.

Dark Bubble Gum

Screenshot of Dark Bubble Gum theme.

Blue and Orange

Screenshot of Blue and Orange theme.

Ochin

Screenshot of Ochin theme.

Deutera One

Screenshot of Deutera One theme.

Dracula

Screenshot of Dracula theme.

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.

Quick setup guide

Required for theme creation only Install NodeJS, after forking/cloning this repository install dependencies:

cd protonmail-themes
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 chaging 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

Where can I find more themes?

Web References

protonmail-themes's People

Contributors

ayushs08 avatar csalmeida avatar dependabot[bot] avatar flipjargendy avatar kellycopas avatar klaudiosinani avatar mikebarkmin avatar plugarut avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.