Update themes and started theme settings

27 files changed, 387 insertions, 109 deletions

diff --git a/app/src/main/assets/css/core/_colors.scss b/app/src/main/assets/css/core/_colors.scss
index e7a6faa7..f5f21043 100644
--- a/app/src/main/assets/css/core/_colors.scss
+++ b/app/src/main/assets/css/core/_colors.scss
@@ -6,6 +6,6 @@ $bg_transparent: rgba(#f0f, 0.02) !default;
 $text: #d7b0d7 !default;
 $link: #8c8dd6 !default;
 $background: #451515 !default;
-$background2: rgba(lighten($background, 10%), 0.1) !default;
+$background2: rgba(lighten($background, 20%), 0.2) !default;
 $bg_opaque: rgba($background, 1.0) !default;
 $divider: rgba($text, 0.3) !default;
diff --git a/app/src/main/assets/css/core/header.compact.css b/app/src/main/assets/css/core/header.compact.css
deleted file mode 100644
index 560a8465..00000000
--- a/app/src/main/assets/css/core/header.compact.css
+++ /dev/null
@@ -1 +0,0 @@
-#header[data-sigil="MTopBlueBarHeader"], #header-notices, [data-sigil*=m-promo-jewel-header] { display: None !important; }
diff --git a/app/src/main/assets/css/core/header.scss b/app/src/main/assets/css/core/header.scss
deleted file mode 100644
index 4e4a2148..00000000
--- a/app/src/main/assets/css/core/header.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// remove blue header
-
-#header[data-sigil="MTopBlueBarHeader"], #header-notices,
-[data-sigil*=m-promo-jewel-header] {
-    display: None !important;
-}
diff --git a/app/src/main/assets/css/core/main.compact.css b/app/src/main/assets/css/core/main.compact.css
new file mode 100644
index 00000000..00d50516
--- /dev/null
+++ b/app/src/main/assets/css/core/main.compact.css
@@ -0,0 +1,39 @@
+#viewport { background: #451515 !important; }
+
+body, #root, #header, .aclb, ._55wo, ._1upc, input, ._2f9r, ._59e9, ._5pz4, ._5lp4, ._5lp5, ._d4i, ._5c9u, div._5y57::before, ._59f6._55so::before, .structuredPublisher, ._94v, ._vqv, ._5lp5, ._55wm, .acw, ._3f50, .mentions-placeholder, .mentions, .mentions-shadow, .mentions-measurer, .acg, ._59tu, ._52z5, ._4l9b, ._4gj3, .groupChromeView, ._uww, textarea, ._15n_, ._skt, ._5f28, ._14_j, ._3bg5, ._53_-, ._52x1 { background: rgba(255, 0, 255, 0.02) !important; }
+
+.jewel, .flyout, ._13e_, ._5-lw, ._5c0e, .jx-result, ._336p { background: #451515 !important; }
+
+button, button::before, .touch ._56bt, ._56be::before, .btnS, .touch::before, ._5xo2, ._5u5a::before, ._4u3j, ._15ks, ._2v9s, ._5hua, ._59tt, ._41ft, .jx-tokenizer, ._4e8n, ._5pxa._3uj9, ._4qax { background: rgba(147, 45, 45, 0.2) !important; }
+
+body, input, ._43mh, .touch .btn, p, span, .fcg, button, ._52j9, ._52jb, ._52ja, ._5j35, ._rnk, ._24u0, ._1g06, ._14ye, textarea, .mentions-input, .mentions-placeholder, .fcw, ._5-7t, .fcl, ._4qas, .thread-title, ._46pa, ._336p, h1, h2, h3, h4, h5, h6 { color: #d7b0d7 !important; }
+
+::-webkit-input-placeholder { color: #d7b0d7 !important; }
+
+:-moz-placeholder { color: #d7b0d7 !important; }
+
+::-moz-placeholder { color: #d7b0d7 !important; }
+
+:-ms-input-placeholder { color: #d7b0d7 !important; }
+
+a, ._5fpq { color: #8c8dd6 !important; }
+
+._15kl::before, ._5j35::after { border-left: 1px solid rgba(215, 176, 215, 0.3) !important; }
+
+._1mx0, ._15n_, ._52x1, ._3wjp, ._usq, ._2cul:before, ._13e_, .jewel .flyout, ._3bg5 ._52x6, ._3on6 { border-top: 1px solid rgba(215, 176, 215, 0.3) !important; }
+
+._15ny::after, ._ap1, ._52x1, ._59tu, ._usq, ._13e_, ._59f6._55so::before, ._4gj3, .jx-result, ._5lp5, ._5pz4, ._5lp4, ._5lp5, ._3on6, ._5h6z, ._5h6x { border-bottom: 1px solid rgba(215, 176, 215, 0.3) !important; }
+
+._d4i, ._4e8n, ._uww, .mentions-placeholder, .mentions-shadow, .mentions-measurer, ._5whq, ._59tt, ._41ft::after, .jx-tokenizer, ._3uqf { border: 1px solid rgba(215, 176, 215, 0.3) !important; }
+
+._4o58::after, .acw, .aclb, ._4qax { border-color: rgba(215, 176, 215, 0.3) !important; }
+
+._2ip_ ._2zh4::before, ._2ip_ ._15kk::before, ._2ip_ ._15kk + ._4u3j::before, ._58a0:before { background: rgba(215, 176, 215, 0.3) !important; }
+
+._56bf, .touch .btn { border-radius: 0 !important; border: 0 !important; }
+
+.touch, ._56bt, ._56bu { text-shadow: none !important; }
+
+.touch .btnS, button, ._94v { box-shadow: none !important; }
+
+[data-sigil="m-loading-indicator-animate m-loading-indicator-root"] { display: none !important; }
diff --git a/app/src/main/assets/css/themes/main.scss b/app/src/main/assets/css/core/main.scss
index d4bba560..eca91f02 100644
--- a/app/src/main/assets/css/themes/main.scss
+++ b/app/src/main/assets/css/core/main.scss
@@ -1,29 +1,31 @@
-@import "../core/colors";
-@import "../core/base";
+@import "colors";
+@import "base";
 
 #viewport {
   background: $background !important;
 }
 
-body, #root, #header, .aclb, ._55wo, ._1upc, input, ._2f9r, ._59e9,
-._d4i,
-.acw, ._3f50,
+body, #root, #header, .aclb, ._55wo, ._1upc, input, ._2f9r, ._59e9, ._5pz4, ._5lp4, ._5lp5,
+._d4i, ._5c9u, div._5y57::before, ._59f6._55so::before, .structuredPublisher, ._94v, ._vqv, ._5lp5, ._55wm,
+.acw, ._3f50, .mentions-placeholder, .mentions, .mentions-shadow, .mentions-measurer, .acg, ._59tu, ._52z5, ._4l9b, ._4gj3, .groupChromeView,
 ._uww, textarea, ._15n_, ._skt, ._5f28, ._14_j, ._3bg5, ._53_-, ._52x1 {
   background: $bg_transparent !important;
 }
 
-.jewel, .flyout {
+.jewel, .flyout,  ._13e_, ._5-lw, ._5c0e, .jx-result, ._336p {
   background: $bg_opaque !important;
 }
 
-button::before, .touch ._56bt, ._56be::before, .btnS, .touch::before,
-._5xo2, ._5u5a::before, ._4u3j, ._15ks, ._2v9s,
-._4e8n {
+button, button::before, .touch ._56bt, ._56be::before, .btnS, .touch::before,
+._5xo2, ._5u5a::before, ._4u3j, ._15ks, ._2v9s, ._5hua, ._59tt, ._41ft, .jx-tokenizer,
+._4e8n, ._5pxa._3uj9,
+//unread
+._4qax {
   background: $background2 !important;
 }
 
 body, input, ._43mh, .touch .btn, p, span, .fcg, button, ._52j9, ._52jb, ._52ja, ._5j35, ._rnk, ._24u0, ._1g06, ._14ye,
-textarea, .mentions-input, .mentions-placeholder, .fcw, ._5-7t,
+textarea, .mentions-input, .mentions-placeholder, .fcw, ._5-7t, .fcl, ._4qas, .thread-title, ._46pa, ._336p,
 h1, h2, h3, h4, h5, h6 {
   color: $text !important;
 }
@@ -32,7 +34,9 @@ h1, h2, h3, h4, h5, h6 {
   color: $text !important;
 }
 
-a {
+a,
+//event month
+._5fpq {
   color: $link !important;
 }
 
@@ -44,27 +48,27 @@ a {
 
 //above see more
 ._1mx0,
-._15n_, ._52x1 {
+._15n_, ._52x1, ._3wjp, ._usq, ._2cul:before, ._13e_, .jewel .flyout, ._3bg5 ._52x6, ._3on6 {
   border-top: 1px solid $divider !important;
 }
 
-._15ny::after, ._ap1, ._52x1 {
+._15ny::after, ._ap1, ._52x1, ._59tu, ._usq, ._13e_, ._59f6._55so::before, ._4gj3, .jx-result, ._5lp5, ._5pz4, ._5lp4, ._5lp5, ._3on6, ._5h6z, ._5h6x {
   border-bottom: 1px solid $divider !important;
 }
 
 //friend card border
 ._d4i,
-._4e8n,
-._uww {
+._4e8n, ._uww, .mentions-placeholder, .mentions-shadow, .mentions-measurer, ._5whq, ._59tt, ._41ft::after, .jx-tokenizer, ._3uqf {
   border: 1px solid $divider !important;
 }
 
 //link card bottom border
-._4o58::after {
+._4o58::after,
+.acw, .aclb, ._4qax {
   border-color: $divider !important;
 }
 
-._2ip_ ._2zh4::before, ._2ip_ ._15kk::before, ._2ip_ ._15kk + ._4u3j::before {
+._2ip_ ._2zh4::before, ._2ip_ ._15kk::before, ._2ip_ ._15kk + ._4u3j::before, ._58a0:before {
   background: $divider !important;
 }
 
@@ -73,11 +77,11 @@ a {
   border: 0 !important;
 }
 
-.touch ._56bt {
+.touch, ._56bt, ._56bu {
   text-shadow: none !important;
 }
 
-.touch .btnS {
+.touch .btnS, button, ._94v {
   box-shadow: none !important;
 }
 
diff --git a/app/src/main/assets/css/themes/main.compact.css b/app/src/main/assets/css/themes/main.compact.css
deleted file mode 100644
index 4697ccf1..00000000
--- a/app/src/main/assets/css/themes/main.compact.css
+++ /dev/null
@@ -1,37 +0,0 @@
-#viewport { background: #451515 !important; }
-
-body, #root, #header, .aclb, ._55wo, ._1upc, input, ._2f9r, ._59e9, ._d4i, .acw, ._3f50, ._uww, textarea, ._15n_, ._skt, ._5f28, ._14_j, ._3bg5, ._53_-, ._52x1 { background: rgba(255, 0, 255, 0.02) !important; }
-
-.jewel, .flyout { background: #451515 !important; }
-
-button::before, .touch ._56bt, ._56be::before, .btnS, .touch::before, ._5xo2, ._5u5a::before, ._4u3j, ._15ks, ._2v9s, ._4e8n { background: rgba(108, 33, 33, 0.1) !important; }
-
-body, input, ._43mh, .touch .btn, p, span, .fcg, button, ._52j9, ._52jb, ._52ja, ._5j35, ._rnk, ._24u0, ._1g06, ._14ye, textarea, .mentions-input, .mentions-placeholder, .fcw, ._5-7t, h1, h2, h3, h4, h5, h6 { color: #d7b0d7 !important; }
-
-::-webkit-input-placeholder { color: #d7b0d7 !important; }
-
-:-moz-placeholder { color: #d7b0d7 !important; }
-
-::-moz-placeholder { color: #d7b0d7 !important; }
-
-:-ms-input-placeholder { color: #d7b0d7 !important; }
-
-a { color: #8c8dd6 !important; }
-
-._15kl::before, ._5j35::after { border-left: 1px solid rgba(215, 176, 215, 0.3) !important; }
-
-._1mx0, ._15n_, ._52x1 { border-top: 1px solid rgba(215, 176, 215, 0.3) !important; }
-
-._15ny::after, ._ap1, ._52x1 { border-bottom: 1px solid rgba(215, 176, 215, 0.3) !important; }
-
-._d4i, ._4e8n, ._uww { border: 1px solid rgba(215, 176, 215, 0.3) !important; }
-
-._4o58::after { border-color: rgba(215, 176, 215, 0.3) !important; }
-
-._2ip_ ._2zh4::before, ._2ip_ ._15kk::before, ._2ip_ ._15kk + ._4u3j::before { background: rgba(215, 176, 215, 0.3) !important; }
-
-._56bf, .touch .btn { border-radius: 0 !important; border: 0 !important; }
-
-.touch ._56bt { text-shadow: none !important; }
-
-.touch .btnS { box-shadow: none !important; }
diff --git a/app/src/main/assets/css/themes/material_amoled.compact.css b/app/src/main/assets/css/themes/material_amoled.compact.css
new file mode 100644
index 00000000..26affc81
--- /dev/null
+++ b/app/src/main/assets/css/themes/material_amoled.compact.css
@@ -0,0 +1,39 @@
+#viewport { background: #000 !important; }
+
+body, #root, #header, .aclb, ._55wo, ._1upc, input, ._2f9r, ._59e9, ._5pz4, ._5lp4, ._5lp5, ._d4i, ._5c9u, div._5y57::before, ._59f6._55so::before, .structuredPublisher, ._94v, ._vqv, ._5lp5, ._55wm, .acw, ._3f50, .mentions-placeholder, .mentions, .mentions-shadow, .mentions-measurer, .acg, ._59tu, ._52z5, ._4l9b, ._4gj3, .groupChromeView, ._uww, textarea, ._15n_, ._skt, ._5f28, ._14_j, ._3bg5, ._53_-, ._52x1 { background: #000 !important; }
+
+.jewel, .flyout, ._13e_, ._5-lw, ._5c0e, .jx-result, ._336p { background: black !important; }
+
+button, button::before, .touch ._56bt, ._56be::before, .btnS, .touch::before, ._5xo2, ._5u5a::before, ._4u3j, ._15ks, ._2v9s, ._5hua, ._59tt, ._41ft, .jx-tokenizer, ._4e8n, ._5pxa._3uj9, ._4qax { background: rgba(51, 51, 51, 0.2) !important; }
+
+body, input, ._43mh, .touch .btn, p, span, .fcg, button, ._52j9, ._52jb, ._52ja, ._5j35, ._rnk, ._24u0, ._1g06, ._14ye, textarea, .mentions-input, .mentions-placeholder, .fcw, ._5-7t, .fcl, ._4qas, .thread-title, ._46pa, ._336p, h1, h2, h3, h4, h5, h6 { color: #fff !important; }
+
+::-webkit-input-placeholder { color: #fff !important; }
+
+:-moz-placeholder { color: #fff !important; }
+
+::-moz-placeholder { color: #fff !important; }
+
+:-ms-input-placeholder { color: #fff !important; }
+
+a, ._5fpq { color: #B3E5FC !important; }
+
+._15kl::before, ._5j35::after { border-left: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._1mx0, ._15n_, ._52x1, ._3wjp, ._usq, ._2cul:before, ._13e_, .jewel .flyout, ._3bg5 ._52x6, ._3on6 { border-top: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._15ny::after, ._ap1, ._52x1, ._59tu, ._usq, ._13e_, ._59f6._55so::before, ._4gj3, .jx-result, ._5lp5, ._5pz4, ._5lp4, ._5lp5, ._3on6, ._5h6z, ._5h6x { border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._d4i, ._4e8n, ._uww, .mentions-placeholder, .mentions-shadow, .mentions-measurer, ._5whq, ._59tt, ._41ft::after, .jx-tokenizer, ._3uqf { border: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._4o58::after, .acw, .aclb, ._4qax { border-color: rgba(255, 255, 255, 0.3) !important; }
+
+._2ip_ ._2zh4::before, ._2ip_ ._15kk::before, ._2ip_ ._15kk + ._4u3j::before, ._58a0:before { background: rgba(255, 255, 255, 0.3) !important; }
+
+._56bf, .touch .btn { border-radius: 0 !important; border: 0 !important; }
+
+.touch, ._56bt, ._56bu { text-shadow: none !important; }
+
+.touch .btnS, button, ._94v { box-shadow: none !important; }
+
+[data-sigil="m-loading-indicator-animate m-loading-indicator-root"] { display: none !important; }
diff --git a/app/src/main/assets/css/themes/material_amoled.scss b/app/src/main/assets/css/themes/material_amoled.scss
new file mode 100644
index 00000000..20ac414c
--- /dev/null
+++ b/app/src/main/assets/css/themes/material_amoled.scss
@@ -0,0 +1,2 @@
+@import "../core/colors_amoled";
+@import "../core/main";
diff --git a/app/src/main/assets/css/themes/material_dark.compact.css b/app/src/main/assets/css/themes/material_dark.compact.css
new file mode 100644
index 00000000..ce1684e1
--- /dev/null
+++ b/app/src/main/assets/css/themes/material_dark.compact.css
@@ -0,0 +1,39 @@
+#viewport { background: #303030 !important; }
+
+body, #root, #header, .aclb, ._55wo, ._1upc, input, ._2f9r, ._59e9, ._5pz4, ._5lp4, ._5lp5, ._d4i, ._5c9u, div._5y57::before, ._59f6._55so::before, .structuredPublisher, ._94v, ._vqv, ._5lp5, ._55wm, .acw, ._3f50, .mentions-placeholder, .mentions, .mentions-shadow, .mentions-measurer, .acg, ._59tu, ._52z5, ._4l9b, ._4gj3, .groupChromeView, ._uww, textarea, ._15n_, ._skt, ._5f28, ._14_j, ._3bg5, ._53_-, ._52x1 { background: #303030 !important; }
+
+.jewel, .flyout, ._13e_, ._5-lw, ._5c0e, .jx-result, ._336p { background: #303030 !important; }
+
+button, button::before, .touch ._56bt, ._56be::before, .btnS, .touch::before, ._5xo2, ._5u5a::before, ._4u3j, ._15ks, ._2v9s, ._5hua, ._59tt, ._41ft, .jx-tokenizer, ._4e8n, ._5pxa._3uj9, ._4qax { background: rgba(99, 99, 99, 0.2) !important; }
+
+body, input, ._43mh, .touch .btn, p, span, .fcg, button, ._52j9, ._52jb, ._52ja, ._5j35, ._rnk, ._24u0, ._1g06, ._14ye, textarea, .mentions-input, .mentions-placeholder, .fcw, ._5-7t, .fcl, ._4qas, .thread-title, ._46pa, ._336p, h1, h2, h3, h4, h5, h6 { color: #fff !important; }
+
+::-webkit-input-placeholder { color: #fff !important; }
+
+:-moz-placeholder { color: #fff !important; }
+
+::-moz-placeholder { color: #fff !important; }
+
+:-ms-input-placeholder { color: #fff !important; }
+
+a, ._5fpq { color: #B3E5FC !important; }
+
+._15kl::before, ._5j35::after { border-left: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._1mx0, ._15n_, ._52x1, ._3wjp, ._usq, ._2cul:before, ._13e_, .jewel .flyout, ._3bg5 ._52x6, ._3on6 { border-top: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._15ny::after, ._ap1, ._52x1, ._59tu, ._usq, ._13e_, ._59f6._55so::before, ._4gj3, .jx-result, ._5lp5, ._5pz4, ._5lp4, ._5lp5, ._3on6, ._5h6z, ._5h6x { border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._d4i, ._4e8n, ._uww, .mentions-placeholder, .mentions-shadow, .mentions-measurer, ._5whq, ._59tt, ._41ft::after, .jx-tokenizer, ._3uqf { border: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._4o58::after, .acw, .aclb, ._4qax { border-color: rgba(255, 255, 255, 0.3) !important; }
+
+._2ip_ ._2zh4::before, ._2ip_ ._15kk::before, ._2ip_ ._15kk + ._4u3j::before, ._58a0:before { background: rgba(255, 255, 255, 0.3) !important; }
+
+._56bf, .touch .btn { border-radius: 0 !important; border: 0 !important; }
+
+.touch, ._56bt, ._56bu { text-shadow: none !important; }
+
+.touch .btnS, button, ._94v { box-shadow: none !important; }
+
+[data-sigil="m-loading-indicator-animate m-loading-indicator-root"] { display: none !important; }
diff --git a/app/src/main/assets/css/themes/material_dark.scss b/app/src/main/assets/css/themes/material_dark.scss
new file mode 100644
index 00000000..ad6263d5
--- /dev/null
+++ b/app/src/main/assets/css/themes/material_dark.scss
@@ -0,0 +1,2 @@
+@import "../core/colors_dark";
+@import "../core/main";
diff --git a/app/src/main/assets/css/themes/material_glass.compact.css b/app/src/main/assets/css/themes/material_glass.compact.css
new file mode 100644
index 00000000..3a6f4a8e
--- /dev/null
+++ b/app/src/main/assets/css/themes/material_glass.compact.css
@@ -0,0 +1,39 @@
+#viewport { background: rgba(0, 0, 0, 0.3) !important; }
+
+body, #root, #header, .aclb, ._55wo, ._1upc, input, ._2f9r, ._59e9, ._5pz4, ._5lp4, ._5lp5, ._d4i, ._5c9u, div._5y57::before, ._59f6._55so::before, .structuredPublisher, ._94v, ._vqv, ._5lp5, ._55wm, .acw, ._3f50, .mentions-placeholder, .mentions, .mentions-shadow, .mentions-measurer, .acg, ._59tu, ._52z5, ._4l9b, ._4gj3, .groupChromeView, ._uww, textarea, ._15n_, ._skt, ._5f28, ._14_j, ._3bg5, ._53_-, ._52x1 { background: transparent !important; }
+
+.jewel, .flyout, ._13e_, ._5-lw, ._5c0e, .jx-result, ._336p { background: black !important; }
+
+button, button::before, .touch ._56bt, ._56be::before, .btnS, .touch::before, ._5xo2, ._5u5a::before, ._4u3j, ._15ks, ._2v9s, ._5hua, ._59tt, ._41ft, .jx-tokenizer, ._4e8n, ._5pxa._3uj9, ._4qax { background: rgba(51, 51, 51, 0.2) !important; }
+
+body, input, ._43mh, .touch .btn, p, span, .fcg, button, ._52j9, ._52jb, ._52ja, ._5j35, ._rnk, ._24u0, ._1g06, ._14ye, textarea, .mentions-input, .mentions-placeholder, .fcw, ._5-7t, .fcl, ._4qas, .thread-title, ._46pa, ._336p, h1, h2, h3, h4, h5, h6 { color: #fff !important; }
+
+::-webkit-input-placeholder { color: #fff !important; }
+
+:-moz-placeholder { color: #fff !important; }
+
+::-moz-placeholder { color: #fff !important; }
+
+:-ms-input-placeholder { color: #fff !important; }
+
+a, ._5fpq { color: #B3E5FC !important; }
+
+._15kl::before, ._5j35::after { border-left: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._1mx0, ._15n_, ._52x1, ._3wjp, ._usq, ._2cul:before, ._13e_, .jewel .flyout, ._3bg5 ._52x6, ._3on6 { border-top: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._15ny::after, ._ap1, ._52x1, ._59tu, ._usq, ._13e_, ._59f6._55so::before, ._4gj3, .jx-result, ._5lp5, ._5pz4, ._5lp4, ._5lp5, ._3on6, ._5h6z, ._5h6x { border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._d4i, ._4e8n, ._uww, .mentions-placeholder, .mentions-shadow, .mentions-measurer, ._5whq, ._59tt, ._41ft::after, .jx-tokenizer, ._3uqf { border: 1px solid rgba(255, 255, 255, 0.3) !important; }
+
+._4o58::after, .acw, .aclb, ._4qax { border-color: rgba(255, 255, 255, 0.3) !important; }
+
+._2ip_ ._2zh4::before, ._2ip_ ._15kk::before, ._2ip_ ._15kk + ._4u3j::before, ._58a0:before { background: rgba(255, 255, 255, 0.3) !important; }
+
+._56bf, .touch .btn { border-radius: 0 !important; border: 0 !important; }
+
+.touch, ._56bt, ._56bu { text-shadow: none !important; }
+
+.touch .btnS, button, ._94v { box-shadow: none !important; }
+
+[data-sigil="m-loading-indicator-animate m-loading-indicator-root"] { display: none !important; }
diff --git a/app/src/main/assets/css/themes/material_glass.scss b/app/src/main/assets/css/themes/material_glass.scss
new file mode 100644
index 00000000..273a66a6
--- /dev/null
+++ b/app/src/main/assets/css/themes/material_glass.scss
@@ -0,0 +1,2 @@
+@import "../core/colors_glass";
+@import "../core/main";
diff --git a/app/src/main/assets/css/themes/material_light.compact.css b/app/src/main/assets/css/themes/material_light.compact.css
new file mode 100644
index 00000000..973c7880
--- /dev/null
+++ b/app/src/main/assets/css/themes/material_light.compact.css
@@ -0,0 +1,39 @@
+#viewport { background: #fafafa !important; }
+
+body, #root, #header, .aclb, ._55wo, ._1upc, input, ._2f9r, ._59e9, ._5pz4, ._5lp4, ._5lp5, ._d4i, ._5c9u, div._5y57::before, ._59f6._55so::before, .structuredPublisher, ._94v, ._vqv, ._5lp5, ._55wm, .acw, ._3f50, .mentions-placeholder, .mentions, .mentions-shadow, .mentions-measurer, .acg, ._59tu, ._52z5, ._4l9b, ._4gj3, .groupChromeView, ._uww, textarea, ._15n_, ._skt, ._5f28, ._14_j, ._3bg5, ._53_-, ._52x1 { background: #fafafa !important; }
+
+.jewel, .flyout, ._13e_, ._5-lw, ._5c0e, .jx-result, ._336p { background: #fafafa !important; }
+
+button, button::before, .touch ._56bt, ._56be::before, .btnS, .touch::before, ._5xo2, ._5u5a::before, ._4u3j, ._15ks, ._2v9s, ._5hua, ._59tt, ._41ft, .jx-tokenizer, ._4e8n, ._5pxa._3uj9, ._4qax { background: rgba(255, 255, 255, 0.2) !important; }
+
+body, input, ._43mh, .touch .btn, p, span, .fcg, button, ._52j9, ._52jb, ._52ja, ._5j35, ._rnk, ._24u0, ._1g06, ._14ye, textarea, .mentions-input, .mentions-placeholder, .fcw, ._5-7t, .fcl, ._4qas, .thread-title, ._46pa, ._336p, h1, h2, h3, h4, h5, h6 { color: #000 !important; }
+
+::-webkit-input-placeholder { color: #000 !important; }
+
+:-moz-placeholder { color: #000 !important; }
+
+::-moz-placeholder { color: #000 !important; }
+
+:-ms-input-placeholder { color: #000 !important; }
+
+a, ._5fpq { color: #263238 !important; }
+
+._15kl::before, ._5j35::after { border-left: 1px solid rgba(0, 0, 0, 0.3) !important; }
+
+._1mx0, ._15n_, ._52x1, ._3wjp, ._usq, ._2cul:before, ._13e_, .jewel .flyout, ._3bg5 ._52x6, ._3on6 { border-top: 1px solid rgba(0, 0, 0, 0.3) !important; }
+
+._15ny::after, ._ap1, ._52x1, ._59tu, ._usq, ._13e_, ._59f6._55so::before, ._4gj3, .jx-result, ._5lp5, ._5pz4, ._5lp4, ._5lp5, ._3on6, ._5h6z, ._5h6x { border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important; }
+
+._d4i, ._4e8n, ._uww, .mentions-placeholder, .mentions-shadow, .mentions-measurer, ._5whq, ._59tt, ._41ft::after, .jx-tokenizer, ._3uqf { border: 1px solid rgba(0, 0, 0, 0.3) !important; }
+
+._4o58::after, .acw, .aclb, ._4qax { border-color: rgba(0, 0, 0, 0.3) !important; }
+
+._2ip_ ._2zh4::before, ._2ip_ ._15kk::before, ._2ip_ ._15kk + ._4u3j::before, ._58a0:before { background: rgba(0, 0, 0, 0.3) !important; }
+
+._56bf, .touch .btn { border-radius: 0 !important; border: 0 !important; }
+
+.touch, ._56bt, ._56bu { text-shadow: none !important; }
+
+.touch .btnS, button, ._94v { box-shadow: none !important; }
+
+[data-sigil="m-loading-indicator-animate m-loading-indicator-root"] { display: none !important; }
diff --git a/app/src/main/assets/css/themes/material_light.scss b/app/src/main/assets/css/themes/material_light.scss
new file mode 100644
index 00000000..624a57a4
--- /dev/null
+++ b/app/src/main/assets/css/themes/material_light.scss
@@ -0,0 +1,2 @@
+@import "../core/colors_light";
+@import "../core/main";
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/MainActivity.kt b/app/src/main/kotlin/com/pitchedapps/frost/MainActivity.kt
index 12b308d0..fce3e670 100644
--- a/app/src/main/kotlin/com/pitchedapps/frost/MainActivity.kt
+++ b/app/src/main/kotlin/com/pitchedapps/frost/MainActivity.kt
@@ -30,10 +30,7 @@ import com.pitchedapps.frost.facebook.FbCookie.switchUser
 import com.pitchedapps.frost.facebook.FbTab
 import com.pitchedapps.frost.facebook.PROFILE_PICTURE_URL
 import com.pitchedapps.frost.fragments.WebFragment
-import com.pitchedapps.frost.utils.Prefs
-import com.pitchedapps.frost.utils.cookies
-import com.pitchedapps.frost.utils.launchNewTask
-import com.pitchedapps.frost.utils.launchWebOverlay
+import com.pitchedapps.frost.utils.*
 import io.reactivex.disposables.Disposable
 import io.reactivex.subjects.PublishSubject
 
@@ -176,7 +173,9 @@ class MainActivity : BaseActivity() {
     override fun onOptionsItemSelected(item: MenuItem): Boolean {
         when (item.itemId) {
             R.id.action_settings -> {
-                startActivity(Intent(this, SettingsActivity::class.java))
+                startActivitySlideIn(SettingsActivity::class.java, clearStack = true, intentBuilder = {
+                    putParcelableArrayListExtra(EXTRA_COOKIES, cookies())
+                })
             }
             R.id.action_changelog -> showChangelog(R.xml.changelog)
             R.id.action_call -> launchNewTask(LoginActivity::class.java)
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/SettingsActivity.kt b/app/src/main/kotlin/com/pitchedapps/frost/SettingsActivity.kt
index b5770739..60499c4a 100644
--- a/app/src/main/kotlin/com/pitchedapps/frost/SettingsActivity.kt
+++ b/app/src/main/kotlin/com/pitchedapps/frost/SettingsActivity.kt
@@ -3,11 +3,13 @@ package com.pitchedapps.frost
 import android.os.Bundle
 import ca.allanwang.kau.kpref.KPrefActivity
 import ca.allanwang.kau.kpref.KPrefAdapterBuilder
-import ca.allanwang.kau.utils.darken
-import ca.allanwang.kau.utils.navigationBarColor
+import ca.allanwang.kau.utils.*
 import ca.allanwang.kau.views.RippleCanvas
 import com.mikepenz.google_material_typeface_library.GoogleMaterial
+import com.pitchedapps.frost.utils.EXTRA_COOKIES
 import com.pitchedapps.frost.utils.Prefs
+import com.pitchedapps.frost.utils.Theme
+import com.pitchedapps.frost.utils.cookies
 
 /**
  * Created by Allan Wang on 2017-06-06.
@@ -17,28 +19,54 @@ class SettingsActivity : KPrefActivity() {
         textColor = { Prefs.textColor }
         accentColor = { Prefs.textColor }
         header(R.string.settings)
-        colorPicker(title = R.string.text_color,
-                getter = { Prefs.textColor }, setter = { Prefs.textColor = it; reload() },
-                configs = {
-                    allowCustom = true
-                })
-        colorPicker(iicon = GoogleMaterial.Icon.gmd_colorize,
-                title = R.string.background_color,
-                getter = { Prefs.bgColor }, setter = { Prefs.bgColor = it; bgCanvas.ripple(it, duration = 500L) },
-                configs = {
-                    allowCustomAlpha = false
-                    allowCustom = true
-                })
-        colorPicker(title = R.string.header_color,
-                getter = { Prefs.headerColor }, setter = {
-            Prefs.headerColor = it
-            val darkerColor = it.darken()
-            this@SettingsActivity.navigationBarColor = darkerColor
-            toolbarCanvas.ripple(darkerColor, RippleCanvas.MIDDLE, RippleCanvas.END, duration = 500L)
-        },
-                configs = {
-                    allowCustom = false
-                })
+        text<Int>(title = R.string.theme, itemBuilder = {
+            onClick = {
+                itemView, innerContent, item ->
+                this@SettingsActivity.materialDialog {
+                    title(R.string.theme)
+                    items(Theme.values().map { this@SettingsActivity.string(it.textRes) })
+                    itemsCallbackSingleChoice(item.pref, {
+                        _, _, which, _ ->
+                        if (item.pref != which) {
+                            item.pref = which
+                            reload()
+                        }
+                        true
+                    })
+                }
+                true
+            }
+            getter = { Prefs.theme }
+            setter = { Prefs.theme = it }
+        }, textGetter = { this@SettingsActivity.string(Theme(it).textRes) })
+        colorPicker(title = R.string.text_color, itemBuilder = {
+            getter = { Prefs.textColor }
+            setter = { Prefs.textColor = it; reload() }
+        }, colorBuilder = {
+            allowCustom = true
+        })
+
+        colorPicker(title = R.string.background_color, coreBuilder = {
+            iicon = GoogleMaterial.Icon.gmd_colorize
+        }, itemBuilder = {
+            getter = { Prefs.bgColor }
+            setter = { Prefs.bgColor = it; bgCanvas.ripple(it, duration = 500L) }
+        }, colorBuilder = {
+            allowCustomAlpha = false
+            allowCustom = true
+        })
+
+        colorPicker(title = R.string.header_color, itemBuilder = {
+            getter = { Prefs.headerColor }
+            setter = {
+                Prefs.headerColor = it
+                val darkerColor = it.darken()
+                this@SettingsActivity.navigationBarColor = darkerColor
+                toolbarCanvas.ripple(darkerColor, RippleCanvas.MIDDLE, RippleCanvas.END, duration = 500L)
+            }
+        }, colorBuilder = {
+            allowCustom = false
+        })
     }
 
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -48,4 +76,10 @@ class SettingsActivity : KPrefActivity() {
         toolbarCanvas.set(darkAccent)
         this.navigationBarColor = darkAccent
     }
+
+    override fun onBackPressed() {
+        startActivitySlideOut(MainActivity::class.java, clearStack = true, intentBuilder = {
+            putParcelableArrayListExtra(EXTRA_COOKIES, cookies())
+        })
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/injectors/CssAssets.kt b/app/src/main/kotlin/com/pitchedapps/frost/injectors/CssAssets.kt
index ad257276..7ef358f3 100644
--- a/app/src/main/kotlin/com/pitchedapps/frost/injectors/CssAssets.kt
+++ b/app/src/main/kotlin/com/pitchedapps/frost/injectors/CssAssets.kt
@@ -9,16 +9,16 @@ import com.pitchedapps.frost.utils.L
  * The enum name must match the css file name
  * //TODO add folder mapping using Prefs
  */
-enum class CssAssets {
-    HEADER, LOGIN
+enum class CssAssets(val folder: String = "themes") : InjectorContract {
+    LOGIN("core"), MATERIAL_LIGHT, MATERIAL_DARK, MATERIAL_AMOLED, MATERIAL_GLASS
     ;
 
     var file = "${name.toLowerCase()}.compact.css"
     var injector: JsInjector? = null
 
-    fun inject(webView: WebView, callback: ((String) -> Unit)?) {
+    override fun inject(webView: WebView, callback: ((String) -> Unit)?) {
         if (injector == null) {
-            val content = webView.context.assets.open("css/core/$file").bufferedReader().use { it.readText() }
+            val content = webView.context.assets.open("css/$folder/$file").bufferedReader().use { it.readText() }
             injector = JsBuilder().css(content).build()
         }
         injector!!.inject(webView, callback)
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/injectors/CssHider.kt b/app/src/main/kotlin/com/pitchedapps/frost/injectors/CssHider.kt
new file mode 100644
index 00000000..5ecc6d66
--- /dev/null
+++ b/app/src/main/kotlin/com/pitchedapps/frost/injectors/CssHider.kt
@@ -0,0 +1,19 @@
+package com.pitchedapps.frost.injectors
+
+import android.webkit.WebView
+
+/**
+ * Created by Allan Wang on 2017-05-31.
+ */
+enum class CssHider(vararg val items: String) : InjectorContract {
+    HEADER("#header[data-sigil=\"MTopBlueBarHeader\"]", "#header-notices", "[data-sigil*=\"m-promo-jewel-header\"]"),
+    ADS("[data-xt*=\"is_sponsored.1\"]")
+    ;
+
+    val injector: JsInjector by lazy { JsBuilder().css("${items.joinToString(separator = ",")}{display:none!important}").build() }
+
+    override fun inject(webView: WebView, callback: ((String) -> Unit)?) {
+        injector.inject(webView, callback)
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/injectors/JsInjector.kt b/app/src/main/kotlin/com/pitchedapps/frost/injectors/JsInjector.kt
index 14e0606b..0000ecf1 100644
--- a/app/src/main/kotlin/com/pitchedapps/frost/injectors/JsInjector.kt
+++ b/app/src/main/kotlin/com/pitchedapps/frost/injectors/JsInjector.kt
@@ -1,6 +1,11 @@
 package com.pitchedapps.frost.injectors
 
 import android.webkit.WebView
+import com.pitchedapps.frost.facebook.FbCookie
+import com.pitchedapps.frost.utils.L
+import io.reactivex.Observable
+import io.reactivex.android.schedulers.AndroidSchedulers
+import io.reactivex.subjects.SingleSubject
 
 class JsBuilder {
     private val css = StringBuilder()
@@ -30,8 +35,27 @@ class JsBuilder {
     }
 }
 
-class JsInjector(val function: String) {
-    fun inject(webView: WebView, callback: ((String) -> Unit)? = null) {
+interface InjectorContract {
+    fun inject(webView: WebView) = inject(webView, null)
+    fun inject(webView: WebView, callback: ((String) -> Unit)?)
+}
+
+/**
+ * Helper method to inject multiple functions simultaneously with a single callback
+ */
+fun WebView.jsInject(vararg injectors: InjectorContract, callback: ((Array<String>) -> Unit)) {
+    val observables = Array(injectors.size, { SingleSubject.create<String>() })
+    Observable.zip<String, Array<String>>(observables.map { it.toObservable() }, { it.map { it.toString() }.toTypedArray() }).subscribeOn(AndroidSchedulers.mainThread()).subscribe({
+        callback.invoke(it)
+    })
+    (0 until injectors.size).asSequence().forEach {
+        i ->
+        injectors[i].inject(this, { observables[i].onSuccess(it) })
+    }
+}
+
+class JsInjector(val function: String) : InjectorContract {
+    override fun inject(webView: WebView, callback: ((String) -> Unit)?) {
         webView.evaluateJavascript(function, { value -> callback?.invoke(value) })
     }
 }
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/utils/ContextUtils.kt b/app/src/main/kotlin/com/pitchedapps/frost/utils/ContextUtils.kt
index 1569532c..2053a6bf 100644
--- a/app/src/main/kotlin/com/pitchedapps/frost/utils/ContextUtils.kt
+++ b/app/src/main/kotlin/com/pitchedapps/frost/utils/ContextUtils.kt
@@ -18,8 +18,8 @@ import com.pitchedapps.frost.facebook.FbTab
 /**
  * Created by Allan Wang on 2017-06-03.
  */
-private const val EXTRA_COOKIES = "extra_cookies"
-private const val ARG_URL = "arg_url"
+internal const val EXTRA_COOKIES = "extra_cookies"
+internal const val ARG_URL = "arg_url"
 
 fun Context.launchNewTask(clazz: Class<out Activity>, cookieList: ArrayList<CookieModel> = arrayListOf(), clearStack: Boolean = clazz != LoginActivity::class.java) {
     startActivity(clazz, clearStack, {
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/utils/Prefs.kt b/app/src/main/kotlin/com/pitchedapps/frost/utils/Prefs.kt
index 6284a2f8..115f981a 100644
--- a/app/src/main/kotlin/com/pitchedapps/frost/utils/Prefs.kt
+++ b/app/src/main/kotlin/com/pitchedapps/frost/utils/Prefs.kt
@@ -15,6 +15,8 @@ object Prefs : KPref() {
 
     var userId: Long by kpref("user_id", -1L)
 
+    var theme: Int by kpref("theme", 0)
+
     var textColor: Int by kpref("color_text", Color.BLACK)
 
     var bgColor: Int by kpref("color_bg", Color.WHITE)
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/utils/Theme.kt b/app/src/main/kotlin/com/pitchedapps/frost/utils/Theme.kt
new file mode 100644
index 00000000..4a0ffd8f
--- /dev/null
+++ b/app/src/main/kotlin/com/pitchedapps/frost/utils/Theme.kt
@@ -0,0 +1,19 @@
+package com.pitchedapps.frost.utils
+
+import com.pitchedapps.frost.R
+
+/**
+ * Created by Allan Wang on 2017-06-14.
+ */
+enum class Theme(val textRes: Int) {
+    DEFAULT(R.string._default),
+    LIGHT(R.string.light),
+    DARK(R.string.dark),
+    AMOLED(R.string.amoled),
+    GLASS(R.string.glass),
+    CUSTOM(R.string.custom);
+
+    companion object {
+        operator fun invoke(index: Int) = values()[index]
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClient.kt b/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClient.kt
index 2f24d055..4845f553 100644
--- a/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClient.kt
+++ b/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClient.kt
@@ -10,9 +10,7 @@ import com.pitchedapps.frost.MainActivity
 import com.pitchedapps.frost.SelectorActivity
 import com.pitchedapps.frost.facebook.FACEBOOK_COM
 import com.pitchedapps.frost.facebook.FbCookie
-import com.pitchedapps.frost.injectors.CssAssets
-import com.pitchedapps.frost.injectors.JsActions
-import com.pitchedapps.frost.injectors.JsAssets
+import com.pitchedapps.frost.injectors.*
 import com.pitchedapps.frost.utils.L
 import com.pitchedapps.frost.utils.Prefs
 import com.pitchedapps.frost.utils.cookies
@@ -63,7 +61,8 @@ open class FrostWebViewClient(val refreshObservable: Subject<Boolean>) : WebView
 
     internal fun onPageFinishedReveal(view: FrostWebViewCore, animate: Boolean) {
         L.d("Page finished reveal")
-        CssAssets.HEADER.inject(view, {
+        view.jsInject(CssHider.HEADER, CssAssets.MATERIAL_DARK, callback = {
+            L.d("Finished ${it.contentToString()}")
             refreshObservable.onNext(false)
             if (animate) view.circularReveal(offset = 150L)
             else view.fadeIn(duration = 100L)
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClientMenu.kt b/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClientMenu.kt
index faf42fdd..3b032f62 100644
--- a/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClientMenu.kt
+++ b/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClientMenu.kt
@@ -13,7 +13,6 @@ class FrostWebViewClientMenu(refreshObservable: Subject<Boolean>) : FrostWebView
 
     var content: String? = null
     var view: FrostWebViewCore? = null
-    var loadingFromBase: Boolean = false
 
     override fun onPageStarted(view: WebView, url: String, favicon: Bitmap?) {
         super.onPageStarted(view, url, favicon)
@@ -22,7 +21,6 @@ class FrostWebViewClientMenu(refreshObservable: Subject<Boolean>) : FrostWebView
                 "https://m.facebook.com/settings",
                 "https://m.facebook.com/settings#",
                 "https://m.facebook.com/settings#!/settings?soft=bookmarks" -> {
-                    loadingFromBase = true
                     L.d("Load from stored $url")
                     view.stopLoading()
                     view.loadDataWithBaseURL("https://touch.facebook.com/notifications", content, "text/html", "utf-8", "https://google.ca/test")
@@ -33,8 +31,6 @@ class FrostWebViewClientMenu(refreshObservable: Subject<Boolean>) : FrostWebView
 
     override fun onPageFinished(view: WebView, url: String) {
         super.onPageFinished(view, url)
-        L.d("DON $url")
-        loadingFromBase = false
         with(view as FrostWebViewCore) {
             if (url == view.baseUrl) {
                 this@FrostWebViewClientMenu.view = view
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index c7fc6e72..9e51242c 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -32,4 +32,11 @@
     <string name="exit">Exit</string>
     <string name="exit_confirmation">Are you sure you want to exit Frost?</string>
     <string name="do_not_show_again">Don\'t show again</string>
+
+    <string name="_default">Default</string>
+    <string name="light">Light</string>
+    <string name="dark">Dark</string>
+    <string name="amoled">AMOLED</string>
+    <string name="glass">Glass</string>
+    <string name="custom">Custom</string>
 </resources>
diff --git a/app/src/main/res/values/strings_preferences b/app/src/main/res/values/strings_preferences
index 9f9ca131..03d5e905 100644
--- a/app/src/main/res/values/strings_preferences
+++ b/app/src/main/res/values/strings_preferences
@@ -1,4 +1,5 @@
 <resources>
+    <string name="theme">Theme</string>
     <string name="text_color">Text Color</string>
     <string name="background_color">Background Color</string>
     <string name="header_color">Header Color</string>
diff --git a/app/src/test/kotlin/com/pitchedapps/frost/MiscTest.kt b/app/src/test/kotlin/com/pitchedapps/frost/MiscTest.kt
new file mode 100644
index 00000000..c9d27a1c
--- /dev/null
+++ b/app/src/test/kotlin/com/pitchedapps/frost/MiscTest.kt
@@ -0,0 +1,15 @@
+package com.pitchedapps.frost
+
+import com.pitchedapps.frost.injectors.CssHider
+import org.junit.Test
+
+/**
+ * Created by Allan Wang on 2017-06-14.
+ */
+class MiscTest {
+
+    @Test
+    fun asdf() {
+        print(CssHider.HEADER.injector.function)
+    }
+}
\ No newline at end of file