Added first batch of themes.

Added 10 themes for v.1.16 . Also updated readme file.

14 files changed, 1463 insertions, 0 deletions

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..bdb0cab
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,17 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# Custom for Visual Studio
+*.cs     diff=csharp
+
+# Standard to msysgit
+*.doc	 diff=astextplain
+*.DOC	 diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot  diff=astextplain
+*.DOT  diff=astextplain
+*.pdf  diff=astextplain
+*.PDF	 diff=astextplain
+*.rtf	 diff=astextplain
+*.RTF	 diff=astextplain
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..96374c4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,43 @@
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# =========================
+# Operating System Files
+# =========================
+
+# OSX
+# =========================
+
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
diff --git a/.nojekyll b/.nojekyll
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/.nojekyll
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c0abe4e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,10 @@
+# ProtonMail Themes
+Since [v.1.16](https://blog.protonmail.ch/protonmail-beta-v1-16-release-notes/), the encrypted mail service now allows themes using the Cascading Style Sheets! So feel free to pick one and use it.
+
+### How to use these
+Simply pick one and copy the code over to ProtonMail by heading over to **settings>theme**, paste the code under the *CSS Theme Code* section.
+
+
+### Like to build themes?
+Then why not contribute? [Send your themes over to us](http://www.csalmeida.com/) and be part of this project. Either if you are a beginner or advanced in CSS or Git we would like to colaborate!
+
diff --git a/Themes/v1.16/b_transition.css b/Themes/v1.16/b_transition.css
new file mode 100644
index 0000000..961cfda
--- /dev/null
+++ b/Themes/v1.16/b_transition.css
@@ -0,0 +1,141 @@
+*:not(.fa) {
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+}
+body {
+    font-size: 0.8rem;
+}
+
+/* ProtonMail logo
+   -Useful for clear themes.
+*/
+
+#sidebar a img {
+    background: #0D5075;
+    padding: 0.5rem;
+    border-radius: 5px;
+}
+
+/* Main Backgrounds */
+#sidebar, #main footer .wrap, body #mainHeader, footer .wrap, #sidebar .storage, #footer, body.outside #mainHeader {
+    background: #E6E6E6;
+}
+/* Header Search Bar */
+#mainHeader .search.dark input {
+    background: #E6E6E6;
+    color: #0D5075;
+}
+#mainHeader .search input {
+    border-radius: 0.3rem;
+    border: 2px double #0D5075;
+}
+
+p.hello {
+    opacity:0.6;
+}
+/* Links */
+#mainHeader .dark button, #mainHeader p, #mainHeader a, 
+#sidebar ul li a, #sidebar ul li a span, #sidebar ul.menu li a.active,
+#sidebar ul.menu li a.active span, .sizebar, #footer .wrap a, #listing-actions-buttons ul li a:hover, 
+#sidebar ul.menu li a.active, ul.menu li a.active span, #mainHeader a span {
+    color: #0D5075 !important;
+}
+#mainHeader .dark button:hover, #mainHeader .dark button:hover .fa,
+#compose_button span, #compose_button strong, #mainHeader a:active, 
+#mainHeader a:hover, #mainHeader a:hover, #mainHeader li a.active span, 
+#mainHeader li a:hover span, #sidebar,#sidebar ul.menu li a:hover span, 
+#sidebar ul.menu li a.active:hover, #footer .wrap a:hover, #sidebar ul.menu li a:hover {
+    color: #ED1C24 !important;
+}
+
+/* Sidebar compose button */
+#compose_button strong, #sidebar #compose_button a  span {
+    color: #E6E6E6 !important;
+}
+
+#compose_button a {
+    background: #0D5075;
+}
+
+#compose_button a:active, #compose_button a:hover, .fill {
+    background: #ED1C24;
+}
+
+/* Sidebar Number */
+#sidebar .number, #sidebar .active .number {
+    background: #fff;
+    color: #0D5075;
+}
+
+#sidebar ul.menu li a:hover .number {
+    background: #ED1C24;
+    color: #E6E6E6;
+}
+
+/* Sidebar Active Section */
+#sidebar ul.menu li a.active {
+    background: #B3B3B3;
+}
+
+/*Sidebar Dividers */
+.divider {
+    opacity: 0.3;
+}
+
+/* Footer Text */
+#footer .wrap {
+    color: #1C1C1C;
+}
+/*Mail Commandbar */
+#messages tbody {
+    font-size: 0.8rem !important;
+}
+/* Page Buttons */
+.pure-button.pure-button-primary, body .ui-button.pure-button-primary {
+    background: #0D5075;
+    transition: background .2s ease-in;
+}
+.pure-button.pure-button-primary:focus, .pure-button.pure-button-primary:hover, body .ui-button.pure-button-primary:focus, body .ui-button.pure-button-primary:hover {
+    background: #ED1C24;
+}
+/* Labels */
+#listing .pmlabel {
+    border-radius: 0.2rem;
+    padding: 0.1rem 0.7rem;
+}
+/*Reading Mail*/
+#primaryHeader #titleBar h1 {
+    font-size: 0.9rem;
+}
+#page-m .pmlabel {
+    padding: 0.1rem 1.2rem;
+    padding-left: 0.6rem;
+    border-radius: 0.2rem;
+}
+span.bubble {
+    padding: 0.1rem 0.5rem;
+}
+span.bubble:hover {
+    background: #0D5075 !important;
+    border-color: #0A3D59 !important;
+    color:#E6E6E6 !important;
+}
+#dkim .verified {
+    color:#8CC63F;
+}
+/*Unread*/
+#messages tr.unread td {
+    background: #fff;
+}
+
+#messages tr.unread, #messages tr.unread a, #messages tr.unread td {
+    color: #0A3D59 !important;
+}
+/*Starred Mails*/
+body table#messages tr.starred td {
+    background: rgba(55, 177, 245, 0.14) none repeat scroll 0% 0%;
+}
+/*Responsive Menu Background */
+#mmm {
+    background: #B3B3B3;
+}
+
diff --git a/Themes/v1.16/circus_iii.css b/Themes/v1.16/circus_iii.css
new file mode 100644
index 0000000..e081b69
--- /dev/null
+++ b/Themes/v1.16/circus_iii.css
@@ -0,0 +1,132 @@
+*:not(.fa) {
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+}
+body {
+    font-size: 0.8rem;
+}
+
+/* Main Backgrounds */
+#sidebar, #main footer .wrap, body #mainHeader, footer .wrap, #sidebar .storage, #footer, body.outside #mainHeader {
+    background: #2E0927;
+}
+/* Header Search Bar */
+#mainHeader .search.dark input {
+    background: #FF8C00;
+    color: #04756F;
+    font-weight: bold;
+}
+#mainHeader .search input {
+    border-radius: 0.3rem;
+    border: 2px double #FF2D00;
+}
+
+p.hello {
+    opacity:0.6;
+}
+/* Links */
+#mainHeader .dark button, #mainHeader p, #mainHeader a, 
+#sidebar ul li a, #sidebar ul li a span, #sidebar ul.menu li a.active,
+#sidebar ul.menu li a.active span, .sizebar, #footer .wrap a, #listing-actions-buttons ul li a:hover, 
+#sidebar ul.menu li a.active, ul.menu li a.active span, #mainHeader a span {
+    color: #FF8C00 !important;
+}
+#mainHeader .dark button:hover, #mainHeader .dark button:hover .fa,
+#compose_button span, #compose_button strong, #mainHeader a:active, 
+#mainHeader a:hover, #mainHeader a:hover, #mainHeader li a.active span, 
+#mainHeader li a:hover span, #sidebar,#sidebar ul.menu li a:hover span, 
+#sidebar ul.menu li a.active:hover, #footer .wrap a:hover, #sidebar ul.menu li a:hover {
+    color: #FF2D00 !important;
+}
+
+/* Sidebar compose button */
+#compose_button strong, #sidebar #compose_button a  span {
+    color: #FFF !important;
+}
+
+#compose_button a {
+    background: #D90000;
+}
+
+#compose_button a:active, #compose_button a:hover, .fill {
+    background: #04756F;
+}
+
+/* Sidebar Number */
+#sidebar .number, #sidebar .active .number {
+    background: #FF8C00;
+    color: #FF2D00;
+}
+
+#sidebar ul.menu li a:hover .number {
+    background: #FF2D00;
+    color: #FF8C00;
+}
+
+/* Sidebar Active Section */
+#sidebar ul.menu li a.active {
+    background: #04756F;
+}
+
+/*Sidebar Dividers */
+.divider {
+    opacity: 0.2;
+}
+
+/* Footer Text */
+#footer .wrap {
+    color: #fff;
+}
+/*Mail Commandbar */
+#messages tbody {
+    font-size: 0.8rem !important;
+}
+/* Page Buttons */
+.pure-button.pure-button-primary, body .ui-button.pure-button-primary {
+    background: #2E0927;
+    transition: background .2s ease-in;
+}
+.pure-button.pure-button-primary:focus, .pure-button.pure-button-primary:hover, body .ui-button.pure-button-primary:focus, body .ui-button.pure-button-primary:hover {
+    background: #FF2D00;
+}
+/* Labels */
+#listing .pmlabel {
+    border-radius: 0.2rem;
+    padding: 0.1rem 0.7rem;
+}
+/*Reading Mail*/
+#primaryHeader #titleBar h1 {
+    font-size: 0.9rem;
+}
+#page-m .pmlabel {
+    padding: 0.1rem 1.2rem;
+    padding-left: 0.6rem;
+    border-radius: 0.2rem;
+}
+span.bubble {
+    padding: 0.1rem 0.5rem;
+}
+span.bubble:hover {
+    background: #04756F !important;
+    border-color: #03615C !important;
+    color:#FFF !important;
+}
+#dkim .verified {
+    color:#8CC63F;
+}
+/*Unread*/
+#messages tr.unread td {
+    background: #fff;
+}
+
+#messages tr.unread, #messages tr.unread a, #messages tr.unread td {
+    color: #03615C !important;
+}
+/*Starred Mails*/
+body table#messages tr.starred td {
+    background: rgba(255, 140, 0, 0.25) none repeat scroll 0% 0%;
+}
+/*Responsive Menu Background */
+#mmm {
+    background: #2E0927;
+}
+
diff --git a/Themes/v1.16/dusty_petrol.css b/Themes/v1.16/dusty_petrol.css
new file mode 100644
index 0000000..ebbb9bc
--- /dev/null
+++ b/Themes/v1.16/dusty_petrol.css
@@ -0,0 +1,132 @@
+*:not(.fa) {
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+}
+body {
+    font-size: 0.8rem;
+}
+
+/* Main Backgrounds */
+#sidebar, #main footer .wrap, body #mainHeader, footer .wrap, #sidebar .storage, #footer, body.outside #mainHeader {
+    background: #292929;
+}
+/* Header Search Bar */
+#mainHeader .search.dark input {
+    background: #412A22;
+    color: #F2E6B6;
+    font-weight: bold;
+}
+#mainHeader .search input {
+    border-radius: 0.3rem;
+    border: 2px double #F2E6B6;
+}
+
+p.hello {
+    opacity:0.6;
+}
+/* Links */
+#mainHeader .dark button, #mainHeader p, #mainHeader a, 
+#sidebar ul li a, #sidebar ul li a span, #sidebar ul.menu li a.active,
+#sidebar ul.menu li a.active span, .sizebar, #footer .wrap a, #listing-actions-buttons ul li a:hover, 
+#sidebar ul.menu li a.active, ul.menu li a.active span, #mainHeader a span {
+    color: #F2E6B6 !important;
+}
+#mainHeader .dark button:hover, #mainHeader .dark button:hover .fa,
+#compose_button span, #compose_button strong, #mainHeader a:active, 
+#mainHeader a:hover, #mainHeader a:hover, #mainHeader li a.active span, 
+#mainHeader li a:hover span, #sidebar,#sidebar ul.menu li a:hover span, 
+#sidebar ul.menu li a.active:hover, #footer .wrap a:hover, #sidebar ul.menu li a:hover {
+    color: #412A22 !important;
+}
+
+/* Sidebar compose button */
+#compose_button strong, #sidebar #compose_button a  span {
+    color: #FFF !important;
+}
+
+#compose_button a {
+    background: #5B7876;
+}
+
+#compose_button a:active, #compose_button a:hover, .fill {
+    background: #8F9E8B;
+}
+
+/* Sidebar Number */
+#sidebar .number, #sidebar .active .number {
+    background: #F2E6B6;
+    color: #FFF;
+}
+
+#sidebar ul.menu li a:hover .number {
+    background: #412A22;
+    color: #FFF;
+}
+
+/* Sidebar Active Section */
+#sidebar ul.menu li a.active {
+    background: #8F9E8B;
+}
+
+/*Sidebar Dividers */
+.divider {
+    opacity: 0.2;
+}
+
+/* Footer Text */
+#footer .wrap {
+    color: #fff;
+}
+/*Mail Commandbar */
+#messages tbody {
+    font-size: 0.8rem !important;
+}
+/* Page Buttons */
+.pure-button.pure-button-primary, body .ui-button.pure-button-primary {
+    background: #292929;
+    transition: background .2s ease-in;
+}
+.pure-button.pure-button-primary:focus, .pure-button.pure-button-primary:hover, body .ui-button.pure-button-primary:focus, body .ui-button.pure-button-primary:hover {
+    background: #412A22;
+}
+/* Labels */
+#listing .pmlabel {
+    border-radius: 0.2rem;
+    padding: 0.1rem 0.7rem;
+}
+/*Reading Mail*/
+#primaryHeader #titleBar h1 {
+    font-size: 0.9rem;
+}
+#page-m .pmlabel {
+    padding: 0.1rem 1.2rem;
+    padding-left: 0.6rem;
+    border-radius: 0.2rem;
+}
+span.bubble {
+    padding: 0.1rem 0.5rem;
+}
+span.bubble:hover {
+    background: #412A22 !important;
+    border-color: #36221C !important;
+    color:#FFF !important;
+}
+#dkim .verified {
+    color:#8CC63F;
+}
+/*Unread*/
+#messages tr.unread td {
+    background: #fff;
+}
+
+#messages tr.unread, #messages tr.unread a, #messages tr.unread td {
+    color: #292929 !important;
+}
+/*Starred Mails*/
+body table#messages tr.starred td {
+    background: #F2E6B6;
+}
+/*Responsive Menu Background */
+#mmm {
+    background: #36221C;
+}
+
diff --git a/Themes/v1.16/green_lume.css b/Themes/v1.16/green_lume.css
new file mode 100644
index 0000000..e91e510
--- /dev/null
+++ b/Themes/v1.16/green_lume.css
@@ -0,0 +1,181 @@
+* {
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+}
+
+*:not(.fa) {
+font-family: monospace;
+}
+
+body {
+    font-size: 0.9rem;
+}
+/* =============
+   == Sidebar == 
+   ============= */
+
+/* COMPOSE BUTTON */
+#compose_button a {
+    background: #8cc63f none repeat scroll 0% 0%;
+}
+#compose_button a:active, #compose_button a:hover {
+    background: #e01b2a none repeat scroll 0% 0%; 
+}
+/* SIDEBAR BACKGROUND */
+#sidebar {
+    background: #1a1a1a;
+    /*border-right: 1px solid rgba(0, 0, 35, 0.5);*/
+}
+/* SIDEBAR LINKS */
+#sidebar ul li a span, #sidebar ul li a {
+    color: #fff;
+}
+#sidebar ul.menu li a:hover, #sidebar ul.menu li a:hover span {
+    color: #8cc63f;
+}
+/* SIDEBAR ACTIVE SECTION */
+#sidebar ul.menu li a.active {
+    background-color: rgba(10, 10, 10, 0.5);
+}
+/* NUMBER OF MESSAGES */
+#sidebar .number {
+    background: rgba(0,0,0,0);
+    color: #fff;
+    font-size: 0.8rem;
+}
+#sidebar .number:active {
+    font-size: 0.8rem;
+    color: #fff;
+}
+
+#sidebar ul.menu li a:hover .number {
+    background: #e01b2a;
+    color: #fff;
+}
+/* Storage at the end of the side bar. */
+#sidebar .storage {
+    background: #1a1a1a none repeat scroll 0% 0%;
+}
+
+.sizebar {
+    color: #fff;
+    font-size: 0.8rem;
+}
+
+.fill {
+    background: transparent linear-gradient(to bottom, greenyellow 0px, #8cc63f 100%) repeat scroll 0% 0%
+}
+/* =============
+   == TOP BAR == 
+   ============= */
+
+/* Top bar and footer background */
+#main footer .wrap, body #mainHeader, footer .wrap {
+    background-color: #1a1a1a;;
+}
+
+/* Search bar */
+#mainHeader .search.dark input {
+    background: rgba(0,0,0,0) none repeat scroll 0% 0%;
+    border: 2px solid #8cc63f;
+    color: greenyellow;
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+    border-radius: 0.1rem;
+
+}
+/* Magnifing glass and down arrow */
+#mainHeader .dark button, #mainHeader .dark button .fa{
+    color: #8cc63f;
+}
+#mainHeader .dark button:hover, #mainHeader .dark button:hover .fa {
+    color: #e01b2a;
+}
+
+#mainHeader a, #mainHeader a span {
+    color: #fff;
+}
+
+#mainHeader a:active, #mainHeader a:hover, #mainHeader li a:hover span {
+    color: #e01b2a;
+}
+
+/*Decrypt page logo*/
+#mainHeader .navlogo {
+    background: #8cc63f;
+    margin: 0 1rem 0 0;
+}
+
+#footer .wrap {
+    color: #fff;
+}
+
+#footer .wrap a {
+    color: greenyellow;
+}
+
+#footer .wrap a:hover {
+    color: #e01b2a;
+}
+
+.pure-button.pure-button-primary, body .ui-button.pure-button-primary {
+    background: #1a1a1a;
+}
+
+.pure-button.pure-button-primary:focus, .pure-button.pure-button-primary:hover, body .ui-button.pure-button-primary:focus, body .ui-button.pure-button-primary:hover {
+    background: #e01b2a;
+}
+
+#announcement {
+    font-size: 0.8rem;
+    color: #fff;
+    background: rgba(0,0,0,0.8);
+}
+
+body a {
+    color: #8cc63f;
+}
+a:hover {
+    color: #e01b2a;
+}
+
+/* ICONS AND MAIL */
+body table#messages tr.starred td {
+    /*background: rgba(216,18,32,0.0);*/
+}
+
+#dkim .verified {
+    color: #60c43f !important;
+}
+
+table .fa.fa-lock {
+    color: #e01b2a !important;
+}
+
+#messages .fa-flag {
+    color:#336 !important;
+}
+/*Responsive Icons */
+#mainHeader .fa {
+    color: #8cc63f;
+}
+/*Responsive Menu */
+#mmm {
+    background: #1a1a1a;
+}
+#listing-actions-buttons ul li a:hover, #listing-actions-buttons ul li button:hover, #message-actions-buttons ul li a:hover, #message-actions-buttons ul li button:hover, .pure-button:focus, /*.pure-button:hover*/, body .ui-button:focus, body .ui-button:hover {
+    color: #8cc63f; !important;
+}
+
+/*Labels*/
+
+#listing .pmlabel {
+    border-radius: 0.2rem;
+    padding: 0.1rem 0.7rem;
+    font-size: 0.7rem;
+    font-weight: 700 !important;
+}
+
+.pmlabel {
+    background: #fbb03b;
+}
+
+
diff --git a/Themes/v1.16/halow_summer_06.css b/Themes/v1.16/halow_summer_06.css
new file mode 100644
index 0000000..8fea624
--- /dev/null
+++ b/Themes/v1.16/halow_summer_06.css
@@ -0,0 +1,138 @@
+*:not(.fa) {
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+}
+body {
+    font-size: 0.8rem;
+}
+
+#sidebar a img {
+    background: rgba(68,68,68,0.5);
+    padding: 0.5rem 0.3rem;
+    border-radius: 3px;
+}
+
+/* Main Backgrounds */
+#sidebar, #main footer .wrap, body #mainHeader, footer .wrap, #sidebar .storage, #footer, body.outside #mainHeader {
+    background: #E7E9D1;
+}
+/* Header Search Bar */
+#mainHeader .search.dark input {
+    background: #BAB293;
+    color: #2B2922;
+    font-weight: bold;
+}
+#mainHeader .search input {
+    border-radius: 0.3rem;
+    border: 2px double #2B2922;
+}
+
+p.hello {
+    opacity:0.6;
+}
+/* Links */
+#mainHeader .dark button, #mainHeader p, #mainHeader a, 
+#sidebar ul li a, #sidebar ul li a span, #sidebar ul.menu li a.active,
+#sidebar ul.menu li a.active span, .sizebar, #footer .wrap a, #listing-actions-buttons ul li a:hover, 
+#sidebar ul.menu li a.active, ul.menu li a.active span {
+    color: #444444 !important;
+}
+#mainHeader .dark button:hover, #mainHeader .dark button:hover .fa,
+#compose_button span, #compose_button strong, #mainHeader a:active, 
+#mainHeader a:hover, #mainHeader a:hover, #mainHeader li a.active span, 
+#mainHeader li a:hover span, #sidebar,#sidebar ul.menu li a:hover span, 
+#sidebar ul.menu li a.active:hover, #footer .wrap a:hover, #sidebar ul.menu li a:hover, #mainHeader a span {
+    color: #901808 !important;
+}
+
+/* Sidebar compose button */
+#compose_button strong, #sidebar #compose_button a  span {
+    color: #FFF !important;
+}
+
+#compose_button a {
+    background: #A32500;
+}
+
+#compose_button a:active, #compose_button a:hover, .fill {
+    background: #444444;
+}
+
+/* Sidebar Number */
+#sidebar .number, #sidebar .active .number {
+    background: #444444;
+    color: #FCFAE6;
+}
+
+#sidebar ul.menu li a:hover .number {
+    background: #901808;
+    color: #FCFAE6;
+}
+
+/* Sidebar Active Section */
+#sidebar ul.menu li a.active {
+    background: #D3D4AA;
+}
+
+/*Sidebar Dividers */
+.divider {
+    opacity: 0.2;
+}
+
+/* Footer Text */
+#footer .wrap {
+    color: #fff;
+}
+/*Mail Commandbar */
+#messages tbody {
+    font-size: 0.8rem !important;
+}
+/* Page Buttons */
+.pure-button.pure-button-primary, body .ui-button.pure-button-primary {
+    background: #444444;
+    transition: background .2s ease-in;
+}
+.pure-button.pure-button-primary:focus, .pure-button.pure-button-primary:hover, body .ui-button.pure-button-primary:focus, body .ui-button.pure-button-primary:hover {
+    background: #901808;
+}
+/* Labels */
+#listing .pmlabel {
+    border-radius: 0.2rem;
+    padding: 0.1rem 0.7rem;
+}
+/*Reading Mail*/
+#primaryHeader #titleBar h1 {
+    font-size: 0.9rem;
+}
+#page-m .pmlabel {
+    padding: 0.1rem 1.2rem;
+    padding-left: 0.6rem;
+    border-radius: 0.2rem;
+}
+span.bubble {
+    padding: 0.1rem 0.5rem;
+}
+span.bubble:hover {
+    background: #444444 !important;
+    border-color: #1c1c1c !important;
+    color:#FFF !important;
+}
+#dkim .verified {
+    color:#8CC63F;
+}
+/*Unread*/
+#messages tr.unread td {
+    background: #fff;
+}
+
+#messages tr.unread, #messages tr.unread a, #messages tr.unread td {
+    color: #444444 !important;
+}
+/*Starred Mails*/
+body table#messages tr.starred td {
+    background: #FCFAE6;
+}
+/*Responsive Menu Background */
+#mmm {
+    background: #FCFAE6;
+}
+
diff --git a/Themes/v1.16/japanese_garden.css b/Themes/v1.16/japanese_garden.css
new file mode 100644
index 0000000..f849c91
--- /dev/null
+++ b/Themes/v1.16/japanese_garden.css
@@ -0,0 +1,132 @@
+*:not(.fa) {
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+}
+body {
+    font-size: 0.8rem;
+}
+
+/* Main Backgrounds */
+#sidebar, #main footer .wrap, body #mainHeader, footer .wrap, #sidebar .storage, #footer, body.outside #mainHeader {
+    background: #A39770;
+}
+/* Header Search Bar */
+#mainHeader .search.dark input {
+    background: #BAB293;
+    color: #2B2922;
+    font-weight: bold;
+}
+#mainHeader .search input {
+    border-radius: 0.3rem;
+    border: 2px double #2B2922;
+}
+
+p.hello {
+    opacity:0.6;
+}
+/* Links */
+#mainHeader .dark button, #mainHeader p, #mainHeader a, 
+#sidebar ul li a, #sidebar ul li a span, #sidebar ul.menu li a.active,
+#sidebar ul.menu li a.active span, .sizebar, #footer .wrap a, #listing-actions-buttons ul li a:hover, 
+#sidebar ul.menu li a.active, ul.menu li a.active span, #mainHeader a span {
+    color: #2B2922 !important;
+}
+#mainHeader .dark button:hover, #mainHeader .dark button:hover .fa,
+#compose_button span, #compose_button strong, #mainHeader a:active, 
+#mainHeader a:hover, #mainHeader a:hover, #mainHeader li a.active span, 
+#mainHeader li a:hover span, #sidebar,#sidebar ul.menu li a:hover span, 
+#sidebar ul.menu li a.active:hover, #footer .wrap a:hover, #sidebar ul.menu li a:hover {
+    color: #A32500 !important;
+}
+
+/* Sidebar compose button */
+#compose_button strong, #sidebar #compose_button a  span {
+    color: #FFF !important;
+}
+
+#compose_button a {
+    background: #A32500;
+}
+
+#compose_button a:active, #compose_button a:hover, .fill {
+    background: #2B2922;
+}
+
+/* Sidebar Number */
+#sidebar .number, #sidebar .active .number {
+    background: #2B2922;
+    color: #A32500;
+}
+
+#sidebar ul.menu li a:hover .number {
+    background: #A32500;
+    color: #2B2922;
+}
+
+/* Sidebar Active Section */
+#sidebar ul.menu li a.active {
+    background: #BAB293;
+}
+
+/*Sidebar Dividers */
+.divider {
+    opacity: 0.2;
+}
+
+/* Footer Text */
+#footer .wrap {
+    color: #fff;
+}
+/*Mail Commandbar */
+#messages tbody {
+    font-size: 0.8rem !important;
+}
+/* Page Buttons */
+.pure-button.pure-button-primary, body .ui-button.pure-button-primary {
+    background: #2B2922;
+    transition: background .2s ease-in;
+}
+.pure-button.pure-button-primary:focus, .pure-button.pure-button-primary:hover, body .ui-button.pure-button-primary:focus, body .ui-button.pure-button-primary:hover {
+    background: #A32500;
+}
+/* Labels */
+#listing .pmlabel {
+    border-radius: 0.2rem;
+    padding: 0.1rem 0.7rem;
+}
+/*Reading Mail*/
+#primaryHeader #titleBar h1 {
+    font-size: 0.9rem;
+}
+#page-m .pmlabel {
+    padding: 0.1rem 1.2rem;
+    padding-left: 0.6rem;
+    border-radius: 0.2rem;
+}
+span.bubble {
+    padding: 0.1rem 0.5rem;
+}
+span.bubble:hover {
+    background: #A39770 !important;
+    border-color: #2B2922 !important;
+    color:#FFF !important;
+}
+#dkim .verified {
+    color:#8CC63F;
+}
+/*Unread*/
+#messages tr.unread td {
+    background: #fff;
+}
+
+#messages tr.unread, #messages tr.unread a, #messages tr.unread td {
+    color: #2B2922 !important;
+}
+/*Starred Mails*/
+body table#messages tr.starred td {
+    background: #EFE4BD;
+}
+/*Responsive Menu Background */
+#mmm {
+    background: #EFE4BD;
+}
+
diff --git a/Themes/v1.16/sea_wolf.css b/Themes/v1.16/sea_wolf.css
new file mode 100644
index 0000000..0f41bd9
--- /dev/null
+++ b/Themes/v1.16/sea_wolf.css
@@ -0,0 +1,141 @@
+*:not(.fa) {
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+}
+body {
+    font-size: 0.8rem;
+}
+
+/* ProtonMail logo
+   -Useful for clear themes.
+*/
+
+#sidebar a img {
+    background: #DC3522;
+    padding: 0.5rem;
+    border-radius: 5px;
+}
+
+/* Main Backgrounds */
+#sidebar, #main footer .wrap, body #mainHeader, footer .wrap, #sidebar .storage, #footer, body.outside #mainHeader {
+    background: #1E1E20;
+}
+/* Header Search Bar */
+#mainHeader .search.dark input {
+    background: #374140;
+    color: #D9CB9E;
+}
+#mainHeader .search input {
+    border-radius: 0.3rem;
+    border: 1px double #D9CB9E;
+}
+
+p.hello {
+    opacity:0.6;
+}
+/* Links */
+#mainHeader .dark button, #mainHeader p, #mainHeader a, 
+#sidebar ul li a, #sidebar ul li a span, #sidebar ul.menu li a.active,
+#sidebar ul.menu li a.active span, .sizebar, #footer .wrap a, #listing-actions-buttons ul li a:hover {
+    color: #D9CB9E !important;
+}
+#mainHeader .dark button:hover, #mainHeader .dark button:hover .fa,
+#compose_button span, #compose_button strong, #mainHeader a:active, 
+#mainHeader a:hover, #mainHeader a:hover, #mainHeader li a.active span, 
+#mainHeader li a:hover span, #sidebar ul.menu li a.active span, 
+#sidebar ul.menu li a:hover span, #sidebar ul.menu li a.active:hover, #sidebar ul.menu li a.active,
+#footer .wrap a:hover, #sidebar ul.menu li a:hover, #mainHeader a span {
+    color: #DC3522 !important;
+}
+
+/* Sidebar compose button */
+#compose_button strong, #sidebar #compose_button a  span {
+    color: #fff !important;
+}
+
+#compose_button a {
+    background: #DC3522;
+}
+
+#compose_button a:active, #compose_button a:hover, .fill {
+    background: #374140;
+}
+
+/* Sidebar Number */
+#sidebar .number, #sidebar .active .number {
+    background: #2A2C2B;
+    color: #D9CB9E;
+}
+
+#sidebar ul.menu li a:hover .number {
+    background: #fff;
+    color: #DC3522;
+}
+
+/* Sidebar Active Section */
+#sidebar ul.menu li a.active {
+    background: #374140;
+}
+
+/*Sidebar Dividers */
+.divider {
+    opacity: 0.3;
+}
+
+/* Footer Text */
+#footer .wrap {
+    color: #fff;
+}
+/*Mail Commandbar */
+#messages tbody {
+    font-size: 0.8rem !important;
+}
+/* Page Buttons */
+.pure-button.pure-button-primary, body .ui-button.pure-button-primary {
+    background: #2A2C2B;
+    transition: background .2s ease-in;
+}
+.pure-button.pure-button-primary:focus, .pure-button.pure-button-primary:hover, body .ui-button.pure-button-primary:focus, body .ui-button.pure-button-primary:hover {
+    background: #DC3522;
+}
+/* Labels */
+#listing .pmlabel {
+    border-radius: 0.2rem;
+    padding: 0.1rem 0.7rem;
+}
+/*Reading Mail*/
+#primaryHeader #titleBar h1 {
+    font-size: 0.9rem;
+}
+#page-m .pmlabel {
+    padding: 0.1rem 1.2rem;
+    padding-left: 0.6rem;
+    border-radius: 0.2rem;
+}
+span.bubble {
+    padding: 0.1rem 0.5rem;
+}
+span.bubble:hover {
+    background: #DC3522 !important;
+    border-color: #C92518 !important;
+    color:#fff !important;
+}
+#dkim .verified {
+    color:#8CC63F;
+}
+/*Unread*/
+#messages tr.unread td {
+    background: #fff;
+}
+
+#messages tr.unread, #messages tr.unread a, #messages tr.unread td {
+    color: #DC3522 !important;
+}
+/*Starred Mails*/
+body table#messages tr.starred td {
+    background: #FFC;
+}
+/*Responsive Menu Background */
+#mmm {
+    background: #2A2C2B;
+}
+
diff --git a/Themes/v1.16/this_green.css b/Themes/v1.16/this_green.css
new file mode 100644
index 0000000..e050e57
--- /dev/null
+++ b/Themes/v1.16/this_green.css
@@ -0,0 +1,132 @@
+*:not(.fa) {
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+}
+body {
+    font-size: 0.8rem;
+}
+
+/* Main Backgrounds */
+#sidebar, #main footer .wrap, body #mainHeader, footer .wrap, #sidebar .storage, #footer, body.outside #mainHeader {
+    background: #00261C;
+}
+/* Header Search Bar */
+#mainHeader .search.dark input {
+    background: #167F39;
+    color: #FFF;
+    font-weight: bold;
+}
+#mainHeader .search input {
+    border-radius: 0.3rem;
+    border: 2px double #044C29;
+}
+
+p.hello {
+    opacity:0.6;
+}
+/* Links */
+#mainHeader .dark button, #mainHeader p, #mainHeader a, 
+#sidebar ul li a, #sidebar ul li a span, #sidebar ul.menu li a.active,
+#sidebar ul.menu li a.active span, .sizebar, #footer .wrap a, #listing-actions-buttons ul li a:hover, 
+#sidebar ul.menu li a.active, ul.menu li a.active span, #mainHeader a span {
+    color: #FFF !important;
+}
+#mainHeader .dark button:hover, #mainHeader .dark button:hover .fa,
+#compose_button span, #compose_button strong, #mainHeader a:active, 
+#mainHeader a:hover, #mainHeader a:hover, #mainHeader li a.active span, 
+#mainHeader li a:hover span, #sidebar,#sidebar ul.menu li a:hover span, 
+#sidebar ul.menu li a.active:hover, #footer .wrap a:hover, #sidebar ul.menu li a:hover {
+    color: #45BF55 !important;
+}
+
+/* Sidebar compose button */
+#compose_button strong, #sidebar #compose_button a  span {
+    color: #FFF !important;
+}
+
+#compose_button a {
+    background: #044C29;
+}
+
+#compose_button a:active, #compose_button a:hover, .fill {
+    background: #167F39;
+}
+
+/* Sidebar Number */
+#sidebar .number, #sidebar .active .number {
+    background: #FFF;
+    color: #45BF55;
+}
+
+#sidebar ul.menu li a:hover .number {
+    background: #45BF55;
+    color: #FFF;
+}
+
+/* Sidebar Active Section */
+#sidebar ul.menu li a.active {
+    background: #96ED89;
+}
+
+/*Sidebar Dividers */
+.divider {
+    opacity: 0.2;
+}
+
+/* Footer Text */
+#footer .wrap {
+    color: #fff;
+}
+/*Mail Commandbar */
+#messages tbody {
+    font-size: 0.8rem !important;
+}
+/* Page Buttons */
+.pure-button.pure-button-primary, body .ui-button.pure-button-primary {
+    background: #00261C;
+    transition: background .2s ease-in;
+}
+.pure-button.pure-button-primary:focus, .pure-button.pure-button-primary:hover, body .ui-button.pure-button-primary:focus, body .ui-button.pure-button-primary:hover {
+    background: #167F39;
+}
+/* Labels */
+#listing .pmlabel {
+    border-radius: 0.2rem;
+    padding: 0.1rem 0.7rem;
+}
+/*Reading Mail*/
+#primaryHeader #titleBar h1 {
+    font-size: 0.9rem;
+}
+#page-m .pmlabel {
+    padding: 0.1rem 1.2rem;
+    padding-left: 0.6rem;
+    border-radius: 0.2rem;
+}
+span.bubble {
+    padding: 0.1rem 0.5rem;
+}
+span.bubble:hover {
+    background: #167F39 !important;
+    border-color: #00261C !important;
+    color:#FFF !important;
+}
+#dkim .verified {
+    color:#8CC63F;
+}
+/*Unread*/
+#messages tr.unread td {
+    background: #fff;
+}
+
+#messages tr.unread, #messages tr.unread a, #messages tr.unread td {
+    color: #292929 !important;
+}
+/*Starred Mails*/
+body table#messages tr.starred td {
+    background: #96ED89;
+}
+/*Responsive Menu Background */
+#mmm {
+    background: #044C29;
+}
+
diff --git a/Themes/v1.16/vintage_ralph_lauren.css b/Themes/v1.16/vintage_ralph_lauren.css
new file mode 100644
index 0000000..cfa92d4
--- /dev/null
+++ b/Themes/v1.16/vintage_ralph_lauren.css
@@ -0,0 +1,132 @@
+*:not(.fa) {
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+}
+body {
+    font-size: 0.8rem;
+}
+
+/* Main Backgrounds */
+#sidebar, #main footer .wrap, body #mainHeader, footer .wrap, #sidebar .storage, #footer, body.outside #mainHeader {
+    background: #2F343B;
+}
+/* Header Search Bar */
+#mainHeader .search.dark input {
+    background: #C77966;
+    color: #2F343B;
+    font-weight: bold;
+}
+#mainHeader .search input {
+    border-radius: 0.3rem;
+    border: 2px solid #703030;
+}
+
+p.hello {
+    opacity:0.6;
+}
+/* Links */
+#mainHeader .dark button, #mainHeader p, #mainHeader a, 
+#sidebar ul li a, #sidebar ul li a span, #sidebar ul.menu li a.active,
+#sidebar ul.menu li a.active span, .sizebar, #footer .wrap a, #listing-actions-buttons ul li a:hover, 
+#sidebar ul.menu li a.active, ul.menu li a.active span, #mainHeader a span {
+    color: #C6CCBF !important;
+}
+#mainHeader .dark button:hover, #mainHeader .dark button:hover .fa,
+#compose_button span, #compose_button strong, #mainHeader a:active, 
+#mainHeader a:hover, #mainHeader a:hover, #mainHeader li a.active span, 
+#mainHeader li a:hover span, #sidebar,#sidebar ul.menu li a:hover span, 
+#sidebar ul.menu li a.active:hover, #footer .wrap a:hover, #sidebar ul.menu li a:hover {
+    color: #E3CDA4 !important;
+}
+
+/* Sidebar compose button */
+#compose_button strong, #sidebar #compose_button a  span {
+    color: #E6E6E6 !important;
+}
+
+#compose_button a {
+    background: #703030;
+}
+
+#compose_button a:active, #compose_button a:hover, .fill {
+    background: #C77966;
+}
+
+/* Sidebar Number */
+#sidebar .number, #sidebar .active .number {
+    background: #7E827A;
+    color: #2F343B;
+}
+
+#sidebar ul.menu li a:hover .number {
+    background: #703030;
+    color: #C77966;
+}
+
+/* Sidebar Active Section */
+#sidebar ul.menu li a.active {
+    background: #C77966;
+}
+
+/*Sidebar Dividers */
+.divider {
+    opacity: 0.2;
+}
+
+/* Footer Text */
+#footer .wrap {
+    color: #fff;
+}
+/*Mail Commandbar */
+#messages tbody {
+    font-size: 0.8rem !important;
+}
+/* Page Buttons */
+.pure-button.pure-button-primary, body .ui-button.pure-button-primary {
+    background: #2F343B;
+    transition: background .2s ease-in;
+}
+.pure-button.pure-button-primary:focus, .pure-button.pure-button-primary:hover, body .ui-button.pure-button-primary:focus, body .ui-button.pure-button-primary:hover {
+    background: #703030;
+}
+/* Labels */
+#listing .pmlabel {
+    border-radius: 0.2rem;
+    padding: 0.1rem 0.7rem;
+}
+/*Reading Mail*/
+#primaryHeader #titleBar h1 {
+    font-size: 0.9rem;
+}
+#page-m .pmlabel {
+    padding: 0.1rem 1.2rem;
+    padding-left: 0.6rem;
+    border-radius: 0.2rem;
+}
+span.bubble {
+    padding: 0.1rem 0.5rem;
+}
+span.bubble:hover {
+    background: #703030 !important;
+    border-color: #5C2828 !important;
+    color:#FFF !important;
+}
+#dkim .verified {
+    color:#8CC63F;
+}
+/*Unread*/
+#messages tr.unread td {
+    background: #fff;
+}
+
+#messages tr.unread, #messages tr.unread a, #messages tr.unread td {
+    color: #5C2828 !important;
+}
+/*Starred Mails*/
+body table#messages tr.starred td {
+    background: #E3CDA4;
+}
+/*Responsive Menu Background */
+#mmm {
+    background: #5C2828;
+}
+
diff --git a/Themes/v1.16/vitamin_c.css b/Themes/v1.16/vitamin_c.css
new file mode 100644
index 0000000..a795aa8
--- /dev/null
+++ b/Themes/v1.16/vitamin_c.css
@@ -0,0 +1,132 @@
+*:not(.fa) {
+    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
+}
+body {
+    font-size: 0.8rem;
+}
+
+/* Main Backgrounds */
+#sidebar, #main footer .wrap, body #mainHeader, footer .wrap, #sidebar .storage, #footer, body.outside #mainHeader {
+    background: #004358;
+}
+/* Header Search Bar */
+#mainHeader .search.dark input {
+    background: #1F8A70;
+    color: #BEDB39;
+    font-weight: bold;
+}
+#mainHeader .search input {
+    border-radius: 0.3rem;
+    border: 2px double #BEDB39;
+}
+
+p.hello {
+    opacity:0.6;
+}
+/* Links */
+#mainHeader .dark button, #mainHeader p, #mainHeader a, 
+#sidebar ul li a, #sidebar ul li a span, #sidebar ul.menu li a.active,
+#sidebar ul.menu li a.active span, .sizebar, #footer .wrap a, #listing-actions-buttons ul li a:hover, 
+#sidebar ul.menu li a.active, ul.menu li a.active span, #mainHeader a span {
+    color: #FFE11A !important;
+}
+#mainHeader .dark button:hover, #mainHeader .dark button:hover .fa,
+#compose_button span, #compose_button strong, #mainHeader a:active, 
+#mainHeader a:hover, #mainHeader a:hover, #mainHeader li a.active span, 
+#mainHeader li a:hover span, #sidebar,#sidebar ul.menu li a:hover span, 
+#sidebar ul.menu li a.active:hover, #footer .wrap a:hover, #sidebar ul.menu li a:hover {
+    color: #FD7400 !important;
+}
+
+/* Sidebar compose button */
+#compose_button strong, #sidebar #compose_button a  span {
+    color: #E6E6E6 !important;
+}
+
+#compose_button a {
+    background: #1F8A70;
+}
+
+#compose_button a:active, #compose_button a:hover, .fill {
+    background: #FD7400;
+}
+
+/* Sidebar Number */
+#sidebar .number, #sidebar .active .number {
+    background: #1F8A70;
+    color: #FFE11A;
+}
+
+#sidebar ul.menu li a:hover .number {
+    background: #FD7400;
+    color: #FFE11A;
+}
+
+/* Sidebar Active Section */
+#sidebar ul.menu li a.active {
+    background: #003C4F;
+}
+
+/*Sidebar Dividers */
+.divider {
+    opacity: 0.2;
+}
+
+/* Footer Text */
+#footer .wrap {
+    color: #fff;
+}
+/*Mail Commandbar */
+#messages tbody {
+    font-size: 0.8rem !important;
+}
+/* Page Buttons */
+.pure-button.pure-button-primary, body .ui-button.pure-button-primary {
+    background: #004358;
+    transition: background .2s ease-in;
+}
+.pure-button.pure-button-primary:focus, .pure-button.pure-button-primary:hover, body .ui-button.pure-button-primary:focus, body .ui-button.pure-button-primary:hover {
+    background: #1F8A70;
+}
+/* Labels */
+#listing .pmlabel {
+    border-radius: 0.2rem;
+    padding: 0.1rem 0.7rem;
+}
+/*Reading Mail*/
+#primaryHeader #titleBar h1 {
+    font-size: 0.9rem;
+}
+#page-m .pmlabel {
+    padding: 0.1rem 1.2rem;
+    padding-left: 0.6rem;
+    border-radius: 0.2rem;
+}
+span.bubble {
+    padding: 0.1rem 0.5rem;
+}
+span.bubble:hover {
+    background: #1F8A70 !important;
+    border-color: #004358 !important;
+    color:#FFF !important;
+}
+#dkim .verified {
+    color:#8CC63F;
+}
+/*Unread*/
+#messages tr.unread td {
+    background: #fff;
+}
+
+#messages tr.unread, #messages tr.unread a, #messages tr.unread td {
+    color: #FD7400 !important;
+}
+/*Starred Mails*/
+body table#messages tr.starred td {
+    background: rgba(190, 219, 57, 0.62) none repeat scroll 0% 0%;
+}
+/*Responsive Menu Background */
+#mmm {
+    background: #1F8A70;
+}
+