From b9fb0bc241c90ac2668be40721d2fa390d2893ec Mon Sep 17 00:00:00 2001
From: Rintan <12230083+Rintan@users.noreply.github.com>
Date: Tue, 29 Dec 2020 17:12:00 +0900
Subject: [PATCH] add y-zu theme fix some bugs

---
 .../mastodon-material-dark/color/black.scss   |   3 +-
 .../color/mastodon-dark.scss                  |   3 +-
 .../color/mastodon-light.scss                 |   3 +-
 .../color/plus-classic.scss                   |   3 +-
 .../mastodon-material-dark/color/v1-dark.scss |   3 +-
 .../color/v1-light.scss                       |   3 +-
 .../mastodon-material-dark/color/v2-dark.scss |   3 +-
 .../color/v2-light.scss                       |   3 +-
 .../layout/material-v1.scss                   |   7 +-
 .../layout/material-v2.scss                   |   8 +-
 .../styles/mastodon-material-dark/loader.scss |   1 +
 .../plugins/astarte.scss                      |  26 +
 .../mastodon-material-dark/plugins/dense.scss |   9 +-
 .../mastodon-material-dark/theme/_mixins.scss |  29 +
 .../mastodon-material-dark/theme/account.scss |   2 +-
 .../mastodon-material-dark/theme/button.scss  |   1 +
 .../mastodon-material-dark/theme/columns.scss |   2 +-
 .../theme/components.scss                     |  20 +-
 .../theme/material-icons.scss                 |   3 +
 .../mastodon-material-dark/theme/modal.scss   |   1 +
 .../mastodon-material-light/color/black.scss  |   3 +-
 .../color/mastodon-dark.scss                  |   3 +-
 .../color/mastodon-light.scss                 |   3 +-
 .../color/plus-classic.scss                   |   3 +-
 .../color/v1-dark.scss                        |   3 +-
 .../color/v1-light.scss                       |   3 +-
 .../color/v2-dark.scss                        |   3 +-
 .../color/v2-light.scss                       |   3 +-
 .../layout/material-v1.scss                   |   7 +-
 .../layout/material-v2.scss                   |   8 +-
 .../mastodon-material-light/loader.scss       |   1 +
 .../plugins/astarte.scss                      |  26 +
 .../plugins/dense.scss                        |   9 +-
 .../theme/_mixins.scss                        |  29 +
 .../theme/account.scss                        |   2 +-
 .../mastodon-material-light/theme/button.scss |   1 +
 .../theme/columns.scss                        |   2 +-
 .../theme/components.scss                     |  20 +-
 .../theme/material-icons.scss                 |   3 +
 .../mastodon-material-light/theme/modal.scss  |   1 +
 .../styles/material-black/color/black.scss    |   3 +-
 .../material-black/color/mastodon-dark.scss   |   3 +-
 .../material-black/color/mastodon-light.scss  |   3 +-
 .../material-black/color/plus-classic.scss    |   3 +-
 .../styles/material-black/color/v1-dark.scss  |   3 +-
 .../styles/material-black/color/v1-light.scss |   3 +-
 .../styles/material-black/color/v2-dark.scss  |   3 +-
 .../styles/material-black/color/v2-light.scss |   3 +-
 .../material-black/layout/material-v1.scss    |   7 +-
 .../material-black/layout/material-v2.scss    |   8 +-
 .../styles/material-black/loader.scss         |   1 +
 .../material-black/plugins/astarte.scss       |  26 +
 .../styles/material-black/plugins/dense.scss  |   9 +-
 .../styles/material-black/theme/_mixins.scss  |  29 +
 .../styles/material-black/theme/account.scss  |   2 +-
 .../styles/material-black/theme/button.scss   |   1 +
 .../styles/material-black/theme/columns.scss  |   2 +-
 .../material-black/theme/components.scss      |  20 +-
 .../material-black/theme/material-icons.scss  |   3 +
 .../styles/material-black/theme/modal.scss    |   1 +
 .../styles/material-dark/color/black.scss     |   3 +-
 .../material-dark/color/mastodon-dark.scss    |   3 +-
 .../material-dark/color/mastodon-light.scss   |   3 +-
 .../material-dark/color/plus-classic.scss     |   3 +-
 .../styles/material-dark/color/v1-dark.scss   |   3 +-
 .../styles/material-dark/color/v1-light.scss  |   3 +-
 .../styles/material-dark/color/v2-dark.scss   |   3 +-
 .../styles/material-dark/color/v2-light.scss  |   3 +-
 .../material-dark/layout/material-v1.scss     |   7 +-
 .../material-dark/layout/material-v2.scss     |   8 +-
 .../styles/material-dark/loader.scss          |   1 +
 .../styles/material-dark/plugins/astarte.scss |  26 +
 .../styles/material-dark/plugins/dense.scss   |   9 +-
 .../styles/material-dark/theme/_mixins.scss   |  29 +
 .../styles/material-dark/theme/account.scss   |   2 +-
 .../styles/material-dark/theme/button.scss    |   1 +
 .../styles/material-dark/theme/columns.scss   |   2 +-
 .../material-dark/theme/components.scss       |  20 +-
 .../material-dark/theme/material-icons.scss   |   3 +
 .../styles/material-dark/theme/modal.scss     |   1 +
 .../styles/material-light/color/black.scss    |   3 +-
 .../material-light/color/mastodon-dark.scss   |   3 +-
 .../material-light/color/mastodon-light.scss  |   3 +-
 .../material-light/color/plus-classic.scss    |   3 +-
 .../styles/material-light/color/v1-dark.scss  |   3 +-
 .../styles/material-light/color/v1-light.scss |   3 +-
 .../styles/material-light/color/v2-dark.scss  |   3 +-
 .../styles/material-light/color/v2-light.scss |   3 +-
 .../material-light/layout/material-v1.scss    |   7 +-
 .../material-light/layout/material-v2.scss    |   8 +-
 .../styles/material-light/loader.scss         |   1 +
 .../material-light/plugins/astarte.scss       |  26 +
 .../styles/material-light/plugins/dense.scss  |   9 +-
 .../styles/material-light/theme/_mixins.scss  |  29 +
 .../styles/material-light/theme/account.scss  |   2 +-
 .../styles/material-light/theme/button.scss   |   1 +
 .../styles/material-light/theme/columns.scss  |   2 +-
 .../material-light/theme/components.scss      |  20 +-
 .../material-light/theme/material-icons.scss  |   3 +
 .../styles/material-light/theme/modal.scss    |   1 +
 app/javascript/styles/plus/color/black.scss   |   3 +-
 .../styles/plus/color/mastodon-dark.scss      |   3 +-
 .../styles/plus/color/mastodon-light.scss     |   3 +-
 .../styles/plus/color/plus-classic.scss       |   3 +-
 app/javascript/styles/plus/color/v1-dark.scss |   3 +-
 .../styles/plus/color/v1-light.scss           |   3 +-
 app/javascript/styles/plus/color/v2-dark.scss |   3 +-
 .../styles/plus/color/v2-light.scss           |   3 +-
 .../styles/plus/layout/material-v1.scss       |   7 +-
 .../styles/plus/layout/material-v2.scss       |   8 +-
 app/javascript/styles/plus/loader.scss        |   1 +
 .../styles/plus/plugins/astarte.scss          |  26 +
 app/javascript/styles/plus/plugins/dense.scss |   9 +-
 app/javascript/styles/plus/theme/_mixins.scss |  29 +
 app/javascript/styles/plus/theme/account.scss |   2 +-
 app/javascript/styles/plus/theme/button.scss  |   1 +
 app/javascript/styles/plus/theme/columns.scss |   2 +-
 .../styles/plus/theme/components.scss         |  20 +-
 .../styles/plus/theme/material-icons.scss     |   3 +
 app/javascript/styles/plus/theme/modal.scss   |   1 +
 app/javascript/styles/y-zu-dark.scss          |   2 +
 .../styles/y-zu-dark/color/black.scss         | 146 ++++
 .../styles/y-zu-dark/color/mastodon-dark.scss | 146 ++++
 .../y-zu-dark/color/mastodon-light.scss       | 145 ++++
 .../styles/y-zu-dark/color/plus-classic.scss  | 145 ++++
 .../styles/y-zu-dark/color/v1-dark.scss       | 145 ++++
 .../styles/y-zu-dark/color/v1-light.scss      | 146 ++++
 .../styles/y-zu-dark/color/v2-dark.scss       | 146 ++++
 .../styles/y-zu-dark/color/v2-light.scss      | 146 ++++
 .../styles/y-zu-dark/custom_color.scss        |   4 +
 .../styles/y-zu-dark/custom_config.scss       |   6 +
 .../styles/y-zu-dark/custom_layout.scss       |   8 +
 .../styles/y-zu-dark/icon_config.scss         |  28 +
 .../styles/y-zu-dark/layout/material-v1.scss  |  60 ++
 .../styles/y-zu-dark/layout/material-v2.scss  |  70 ++
 app/javascript/styles/y-zu-dark/loader.scss   |   8 +
 .../styles/y-zu-dark/plugins/astarte.scss     |  26 +
 .../styles/y-zu-dark/plugins/cards.scss       |  38 +
 .../styles/y-zu-dark/plugins/dense.scss       |  87 +++
 .../styles/y-zu-dark/plugins/plus.scss        |  36 +
 .../styles/y-zu-dark/theme/_functions.scss    |   8 +
 .../styles/y-zu-dark/theme/_mixins.scss       | 228 ++++++
 .../styles/y-zu-dark/theme/account.scss       | 196 ++++++
 .../styles/y-zu-dark/theme/base_config.scss   |  46 ++
 .../styles/y-zu-dark/theme/basics.scss        |  27 +
 .../styles/y-zu-dark/theme/button.scss        | 145 ++++
 .../styles/y-zu-dark/theme/columns.scss       | 511 ++++++++++++++
 .../styles/y-zu-dark/theme/components.scss    | 647 ++++++++++++++++++
 .../styles/y-zu-dark/theme/containers.scss    |  57 ++
 .../styles/y-zu-dark/theme/control.scss       |  71 ++
 .../styles/y-zu-dark/theme/emoji-picker.scss  |  83 +++
 .../styles/y-zu-dark/theme/icons.scss         |  26 +
 .../y-zu-dark/theme/material-icons.scss       | 260 +++++++
 .../styles/y-zu-dark/theme/media.scss         | 126 ++++
 .../styles/y-zu-dark/theme/modal.scss         | 104 +++
 .../styles/y-zu-dark/theme/responsive.scss    | 110 +++
 .../styles/y-zu-dark/theme/statuses.scss      | 292 ++++++++
 .../styles/y-zu-dark/theme/theme.scss         |  10 +
 .../styles/y-zu-dark/theme/variables.scss     |   7 +
 .../styles/y-zu-dark/theme/widgets.scss       |  32 +
 app/javascript/styles/y-zu-light.scss         |   2 +
 .../styles/y-zu-light/color/black.scss        | 146 ++++
 .../y-zu-light/color/mastodon-dark.scss       | 146 ++++
 .../y-zu-light/color/mastodon-light.scss      | 145 ++++
 .../styles/y-zu-light/color/plus-classic.scss | 145 ++++
 .../styles/y-zu-light/color/v1-dark.scss      | 145 ++++
 .../styles/y-zu-light/color/v1-light.scss     | 146 ++++
 .../styles/y-zu-light/color/v2-dark.scss      | 146 ++++
 .../styles/y-zu-light/color/v2-light.scss     | 146 ++++
 .../styles/y-zu-light/custom_color.scss       |   5 +
 .../styles/y-zu-light/custom_config.scss      |   6 +
 .../styles/y-zu-light/custom_layout.scss      |   8 +
 .../styles/y-zu-light/icon_config.scss        |  28 +
 .../styles/y-zu-light/layout/material-v1.scss |  60 ++
 .../styles/y-zu-light/layout/material-v2.scss |  70 ++
 app/javascript/styles/y-zu-light/loader.scss  |   8 +
 .../styles/y-zu-light/plugins/astarte.scss    |  26 +
 .../styles/y-zu-light/plugins/cards.scss      |  38 +
 .../styles/y-zu-light/plugins/dense.scss      |  87 +++
 .../styles/y-zu-light/plugins/plus.scss       |  36 +
 .../styles/y-zu-light/theme/_functions.scss   |   8 +
 .../styles/y-zu-light/theme/_mixins.scss      | 228 ++++++
 .../styles/y-zu-light/theme/account.scss      | 196 ++++++
 .../styles/y-zu-light/theme/base_config.scss  |  46 ++
 .../styles/y-zu-light/theme/basics.scss       |  27 +
 .../styles/y-zu-light/theme/button.scss       | 145 ++++
 .../styles/y-zu-light/theme/columns.scss      | 511 ++++++++++++++
 .../styles/y-zu-light/theme/components.scss   | 647 ++++++++++++++++++
 .../styles/y-zu-light/theme/containers.scss   |  57 ++
 .../styles/y-zu-light/theme/control.scss      |  71 ++
 .../styles/y-zu-light/theme/emoji-picker.scss |  83 +++
 .../styles/y-zu-light/theme/icons.scss        |  26 +
 .../y-zu-light/theme/material-icons.scss      | 260 +++++++
 .../styles/y-zu-light/theme/media.scss        | 126 ++++
 .../styles/y-zu-light/theme/modal.scss        | 104 +++
 .../styles/y-zu-light/theme/responsive.scss   | 110 +++
 .../styles/y-zu-light/theme/statuses.scss     | 292 ++++++++
 .../styles/y-zu-light/theme/theme.scss        |  10 +
 .../styles/y-zu-light/theme/variables.scss    |   7 +
 .../styles/y-zu-light/theme/widgets.scss      |  32 +
 config/locales/en.yml                         |   2 +
 config/locales/ja.yml                         |   2 +
 config/themes.yml                             |   2 +
 203 files changed, 9745 insertions(+), 108 deletions(-)
 create mode 100644 app/javascript/styles/mastodon-material-dark/plugins/astarte.scss
 create mode 100644 app/javascript/styles/mastodon-material-light/plugins/astarte.scss
 create mode 100644 app/javascript/styles/material-black/plugins/astarte.scss
 create mode 100644 app/javascript/styles/material-dark/plugins/astarte.scss
 create mode 100644 app/javascript/styles/material-light/plugins/astarte.scss
 create mode 100644 app/javascript/styles/plus/plugins/astarte.scss
 create mode 100644 app/javascript/styles/y-zu-dark.scss
 create mode 100644 app/javascript/styles/y-zu-dark/color/black.scss
 create mode 100644 app/javascript/styles/y-zu-dark/color/mastodon-dark.scss
 create mode 100644 app/javascript/styles/y-zu-dark/color/mastodon-light.scss
 create mode 100644 app/javascript/styles/y-zu-dark/color/plus-classic.scss
 create mode 100644 app/javascript/styles/y-zu-dark/color/v1-dark.scss
 create mode 100644 app/javascript/styles/y-zu-dark/color/v1-light.scss
 create mode 100644 app/javascript/styles/y-zu-dark/color/v2-dark.scss
 create mode 100644 app/javascript/styles/y-zu-dark/color/v2-light.scss
 create mode 100644 app/javascript/styles/y-zu-dark/custom_color.scss
 create mode 100644 app/javascript/styles/y-zu-dark/custom_config.scss
 create mode 100644 app/javascript/styles/y-zu-dark/custom_layout.scss
 create mode 100644 app/javascript/styles/y-zu-dark/icon_config.scss
 create mode 100644 app/javascript/styles/y-zu-dark/layout/material-v1.scss
 create mode 100644 app/javascript/styles/y-zu-dark/layout/material-v2.scss
 create mode 100644 app/javascript/styles/y-zu-dark/loader.scss
 create mode 100644 app/javascript/styles/y-zu-dark/plugins/astarte.scss
 create mode 100644 app/javascript/styles/y-zu-dark/plugins/cards.scss
 create mode 100644 app/javascript/styles/y-zu-dark/plugins/dense.scss
 create mode 100644 app/javascript/styles/y-zu-dark/plugins/plus.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/_functions.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/_mixins.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/account.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/base_config.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/basics.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/button.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/columns.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/components.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/containers.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/control.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/emoji-picker.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/icons.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/material-icons.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/media.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/modal.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/responsive.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/statuses.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/theme.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/variables.scss
 create mode 100644 app/javascript/styles/y-zu-dark/theme/widgets.scss
 create mode 100644 app/javascript/styles/y-zu-light.scss
 create mode 100644 app/javascript/styles/y-zu-light/color/black.scss
 create mode 100644 app/javascript/styles/y-zu-light/color/mastodon-dark.scss
 create mode 100644 app/javascript/styles/y-zu-light/color/mastodon-light.scss
 create mode 100644 app/javascript/styles/y-zu-light/color/plus-classic.scss
 create mode 100644 app/javascript/styles/y-zu-light/color/v1-dark.scss
 create mode 100644 app/javascript/styles/y-zu-light/color/v1-light.scss
 create mode 100644 app/javascript/styles/y-zu-light/color/v2-dark.scss
 create mode 100644 app/javascript/styles/y-zu-light/color/v2-light.scss
 create mode 100644 app/javascript/styles/y-zu-light/custom_color.scss
 create mode 100644 app/javascript/styles/y-zu-light/custom_config.scss
 create mode 100644 app/javascript/styles/y-zu-light/custom_layout.scss
 create mode 100644 app/javascript/styles/y-zu-light/icon_config.scss
 create mode 100644 app/javascript/styles/y-zu-light/layout/material-v1.scss
 create mode 100644 app/javascript/styles/y-zu-light/layout/material-v2.scss
 create mode 100644 app/javascript/styles/y-zu-light/loader.scss
 create mode 100644 app/javascript/styles/y-zu-light/plugins/astarte.scss
 create mode 100644 app/javascript/styles/y-zu-light/plugins/cards.scss
 create mode 100644 app/javascript/styles/y-zu-light/plugins/dense.scss
 create mode 100644 app/javascript/styles/y-zu-light/plugins/plus.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/_functions.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/_mixins.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/account.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/base_config.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/basics.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/button.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/columns.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/components.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/containers.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/control.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/emoji-picker.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/icons.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/material-icons.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/media.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/modal.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/responsive.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/statuses.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/theme.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/variables.scss
 create mode 100644 app/javascript/styles/y-zu-light/theme/widgets.scss

diff --git a/app/javascript/styles/mastodon-material-dark/color/black.scss b/app/javascript/styles/mastodon-material-dark/color/black.scss
index 520330822..693caa813 100644
--- a/app/javascript/styles/mastodon-material-dark/color/black.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/black.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
index a098ed86f..b2e6bf27a 100644
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);
diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
index 18daaf44c..7e94b8de7 100644
--- a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;
diff --git a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
index 11e682c37..d94bbe90f 100644
--- a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
index 7be381ac8..d31fbf04f 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
index 9fe2a1b7e..2888e81b4 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
index 9fc57f153..025b238f5 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
index e960d60a8..fd9469961 100644
--- a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
index d3a2f4847..23c9a0616 100644
--- a/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
+++ b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
\ No newline at end of file
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
index 7c6b0c968..5700a99c8 100644
--- a/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
+++ b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
\ No newline at end of file
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/loader.scss b/app/javascript/styles/mastodon-material-dark/loader.scss
index e962aa921..1ddf9883f 100644
--- a/app/javascript/styles/mastodon-material-dark/loader.scss
+++ b/app/javascript/styles/mastodon-material-dark/loader.scss
@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 //@import 'plugins/cards';
 //@import 'plugins/dense';
 //@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/astarte.scss b/app/javascript/styles/mastodon-material-dark/plugins/astarte.scss
new file mode 100644
index 000000000..8c2e534bb
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/plugins/astarte.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/dense.scss b/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
index a6d861c1a..413336d04 100644
--- a/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
+++ b/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {
diff --git a/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss b/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
index 3980fbc9b..fcd556f2b 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;
diff --git a/app/javascript/styles/mastodon-material-dark/theme/account.scss b/app/javascript/styles/mastodon-material-dark/theme/account.scss
index 0765930e6..551b4f4a8 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/account.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/account.scss
@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;
diff --git a/app/javascript/styles/mastodon-material-dark/theme/button.scss b/app/javascript/styles/mastodon-material-dark/theme/button.scss
index d432bfa1d..5f909d843 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/button.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/button.scss
@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {
diff --git a/app/javascript/styles/mastodon-material-dark/theme/columns.scss b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
index 6128321f1..77a5c777a 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/columns.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 
diff --git a/app/javascript/styles/mastodon-material-dark/theme/components.scss b/app/javascript/styles/mastodon-material-dark/theme/components.scss
index 215d9d94d..aa64aabc5 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/components.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/components.scss
@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
\ No newline at end of file
+}
+
+.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
index c20a3da9c..dd01ce3d6 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;
diff --git a/app/javascript/styles/mastodon-material-dark/theme/modal.scss b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
index e9a9176ea..93e5b24c1 100644
--- a/app/javascript/styles/mastodon-material-dark/theme/modal.scss
+++ b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;
 
diff --git a/app/javascript/styles/mastodon-material-light/color/black.scss b/app/javascript/styles/mastodon-material-light/color/black.scss
index 520330822..693caa813 100644
--- a/app/javascript/styles/mastodon-material-light/color/black.scss
+++ b/app/javascript/styles/mastodon-material-light/color/black.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
index a098ed86f..b2e6bf27a 100644
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);
diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
index 18daaf44c..7e94b8de7 100644
--- a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;
diff --git a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
index 11e682c37..d94bbe90f 100644
--- a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
+++ b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
index 7be381ac8..d31fbf04f 100644
--- a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-light/color/v1-light.scss b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
index 9fe2a1b7e..2888e81b4 100644
--- a/app/javascript/styles/mastodon-material-light/color/v1-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
index 9fc57f153..025b238f5 100644
--- a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-light/color/v2-light.scss b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
index e960d60a8..fd9469961 100644
--- a/app/javascript/styles/mastodon-material-light/color/v2-light.scss
+++ b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/mastodon-material-light/layout/material-v1.scss b/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
index d3a2f4847..23c9a0616 100644
--- a/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
+++ b/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
\ No newline at end of file
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/layout/material-v2.scss b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
index 7c6b0c968..5700a99c8 100644
--- a/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
+++ b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
\ No newline at end of file
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/loader.scss b/app/javascript/styles/mastodon-material-light/loader.scss
index e962aa921..1ddf9883f 100644
--- a/app/javascript/styles/mastodon-material-light/loader.scss
+++ b/app/javascript/styles/mastodon-material-light/loader.scss
@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 //@import 'plugins/cards';
 //@import 'plugins/dense';
 //@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/plugins/astarte.scss b/app/javascript/styles/mastodon-material-light/plugins/astarte.scss
new file mode 100644
index 000000000..8c2e534bb
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/plugins/astarte.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/plugins/dense.scss b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
index a6d861c1a..413336d04 100644
--- a/app/javascript/styles/mastodon-material-light/plugins/dense.scss
+++ b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {
diff --git a/app/javascript/styles/mastodon-material-light/theme/_mixins.scss b/app/javascript/styles/mastodon-material-light/theme/_mixins.scss
index 3980fbc9b..fcd556f2b 100644
--- a/app/javascript/styles/mastodon-material-light/theme/_mixins.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/_mixins.scss
@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;
diff --git a/app/javascript/styles/mastodon-material-light/theme/account.scss b/app/javascript/styles/mastodon-material-light/theme/account.scss
index 0765930e6..551b4f4a8 100644
--- a/app/javascript/styles/mastodon-material-light/theme/account.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/account.scss
@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;
diff --git a/app/javascript/styles/mastodon-material-light/theme/button.scss b/app/javascript/styles/mastodon-material-light/theme/button.scss
index d432bfa1d..5f909d843 100644
--- a/app/javascript/styles/mastodon-material-light/theme/button.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/button.scss
@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {
diff --git a/app/javascript/styles/mastodon-material-light/theme/columns.scss b/app/javascript/styles/mastodon-material-light/theme/columns.scss
index 6128321f1..77a5c777a 100644
--- a/app/javascript/styles/mastodon-material-light/theme/columns.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/columns.scss
@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 
diff --git a/app/javascript/styles/mastodon-material-light/theme/components.scss b/app/javascript/styles/mastodon-material-light/theme/components.scss
index 215d9d94d..aa64aabc5 100644
--- a/app/javascript/styles/mastodon-material-light/theme/components.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/components.scss
@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
\ No newline at end of file
+}
+
+.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
index c20a3da9c..dd01ce3d6 100644
--- a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;
diff --git a/app/javascript/styles/mastodon-material-light/theme/modal.scss b/app/javascript/styles/mastodon-material-light/theme/modal.scss
index e9a9176ea..93e5b24c1 100644
--- a/app/javascript/styles/mastodon-material-light/theme/modal.scss
+++ b/app/javascript/styles/mastodon-material-light/theme/modal.scss
@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;
 
diff --git a/app/javascript/styles/material-black/color/black.scss b/app/javascript/styles/material-black/color/black.scss
index 520330822..693caa813 100644
--- a/app/javascript/styles/material-black/color/black.scss
+++ b/app/javascript/styles/material-black/color/black.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/material-black/color/mastodon-dark.scss b/app/javascript/styles/material-black/color/mastodon-dark.scss
index a098ed86f..b2e6bf27a 100644
--- a/app/javascript/styles/material-black/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-black/color/mastodon-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);
diff --git a/app/javascript/styles/material-black/color/mastodon-light.scss b/app/javascript/styles/material-black/color/mastodon-light.scss
index 18daaf44c..7e94b8de7 100644
--- a/app/javascript/styles/material-black/color/mastodon-light.scss
+++ b/app/javascript/styles/material-black/color/mastodon-light.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;
diff --git a/app/javascript/styles/material-black/color/plus-classic.scss b/app/javascript/styles/material-black/color/plus-classic.scss
index 11e682c37..d94bbe90f 100644
--- a/app/javascript/styles/material-black/color/plus-classic.scss
+++ b/app/javascript/styles/material-black/color/plus-classic.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/material-black/color/v1-dark.scss b/app/javascript/styles/material-black/color/v1-dark.scss
index 7be381ac8..d31fbf04f 100644
--- a/app/javascript/styles/material-black/color/v1-dark.scss
+++ b/app/javascript/styles/material-black/color/v1-dark.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/material-black/color/v1-light.scss b/app/javascript/styles/material-black/color/v1-light.scss
index 9fe2a1b7e..2888e81b4 100644
--- a/app/javascript/styles/material-black/color/v1-light.scss
+++ b/app/javascript/styles/material-black/color/v1-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/material-black/color/v2-dark.scss b/app/javascript/styles/material-black/color/v2-dark.scss
index 9fc57f153..025b238f5 100644
--- a/app/javascript/styles/material-black/color/v2-dark.scss
+++ b/app/javascript/styles/material-black/color/v2-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/material-black/color/v2-light.scss b/app/javascript/styles/material-black/color/v2-light.scss
index e960d60a8..fd9469961 100644
--- a/app/javascript/styles/material-black/color/v2-light.scss
+++ b/app/javascript/styles/material-black/color/v2-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/material-black/layout/material-v1.scss b/app/javascript/styles/material-black/layout/material-v1.scss
index d3a2f4847..23c9a0616 100644
--- a/app/javascript/styles/material-black/layout/material-v1.scss
+++ b/app/javascript/styles/material-black/layout/material-v1.scss
@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
\ No newline at end of file
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/layout/material-v2.scss b/app/javascript/styles/material-black/layout/material-v2.scss
index 7c6b0c968..5700a99c8 100644
--- a/app/javascript/styles/material-black/layout/material-v2.scss
+++ b/app/javascript/styles/material-black/layout/material-v2.scss
@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
\ No newline at end of file
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/loader.scss b/app/javascript/styles/material-black/loader.scss
index e962aa921..1ddf9883f 100644
--- a/app/javascript/styles/material-black/loader.scss
+++ b/app/javascript/styles/material-black/loader.scss
@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 //@import 'plugins/cards';
 //@import 'plugins/dense';
 //@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/plugins/astarte.scss b/app/javascript/styles/material-black/plugins/astarte.scss
new file mode 100644
index 000000000..8c2e534bb
--- /dev/null
+++ b/app/javascript/styles/material-black/plugins/astarte.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/plugins/dense.scss b/app/javascript/styles/material-black/plugins/dense.scss
index a6d861c1a..413336d04 100644
--- a/app/javascript/styles/material-black/plugins/dense.scss
+++ b/app/javascript/styles/material-black/plugins/dense.scss
@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {
diff --git a/app/javascript/styles/material-black/theme/_mixins.scss b/app/javascript/styles/material-black/theme/_mixins.scss
index 3980fbc9b..fcd556f2b 100644
--- a/app/javascript/styles/material-black/theme/_mixins.scss
+++ b/app/javascript/styles/material-black/theme/_mixins.scss
@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;
diff --git a/app/javascript/styles/material-black/theme/account.scss b/app/javascript/styles/material-black/theme/account.scss
index 0765930e6..551b4f4a8 100644
--- a/app/javascript/styles/material-black/theme/account.scss
+++ b/app/javascript/styles/material-black/theme/account.scss
@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;
diff --git a/app/javascript/styles/material-black/theme/button.scss b/app/javascript/styles/material-black/theme/button.scss
index d432bfa1d..5f909d843 100644
--- a/app/javascript/styles/material-black/theme/button.scss
+++ b/app/javascript/styles/material-black/theme/button.scss
@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {
diff --git a/app/javascript/styles/material-black/theme/columns.scss b/app/javascript/styles/material-black/theme/columns.scss
index 6128321f1..77a5c777a 100644
--- a/app/javascript/styles/material-black/theme/columns.scss
+++ b/app/javascript/styles/material-black/theme/columns.scss
@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 
diff --git a/app/javascript/styles/material-black/theme/components.scss b/app/javascript/styles/material-black/theme/components.scss
index 215d9d94d..aa64aabc5 100644
--- a/app/javascript/styles/material-black/theme/components.scss
+++ b/app/javascript/styles/material-black/theme/components.scss
@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
\ No newline at end of file
+}
+
+.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/material-icons.scss b/app/javascript/styles/material-black/theme/material-icons.scss
index c20a3da9c..dd01ce3d6 100644
--- a/app/javascript/styles/material-black/theme/material-icons.scss
+++ b/app/javascript/styles/material-black/theme/material-icons.scss
@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;
diff --git a/app/javascript/styles/material-black/theme/modal.scss b/app/javascript/styles/material-black/theme/modal.scss
index e9a9176ea..93e5b24c1 100644
--- a/app/javascript/styles/material-black/theme/modal.scss
+++ b/app/javascript/styles/material-black/theme/modal.scss
@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;
 
diff --git a/app/javascript/styles/material-dark/color/black.scss b/app/javascript/styles/material-dark/color/black.scss
index 520330822..693caa813 100644
--- a/app/javascript/styles/material-dark/color/black.scss
+++ b/app/javascript/styles/material-dark/color/black.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/material-dark/color/mastodon-dark.scss b/app/javascript/styles/material-dark/color/mastodon-dark.scss
index a098ed86f..b2e6bf27a 100644
--- a/app/javascript/styles/material-dark/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-dark/color/mastodon-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);
diff --git a/app/javascript/styles/material-dark/color/mastodon-light.scss b/app/javascript/styles/material-dark/color/mastodon-light.scss
index 18daaf44c..7e94b8de7 100644
--- a/app/javascript/styles/material-dark/color/mastodon-light.scss
+++ b/app/javascript/styles/material-dark/color/mastodon-light.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;
diff --git a/app/javascript/styles/material-dark/color/plus-classic.scss b/app/javascript/styles/material-dark/color/plus-classic.scss
index 11e682c37..d94bbe90f 100644
--- a/app/javascript/styles/material-dark/color/plus-classic.scss
+++ b/app/javascript/styles/material-dark/color/plus-classic.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/material-dark/color/v1-dark.scss b/app/javascript/styles/material-dark/color/v1-dark.scss
index 7be381ac8..d31fbf04f 100644
--- a/app/javascript/styles/material-dark/color/v1-dark.scss
+++ b/app/javascript/styles/material-dark/color/v1-dark.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/material-dark/color/v1-light.scss b/app/javascript/styles/material-dark/color/v1-light.scss
index 9fe2a1b7e..2888e81b4 100644
--- a/app/javascript/styles/material-dark/color/v1-light.scss
+++ b/app/javascript/styles/material-dark/color/v1-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/material-dark/color/v2-dark.scss b/app/javascript/styles/material-dark/color/v2-dark.scss
index 9fc57f153..025b238f5 100644
--- a/app/javascript/styles/material-dark/color/v2-dark.scss
+++ b/app/javascript/styles/material-dark/color/v2-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/material-dark/color/v2-light.scss b/app/javascript/styles/material-dark/color/v2-light.scss
index e960d60a8..fd9469961 100644
--- a/app/javascript/styles/material-dark/color/v2-light.scss
+++ b/app/javascript/styles/material-dark/color/v2-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/material-dark/layout/material-v1.scss b/app/javascript/styles/material-dark/layout/material-v1.scss
index d3a2f4847..23c9a0616 100644
--- a/app/javascript/styles/material-dark/layout/material-v1.scss
+++ b/app/javascript/styles/material-dark/layout/material-v1.scss
@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
\ No newline at end of file
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/layout/material-v2.scss b/app/javascript/styles/material-dark/layout/material-v2.scss
index 7c6b0c968..5700a99c8 100644
--- a/app/javascript/styles/material-dark/layout/material-v2.scss
+++ b/app/javascript/styles/material-dark/layout/material-v2.scss
@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
\ No newline at end of file
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/loader.scss b/app/javascript/styles/material-dark/loader.scss
index e962aa921..1ddf9883f 100644
--- a/app/javascript/styles/material-dark/loader.scss
+++ b/app/javascript/styles/material-dark/loader.scss
@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 //@import 'plugins/cards';
 //@import 'plugins/dense';
 //@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/plugins/astarte.scss b/app/javascript/styles/material-dark/plugins/astarte.scss
new file mode 100644
index 000000000..8c2e534bb
--- /dev/null
+++ b/app/javascript/styles/material-dark/plugins/astarte.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/plugins/dense.scss b/app/javascript/styles/material-dark/plugins/dense.scss
index a6d861c1a..413336d04 100644
--- a/app/javascript/styles/material-dark/plugins/dense.scss
+++ b/app/javascript/styles/material-dark/plugins/dense.scss
@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {
diff --git a/app/javascript/styles/material-dark/theme/_mixins.scss b/app/javascript/styles/material-dark/theme/_mixins.scss
index 3980fbc9b..fcd556f2b 100644
--- a/app/javascript/styles/material-dark/theme/_mixins.scss
+++ b/app/javascript/styles/material-dark/theme/_mixins.scss
@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;
diff --git a/app/javascript/styles/material-dark/theme/account.scss b/app/javascript/styles/material-dark/theme/account.scss
index 0765930e6..551b4f4a8 100644
--- a/app/javascript/styles/material-dark/theme/account.scss
+++ b/app/javascript/styles/material-dark/theme/account.scss
@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;
diff --git a/app/javascript/styles/material-dark/theme/button.scss b/app/javascript/styles/material-dark/theme/button.scss
index d432bfa1d..5f909d843 100644
--- a/app/javascript/styles/material-dark/theme/button.scss
+++ b/app/javascript/styles/material-dark/theme/button.scss
@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {
diff --git a/app/javascript/styles/material-dark/theme/columns.scss b/app/javascript/styles/material-dark/theme/columns.scss
index 6128321f1..77a5c777a 100644
--- a/app/javascript/styles/material-dark/theme/columns.scss
+++ b/app/javascript/styles/material-dark/theme/columns.scss
@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 
diff --git a/app/javascript/styles/material-dark/theme/components.scss b/app/javascript/styles/material-dark/theme/components.scss
index 215d9d94d..aa64aabc5 100644
--- a/app/javascript/styles/material-dark/theme/components.scss
+++ b/app/javascript/styles/material-dark/theme/components.scss
@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
\ No newline at end of file
+}
+
+.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/material-icons.scss b/app/javascript/styles/material-dark/theme/material-icons.scss
index c20a3da9c..dd01ce3d6 100644
--- a/app/javascript/styles/material-dark/theme/material-icons.scss
+++ b/app/javascript/styles/material-dark/theme/material-icons.scss
@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;
diff --git a/app/javascript/styles/material-dark/theme/modal.scss b/app/javascript/styles/material-dark/theme/modal.scss
index e9a9176ea..93e5b24c1 100644
--- a/app/javascript/styles/material-dark/theme/modal.scss
+++ b/app/javascript/styles/material-dark/theme/modal.scss
@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;
 
diff --git a/app/javascript/styles/material-light/color/black.scss b/app/javascript/styles/material-light/color/black.scss
index 520330822..693caa813 100644
--- a/app/javascript/styles/material-light/color/black.scss
+++ b/app/javascript/styles/material-light/color/black.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/material-light/color/mastodon-dark.scss b/app/javascript/styles/material-light/color/mastodon-dark.scss
index a098ed86f..b2e6bf27a 100644
--- a/app/javascript/styles/material-light/color/mastodon-dark.scss
+++ b/app/javascript/styles/material-light/color/mastodon-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);
diff --git a/app/javascript/styles/material-light/color/mastodon-light.scss b/app/javascript/styles/material-light/color/mastodon-light.scss
index 18daaf44c..7e94b8de7 100644
--- a/app/javascript/styles/material-light/color/mastodon-light.scss
+++ b/app/javascript/styles/material-light/color/mastodon-light.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;
diff --git a/app/javascript/styles/material-light/color/plus-classic.scss b/app/javascript/styles/material-light/color/plus-classic.scss
index 11e682c37..d94bbe90f 100644
--- a/app/javascript/styles/material-light/color/plus-classic.scss
+++ b/app/javascript/styles/material-light/color/plus-classic.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/material-light/color/v1-dark.scss b/app/javascript/styles/material-light/color/v1-dark.scss
index 7be381ac8..d31fbf04f 100644
--- a/app/javascript/styles/material-light/color/v1-dark.scss
+++ b/app/javascript/styles/material-light/color/v1-dark.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/material-light/color/v1-light.scss b/app/javascript/styles/material-light/color/v1-light.scss
index 9fe2a1b7e..2888e81b4 100644
--- a/app/javascript/styles/material-light/color/v1-light.scss
+++ b/app/javascript/styles/material-light/color/v1-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/material-light/color/v2-dark.scss b/app/javascript/styles/material-light/color/v2-dark.scss
index 9fc57f153..025b238f5 100644
--- a/app/javascript/styles/material-light/color/v2-dark.scss
+++ b/app/javascript/styles/material-light/color/v2-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/material-light/color/v2-light.scss b/app/javascript/styles/material-light/color/v2-light.scss
index e960d60a8..fd9469961 100644
--- a/app/javascript/styles/material-light/color/v2-light.scss
+++ b/app/javascript/styles/material-light/color/v2-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/material-light/layout/material-v1.scss b/app/javascript/styles/material-light/layout/material-v1.scss
index d3a2f4847..23c9a0616 100644
--- a/app/javascript/styles/material-light/layout/material-v1.scss
+++ b/app/javascript/styles/material-light/layout/material-v1.scss
@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
\ No newline at end of file
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/layout/material-v2.scss b/app/javascript/styles/material-light/layout/material-v2.scss
index 7c6b0c968..5700a99c8 100644
--- a/app/javascript/styles/material-light/layout/material-v2.scss
+++ b/app/javascript/styles/material-light/layout/material-v2.scss
@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
\ No newline at end of file
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/loader.scss b/app/javascript/styles/material-light/loader.scss
index e962aa921..1ddf9883f 100644
--- a/app/javascript/styles/material-light/loader.scss
+++ b/app/javascript/styles/material-light/loader.scss
@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 //@import 'plugins/cards';
 //@import 'plugins/dense';
 //@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/plugins/astarte.scss b/app/javascript/styles/material-light/plugins/astarte.scss
new file mode 100644
index 000000000..8c2e534bb
--- /dev/null
+++ b/app/javascript/styles/material-light/plugins/astarte.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/plugins/dense.scss b/app/javascript/styles/material-light/plugins/dense.scss
index a6d861c1a..413336d04 100644
--- a/app/javascript/styles/material-light/plugins/dense.scss
+++ b/app/javascript/styles/material-light/plugins/dense.scss
@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {
diff --git a/app/javascript/styles/material-light/theme/_mixins.scss b/app/javascript/styles/material-light/theme/_mixins.scss
index 3980fbc9b..fcd556f2b 100644
--- a/app/javascript/styles/material-light/theme/_mixins.scss
+++ b/app/javascript/styles/material-light/theme/_mixins.scss
@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;
diff --git a/app/javascript/styles/material-light/theme/account.scss b/app/javascript/styles/material-light/theme/account.scss
index 0765930e6..551b4f4a8 100644
--- a/app/javascript/styles/material-light/theme/account.scss
+++ b/app/javascript/styles/material-light/theme/account.scss
@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;
diff --git a/app/javascript/styles/material-light/theme/button.scss b/app/javascript/styles/material-light/theme/button.scss
index d432bfa1d..5f909d843 100644
--- a/app/javascript/styles/material-light/theme/button.scss
+++ b/app/javascript/styles/material-light/theme/button.scss
@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {
diff --git a/app/javascript/styles/material-light/theme/columns.scss b/app/javascript/styles/material-light/theme/columns.scss
index 6128321f1..77a5c777a 100644
--- a/app/javascript/styles/material-light/theme/columns.scss
+++ b/app/javascript/styles/material-light/theme/columns.scss
@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 
diff --git a/app/javascript/styles/material-light/theme/components.scss b/app/javascript/styles/material-light/theme/components.scss
index 215d9d94d..aa64aabc5 100644
--- a/app/javascript/styles/material-light/theme/components.scss
+++ b/app/javascript/styles/material-light/theme/components.scss
@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
\ No newline at end of file
+}
+
+.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/material-icons.scss b/app/javascript/styles/material-light/theme/material-icons.scss
index c20a3da9c..dd01ce3d6 100644
--- a/app/javascript/styles/material-light/theme/material-icons.scss
+++ b/app/javascript/styles/material-light/theme/material-icons.scss
@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;
diff --git a/app/javascript/styles/material-light/theme/modal.scss b/app/javascript/styles/material-light/theme/modal.scss
index e9a9176ea..93e5b24c1 100644
--- a/app/javascript/styles/material-light/theme/modal.scss
+++ b/app/javascript/styles/material-light/theme/modal.scss
@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;
 
diff --git a/app/javascript/styles/plus/color/black.scss b/app/javascript/styles/plus/color/black.scss
index 520330822..693caa813 100644
--- a/app/javascript/styles/plus/color/black.scss
+++ b/app/javascript/styles/plus/color/black.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #1e1e1e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/plus/color/mastodon-dark.scss b/app/javascript/styles/plus/color/mastodon-dark.scss
index a098ed86f..b2e6bf27a 100644
--- a/app/javascript/styles/plus/color/mastodon-dark.scss
+++ b/app/javascript/styles/plus/color/mastodon-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($primary-color, 18%);
 
 // Border color
 $border-color: #393f4f;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 16%);
diff --git a/app/javascript/styles/plus/color/mastodon-light.scss b/app/javascript/styles/plus/color/mastodon-light.scss
index 18daaf44c..7e94b8de7 100644
--- a/app/javascript/styles/plus/color/mastodon-light.scss
+++ b/app/javascript/styles/plus/color/mastodon-light.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($primary-color, 26%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: #ccd7e0;
diff --git a/app/javascript/styles/plus/color/plus-classic.scss b/app/javascript/styles/plus/color/plus-classic.scss
index 11e682c37..d94bbe90f 100644
--- a/app/javascript/styles/plus/color/plus-classic.scss
+++ b/app/javascript/styles/plus/color/plus-classic.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/plus/color/v1-dark.scss b/app/javascript/styles/plus/color/v1-dark.scss
index 7be381ac8..d31fbf04f 100644
--- a/app/javascript/styles/plus/color/v1-dark.scss
+++ b/app/javascript/styles/plus/color/v1-dark.scss
@@ -102,7 +102,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/plus/color/v1-light.scss b/app/javascript/styles/plus/color/v1-light.scss
index 9fe2a1b7e..2888e81b4 100644
--- a/app/javascript/styles/plus/color/v1-light.scss
+++ b/app/javascript/styles/plus/color/v1-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/plus/color/v2-dark.scss b/app/javascript/styles/plus/color/v2-dark.scss
index 9fc57f153..025b238f5 100644
--- a/app/javascript/styles/plus/color/v2-dark.scss
+++ b/app/javascript/styles/plus/color/v2-dark.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #2e2e2e;
-$border-active-color: lighten($border-color, 30%);
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: lighten($bg-color, 20%);
diff --git a/app/javascript/styles/plus/color/v2-light.scss b/app/javascript/styles/plus/color/v2-light.scss
index e960d60a8..fd9469961 100644
--- a/app/javascript/styles/plus/color/v2-light.scss
+++ b/app/javascript/styles/plus/color/v2-light.scss
@@ -103,7 +103,8 @@ $toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
 
 // Border color
 $border-color: #dadce0;
-$border-active-color: darken($border-color, 30%);
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
 
 // Scroll bar color
 $scroll-bar-thumb-color: darken($bg-color, 20%);
diff --git a/app/javascript/styles/plus/layout/material-v1.scss b/app/javascript/styles/plus/layout/material-v1.scss
index d3a2f4847..23c9a0616 100644
--- a/app/javascript/styles/plus/layout/material-v1.scss
+++ b/app/javascript/styles/plus/layout/material-v1.scss
@@ -52,4 +52,9 @@ $button-shadow: true;  // Material v1 styled colored button with shadow
 
 
 // Floating Action Button size
-$fab-size: 56px;
\ No newline at end of file
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/plus/layout/material-v2.scss b/app/javascript/styles/plus/layout/material-v2.scss
index 7c6b0c968..5700a99c8 100644
--- a/app/javascript/styles/plus/layout/material-v2.scss
+++ b/app/javascript/styles/plus/layout/material-v2.scss
@@ -61,4 +61,10 @@ $button-shadow: false;  // Material v2 styled colored button without shadow
 
 // Floating Action Button size
 $fab-size: 56px;  // Regular
-//$fab-size: 40px;  // Mini
\ No newline at end of file
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/plus/loader.scss b/app/javascript/styles/plus/loader.scss
index 80df5cab0..804d14f3e 100644
--- a/app/javascript/styles/plus/loader.scss
+++ b/app/javascript/styles/plus/loader.scss
@@ -2,6 +2,7 @@
 @import 'theme/material-icons';
 
 // Plugins
+@import 'plugins/astarte';
 @import 'plugins/cards';
 @import 'plugins/dense';
 @import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/astarte.scss b/app/javascript/styles/plus/plugins/astarte.scss
new file mode 100644
index 000000000..8c2e534bb
--- /dev/null
+++ b/app/javascript/styles/plus/plugins/astarte.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/dense.scss b/app/javascript/styles/plus/plugins/dense.scss
index a6d861c1a..413336d04 100644
--- a/app/javascript/styles/plus/plugins/dense.scss
+++ b/app/javascript/styles/plus/plugins/dense.scss
@@ -35,7 +35,14 @@
 }
 
 .compose-form {
-    .compose-form__publish { padding-top: 8px }
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
 }
 
 .status {
diff --git a/app/javascript/styles/plus/theme/_mixins.scss b/app/javascript/styles/plus/theme/_mixins.scss
index 3980fbc9b..fcd556f2b 100644
--- a/app/javascript/styles/plus/theme/_mixins.scss
+++ b/app/javascript/styles/plus/theme/_mixins.scss
@@ -61,6 +61,35 @@ $shadow-color-3: rgba(0,0,0,.12);
     }
 }
 
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
 @mixin icon-button {
     width: 20px !important;
     height: 20px !important;
diff --git a/app/javascript/styles/plus/theme/account.scss b/app/javascript/styles/plus/theme/account.scss
index 0765930e6..551b4f4a8 100644
--- a/app/javascript/styles/plus/theme/account.scss
+++ b/app/javascript/styles/plus/theme/account.scss
@@ -18,7 +18,7 @@
 
         &-overlay {
             &-base {
-                border-radius: 50%;
+                border-radius: $avater-radius;
                 width: 44px;
                 height: 44px;
                 background-size: 44px;
diff --git a/app/javascript/styles/plus/theme/button.scss b/app/javascript/styles/plus/theme/button.scss
index d432bfa1d..5f909d843 100644
--- a/app/javascript/styles/plus/theme/button.scss
+++ b/app/javascript/styles/plus/theme/button.scss
@@ -4,6 +4,7 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
 @include button-shadow;
 
 .icon-button {
diff --git a/app/javascript/styles/plus/theme/columns.scss b/app/javascript/styles/plus/theme/columns.scss
index 6128321f1..77a5c777a 100644
--- a/app/javascript/styles/plus/theme/columns.scss
+++ b/app/javascript/styles/plus/theme/columns.scss
@@ -379,7 +379,7 @@
 
 .announcements {
     background: $card-bg-color;
-    padding: 0;
+    padding: 0 8px;
 
     &__container { color: $primary-text-color }
 
diff --git a/app/javascript/styles/plus/theme/components.scss b/app/javascript/styles/plus/theme/components.scss
index 215d9d94d..aa64aabc5 100644
--- a/app/javascript/styles/plus/theme/components.scss
+++ b/app/javascript/styles/plus/theme/components.scss
@@ -4,6 +4,9 @@
 @import '../custom_color', '../custom_layout';
 @import 'mixins';
 
+
+@include text-area-border;
+
 .modal-root {
     transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
 
@@ -200,7 +203,7 @@
         &__textarea {
             background: $text-field-bg-color;
             color: $ui-text-color;
-            border-radius: $card-radius;
+            padding: 8px 42px 8px 16px;
     
             &::placeholder { color: $tips-text-color }
         }
@@ -227,13 +230,18 @@
     }
 
     .spoiler-input {
-        &.spoiler-input--visible { margin-bottom: 8px }
+        &.spoiler-input--visible { margin-bottom: 16px }
 
         &__input {
             color: $ui-text-color;
             background: $card-bg-color;
             border-bottom: 1px solid $border-color;
             border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
     
             &::placeholder { color: $tips-text-color }
         }
@@ -299,7 +307,7 @@
                 background-color: $bg-color;
                 border: 0;
 
-                &:focus { border-color: $border-active-color }
+                &:focus { border-color: $border-hover-color }
             }
 
             .button.button-secondary {
@@ -357,7 +365,7 @@
         border: 1px solid $border-color;
         padding: 8px 12px;
     
-        &:focus { border-color: $border-active-color }
+        &:focus { border-color: $border-hover-color }
     }
 
     &__option {
@@ -634,4 +642,6 @@
         border-radius: 0;
         background: $progress-indicator-color;
     }
-}
\ No newline at end of file
+}
+
+.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/material-icons.scss b/app/javascript/styles/plus/theme/material-icons.scss
index c20a3da9c..dd01ce3d6 100644
--- a/app/javascript/styles/plus/theme/material-icons.scss
+++ b/app/javascript/styles/plus/theme/material-icons.scss
@@ -243,6 +243,9 @@ button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
 // read more icon
 .status__content__read-more-button .fa { vertical-align: bottom }
 
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
 // status detail icon
 .detailed-status .fa {
     font-size: 16px;
diff --git a/app/javascript/styles/plus/theme/modal.scss b/app/javascript/styles/plus/theme/modal.scss
index e9a9176ea..93e5b24c1 100644
--- a/app/javascript/styles/plus/theme/modal.scss
+++ b/app/javascript/styles/plus/theme/modal.scss
@@ -42,6 +42,7 @@
 }
 
 .actions-modal {
+    @include shadow-24dp;
     background: $card-bg-color;
     border-radius: $card-radius;
 
diff --git a/app/javascript/styles/y-zu-dark.scss b/app/javascript/styles/y-zu-dark.scss
new file mode 100644
index 000000000..90bfe0053
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'y-zu-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/black.scss b/app/javascript/styles/y-zu-dark/color/black.scss
new file mode 100644
index 000000000..693caa813
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/color/black.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #000000;
+$menu-bg-color: #121212;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #121212;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #000000;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: #ffffff;
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: darken($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-bg-color: #121212;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/mastodon-dark.scss b/app/javascript/styles/y-zu-dark/color/mastodon-dark.scss
new file mode 100644
index 000000000..b2e6bf27a
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/color/mastodon-dark.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9baec8;
+$ui-text-color: #fff;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #606984;
+$tips-text-color: #6d7889;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4ea2df;
+$menu-text-color: #282c37;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #191b22;
+$menu-bg-color: #d9e1e8;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #313543;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #282c37;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #42485a;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-bg-hover-color: lighten($bg-color, 14%);
+$icon-bg-active-color: lighten($bg-color, 18%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #fff;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.7);
+$text-button-focus-color: transparentize($text-button-color, 0.6);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
+$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
+
+// App bar color
+$top-bar-color: #313543;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: #d9e1e8;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: #1f232b;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-bg-color: $tab-bg-color;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/mastodon-light.scss b/app/javascript/styles/y-zu-dark/color/mastodon-light.scss
new file mode 100644
index 000000000..7e94b8de7
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/color/mastodon-light.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #217aba;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #eff3f5;
+$menu-bg-color: $bg-color;
+$menu-bg-hover-color: darken($bg-color, 6%);
+$menu-bg-active-color: darken($bg-color, 10%);
+$menu-bg-active-hover-color: darken($bg-color, 16%);
+$card-bg-color: #ffffff;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: #ffffff;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: darken($bg-color, 4%);
+$icon-bg-active-color: darken($bg-color, 8%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: lighten($text-button-color, 36%);
+$text-button-focus-color: lighten($text-button-color, 30%);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: #ccd7e0;
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #ffffff;
+$search-bar-color: #d9e1e8;
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: #e6ebf0;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-bg-color: $tab-bg-color;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/plus-classic.scss b/app/javascript/styles/y-zu-dark/color/plus-classic.scss
new file mode 100644
index 000000000..d94bbe90f
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/color/plus-classic.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #fafafa;
+$menu-bg-color: #ffffff;
+$menu-bg-hover-color: darken($menu-bg-color, 6%);
+$menu-bg-active-color: darken($menu-bg-color, 10%);
+$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
+$card-bg-color: #ffffff;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: #ffffff;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: transparentize(#000000, 0.9);
+$icon-bg-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($bg-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($bg-color, 6%);
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-bg-color: #ffffff;
+$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/v1-dark.scss b/app/javascript/styles/y-zu-dark/color/v1-dark.scss
new file mode 100644
index 000000000..d31fbf04f
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/color/v1-dark.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #303030;
+$menu-bg-color: #424242;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #424242;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #424242;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: #ffffff;
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: darken($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
+$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($bg-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-bg-color: #424242;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/v1-light.scss b/app/javascript/styles/y-zu-dark/color/v1-light.scss
new file mode 100644
index 000000000..2888e81b4
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/color/v1-light.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #fafafa;
+$menu-bg-color: #ffffff;
+$menu-bg-hover-color: darken($menu-bg-color, 6%);
+$menu-bg-active-color: darken($menu-bg-color, 10%);
+$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
+$card-bg-color: #ffffff;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: #ffffff;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: transparentize(#000000, 0.9);
+$icon-bg-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($bg-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: darken($bg-color, 6%);
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-bg-color: #ffffff;
+$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/v2-dark.scss b/app/javascript/styles/y-zu-dark/color/v2-dark.scss
new file mode 100644
index 000000000..025b238f5
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/color/v2-dark.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #121212;
+$menu-bg-color: #1e1e1e;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #1e1e1e;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #1e1e1e;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: #ffffff;
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: darken($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #272727;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-bg-color: #1e1e1e;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/color/v2-light.scss b/app/javascript/styles/y-zu-dark/color/v2-light.scss
new file mode 100644
index 000000000..fd9469961
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/color/v2-light.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #ffffff;
+$menu-bg-color: $bg-color;
+$menu-bg-hover-color: darken($menu-bg-color, 6%);
+$menu-bg-active-color: darken($menu-bg-color, 10%);
+$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
+$card-bg-color: $bg-color;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: $bg-color;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: transparentize(#000000, 0.9);
+$icon-bg-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: #ffffff;
+$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
+$floating-action-button-active-color: darken($floating-action-button-color, 10%);
+$floating-action-button-icon-color: $primary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($bg-color, 20%);
+$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
+$scroll-bar-thumb-active-color: darken($bg-color, 38%);
+
+// App bar color
+$top-bar-color: $bg-color;
+$search-bar-color: darken($bg-color, 6%);
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-bg-color: #ffffff;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/custom_color.scss b/app/javascript/styles/y-zu-dark/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/custom_config.scss b/app/javascript/styles/y-zu-dark/custom_config.scss
new file mode 100644
index 000000000..e974e139c
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/custom_config.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+
+@import "color/v2-dark.scss";
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/custom_layout.scss b/app/javascript/styles/y-zu-dark/custom_layout.scss
new file mode 100644
index 000000000..fb9dbbe00
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/custom_layout.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+
+// Add your customization below
+
+$avater-radius: 2px;
+
+$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/icon_config.scss b/app/javascript/styles/y-zu-dark/icon_config.scss
new file mode 100644
index 000000000..99046e176
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/icon_config.scss
@@ -0,0 +1,28 @@
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
+
+$favorite-icon-color: #ffd600;  // Star
+//$favorite-icon-color: #ff4081;  // Heart
+//$favorite-icon-color: #db4437;  // +1
+//$favorite-icon-color: #ffffff;  // inverted +1 (for plus plugin)
+
+
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment";  // blooming
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+//$icon-font-source: google;  // Google Fonts
+//$icon-font-source: github;  // GitHub
+$icon-font-source: self;  // Self-hosting
+
+// Material Icon style settings
+$icon-font-style: filled;
+//$icon-font-style: outlined;
+//$icon-font-style: round;
+//$icon-font-style: sharp;
+//$icon-font-style: two-tone;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/layout/material-v1.scss b/app/javascript/styles/y-zu-dark/layout/material-v1.scss
new file mode 100644
index 000000000..23c9a0616
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/layout/material-v1.scss
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// Button radius settings
+$button-radius: 2px;
+
+
+// Card radius settings
+$card-radius: 2px;
+
+
+// Dialog radius settings
+$dialog-radius: 2px;
+
+
+// Menu radius settings
+$menu-radius: 2px;
+
+
+// Media radius settings
+$media-radius: 0;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 0;
+
+
+// Avater cropping settings
+$avater-radius: 50%;  // Rounded cropping
+//$avater-radius: 2px  // Material v1 square
+
+
+// Chip settings
+$outlined-chip: false;  // Material v1 styled contained chip
+
+
+// Button shadow
+$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/layout/material-v2.scss b/app/javascript/styles/y-zu-dark/layout/material-v2.scss
new file mode 100644
index 000000000..5700a99c8
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/layout/material-v2.scss
@@ -0,0 +1,70 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+//$nav-bar-radius: 28px;  // full radius
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+//$search-bar-radius: 21px;  // full rounded
+
+
+// Bar radius settings
+$bar-radius: 0;
+//$bar-radius: 8px;
+
+
+// Button radius settings
+$button-radius: 8px;
+
+
+// Card radius settings
+$card-radius: 8px;
+
+
+// Dialog radius settings
+$dialog-radius: 8px;
+
+
+// Menu radius settings
+$menu-radius: 8px;
+
+
+// Media radius settings
+$media-radius: 0;
+//$media-radius: 2px;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 8px;  // corner rounded
+//$nav-drawer-item-radius: 32px;  // full rounded
+//$nav-drawer-item-radius: 32px 0 0 32px;  // left rounded
+
+
+// Avater cropping settings
+$avater-radius: 50%;  // Rounded cropping
+//$avater-radius: 8px  // Material v2 square
+
+
+// Chip settings
+$outlined-chip: true;  // Material v2 styled outlined chip
+//$outlined-chip: false;  // Material v1 styled contained chip
+
+
+// Button shadow
+$button-shadow: false;  // Material v2 styled colored button without shadow
+//$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;  // Regular
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/loader.scss b/app/javascript/styles/y-zu-dark/loader.scss
new file mode 100644
index 000000000..f51dde3e4
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/loader.scss
@@ -0,0 +1,8 @@
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+@import 'plugins/astarte';
+//@import 'plugins/cards';
+@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/plugins/astarte.scss b/app/javascript/styles/y-zu-dark/plugins/astarte.scss
new file mode 100644
index 000000000..8c2e534bb
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/plugins/astarte.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/plugins/cards.scss b/app/javascript/styles/y-zu-dark/plugins/cards.scss
new file mode 100644
index 000000000..d9b3906a5
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+
+    > .scrollable { background: $bg-color }
+}
+
+.status {
+    border-bottom: 0;
+    border-radius: $card-radius;
+    background: $card-bg-color;
+
+    &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+    border-radius: $card-radius;
+    background: $card-bg-color;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/plugins/dense.scss b/app/javascript/styles/y-zu-dark/plugins/dense.scss
new file mode 100644
index 000000000..413336d04
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/plugins/dense.scss
@@ -0,0 +1,87 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+    &__header { height: 48px }
+
+    &__tab { margin: 6px auto 6px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+    height: 48px;
+
+    > button { padding: 12px 16px }
+    
+    &__buttons { height: 48px }
+
+    &__button { margin: 6px }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+    padding: 12px 16px;
+
+    p { margin-bottom: 12px }
+}
+
+.compose-form {
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
+}
+
+.status {
+    padding: 8px 8px 4px 66px;
+
+    &__expand { width: 66px }
+
+    &__info { padding-right: 0 }
+
+    &__avatar {
+        left: 8px;
+        top: 10px;
+    }
+
+    &__content { padding-top: 2px }
+
+    &__action-bar-button {
+        margin: 0 4px;
+
+        &.icon-button { padding: 4px }
+    }
+
+    &__action-bar-dropdown {
+        width: 28px !important;
+        height: 28px !important;
+        margin: 0 4px;
+
+        .icon-button { padding: 4px }
+    }
+}
+
+.detailed-status {
+    padding: 14px;
+
+    &__meta { margin-top: 14px }
+
+    &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/plugins/plus.scss b/app/javascript/styles/y-zu-dark/plugins/plus.scss
new file mode 100644
index 000000000..e356e937b
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/plugins/plus.scss
@@ -0,0 +1,36 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+    background: #eeeeee;
+    width: 28px !important;
+    height: 28px !important;
+
+    .fa { vertical-align: bottom }
+}
+
+// exception
+.media-modal__overlay .picture-in-picture__footer .icon-button,
+.status__action-bar-button.icon-button--with-counter { background: transparent }
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.activate,
+.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+    left: -34px;
+
+    .star-icon {
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        vertical-align: baseline;
+        font-size: 18px;
+
+        &.fa-fw::before { vertical-align: middle }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/_functions.scss b/app/javascript/styles/y-zu-dark/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/_mixins.scss b/app/javascript/styles/y-zu-dark/theme/_mixins.scss
new file mode 100644
index 000000000..fcd556f2b
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/_mixins.scss
@@ -0,0 +1,228 @@
+@charset "UTF-8";
+
+
+$shadow-color-1: rgba(0,0,0,.2);
+$shadow-color-2: rgba(0,0,0,.14);
+$shadow-color-3: rgba(0,0,0,.12);
+
+@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
+@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
+@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
+@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
+@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
+@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
+@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
+@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
+@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
+@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
+@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
+@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
+@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
+@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
+@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
+@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
+@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
+@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
+@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
+@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
+@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
+@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
+@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
+@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
+
+@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
+
+@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
+
+@mixin search-bar-hover {
+    @if $search-bar-hover {
+        @include shadow-2dp;
+        background: $search-bar-focus-color;
+    }
+}
+
+@mixin outlined-chip {
+    @if $outlined-chip {
+        .reactions-bar__item {
+            background: $outlined-chip-color !important;
+            border: 1px solid $outlined-chip-selected-border-color !important;
+        
+            &.active { background-color: $outlined-chip-selected-color !important }
+        
+            &:hover { background: $outlined-chip-hover-color !important }
+        }
+    }
+}
+
+@mixin button-shadow {
+    @if $button-shadow {
+        .button,
+        .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
+    }
+}
+
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
+@mixin icon-button {
+    width: 20px !important;
+    height: 20px !important;
+    font-size: 20px !important;
+}
+
+// check background-image value
+@mixin bg-image {
+    @if $bg-image == none {        
+    } @else { background-image: url($bg-image) }
+}
+
+
+@mixin icon-font-style {
+    @if $icon-font-style == filled { font-family: "Material Icons" }
+    @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
+    @if $icon-font-style == round { font-family: "Material Icons Round" }
+    @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
+    @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
+}
+
+@mixin icon-font {
+    @if $icon-font-source == github {
+        @if $icon-font-style == filled {
+            @font-face {
+                font-family: "Material Icons";
+                src: local("Material Icons"),
+                     url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
+            }
+        }
+        @if $icon-font-style == outlined {
+            @font-face {
+                font-family: "Material Icons Outlined";
+                src: local("Material Icons Outlined"),
+                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == round {
+            @font-face {
+                font-family: "Material Icons Round";
+                src: local("Material Icons Round"),
+                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == sharp {
+            @font-face {
+                font-family: "Material Icons Sharp";
+                src: local("Material Icons Sharp"),
+                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == two-tone {
+            @font-face {
+                font-family: "Material Icons Two Tone";
+                src: local("Material Icons Two Tone"),
+                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
+            }
+        }
+    }
+
+    @if $icon-font-source == google {
+        @if $icon-font-style == filled {
+            @font-face {
+                font-family: "Material Icons";
+                src: local("Material Icons"),
+                     url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
+            }
+        }
+        @if $icon-font-style == outlined {
+            @font-face {
+                font-family: "Material Icons Outlined";
+                src: local("Material Icons Outlined"),
+                     url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
+            }
+        }
+        @if $icon-font-style == round {
+            @font-face {
+                font-family: "Material Icons Round";
+                src: local("Material Icons Round"),
+                     url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
+            }
+        }
+        @if $icon-font-style == sharp {
+            @font-face {
+                font-family: "Material Icons Sharp";
+                src: local("Material Icons Sharp"),
+                     url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
+            }
+        }
+        @if $icon-font-style == two-tone {
+            @font-face {
+                font-family: "Material Icons Two Tone";
+                src: local("Material Icons Two Tone"),
+                     url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
+            }
+        }
+    }
+
+    @if $icon-font-source == self {
+        @if $icon-font-style == filled {
+            @font-face {
+                font-family: "Material Icons";
+                src: local("Material Icons"),
+                     url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
+            }
+        }
+        @if $icon-font-style == outlined {
+            @font-face {
+                font-family: "Material Icons Outlined";
+                src: local("Material Icons Outlined"),
+                     url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == round {
+            @font-face {
+                font-family: "Material Icons Round";
+                src: local("Material Icons"),
+                     url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == sharp {
+            @font-face {
+                font-family: "Material Icons Sharp";
+                src: local("Material Icons Sharp"),
+                     url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == two-tone {
+            @font-face {
+                font-family: "Material Icons Two Tone";
+                src: local("Material Icons Two Tone"),
+                     url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/account.scss b/app/javascript/styles/y-zu-dark/theme/account.scss
new file mode 100644
index 000000000..551b4f4a8
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/account.scss
@@ -0,0 +1,196 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+    padding: 16px;
+
+    .account__display-name,
+    .account__display-name strong { color: $primary-text-color }
+
+    &__avatar {
+        border-radius: $avater-radius;
+        width: 40px;
+        height: 40px;
+
+        &-overlay {
+            &-base {
+                border-radius: $avater-radius;
+                width: 44px;
+                height: 44px;
+                background-size: 44px;
+            }
+
+            &-overlay { border-radius: $avater-radius }
+        }
+    }
+
+    &__avatar-wrapper {
+        margin-left: 0;
+        margin-right: 16px;
+    }
+
+    &__header {
+        &__bar {
+            background: $card-bg-color;
+            padding: 8px;
+            border-bottom: none;
+
+            .avatar .account__avatar { border: none }
+        }
+
+        &__tabs {
+            padding: 8px;
+
+            &__name {
+                padding: 8px;
+
+                h1 {
+                    color: $primary-text-color;
+
+                    small { color: $secondary-text-color }
+                }
+            }
+
+            &__buttons {
+                .icon-button {
+                    @include icon-button;
+                    border: none;
+                    border-radius: 50%;
+                    padding: 8px;
+                    margin-left: 8px;
+                }
+            }
+        }
+
+        &__extra {
+            margin-top: 0;
+
+            &__links {
+                color: $secondary-text-color;
+                padding: 10px 0;
+
+                a {
+                    color: $secondary-text-color;
+                    padding: 4px 12px;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &__bio {
+            margin: 0;
+
+            .account__header {
+                &__content {
+                    color: $primary-text-color;
+                    padding: 8px;
+                }
+
+                &__fields {
+                    border: 1px solid $border-color;
+                    border-radius: 4px;
+
+                    .verified {
+                        border: none;
+                        background: $verified-bg-color;
+
+                        a,
+                        &__mark { color: $primary-text-color }
+                    }
+
+                    dl {
+                        border-bottom: 1px solid $border-color;
+
+                        &:first-child .verified { border-radius: 0 }
+
+                        &:last-child { border-bottom: 0 }
+                    }
+
+                    dt {
+                        color: $primary-text-color;
+                        background: $list-bg-inactive-color;
+                    }
+
+                    dd { color: $primary-text-color }
+                }
+            }
+        }
+
+        &__account-note {
+            padding: 8px 16px;
+            border-bottom: 1px solid $border-color;
+
+            label {
+                color: $ui-text-color;
+                margin-bottom: 8px;
+            }
+
+            textarea {
+                color: $primary-text-color;
+                padding: 8px 16px;
+                border-radius: 0;
+
+                &:focus { background: transparent }
+
+                &::placeholder { color: $tips-text-color }
+            }
+        }
+
+        &__content { color: $secondary-text-color }
+    }
+
+    &__section-headline {
+        background: $text-tab-bg-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $text-tab-indicator-color;
+
+            &.active {
+                color: $text-tab-indicator-active-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
+
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $text-tab-indicator-bg-focus-color }
+            }
+
+            &:hover { background: $text-tab-indicator-bg-hover-color }
+        }
+    }
+
+    &__relationship {
+        padding: 0;
+        height: auto;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
+}
+
+.account-gallery {
+    &__item { border-radius: 0 }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/base_config.scss b/app/javascript/styles/y-zu-dark/theme/base_config.scss
new file mode 100644
index 000000000..f36a139ba
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/base_config.scss
@@ -0,0 +1,46 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+$search-bar-hover: false;
+
+
+// Status font size in timeline
+$status-font-size: 15px;  // mastodon default
+//$status-font-size: 16px;  // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px;  // mastodon default
+//$name-font-size: 16px;  // compatible with material design
+
+
+// Background image
+// If you want to use the local image, please put it in "../"
+$bg-image: none;
+//$bg-image: "./image.png";
+//$bg-image: "https://example.com/img/image.png";
+
+
+// Columns transparency settings
+$bar-transparency: 1.0;  // opacity
+//$bar-transparency: 0.8;  // semi-transparent
+
+$column-transparency: 1.0;  // opacity
+//$column-transparency: 0.8;  // semi-transparent
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/basics.scss b/app/javascript/styles/y-zu-dark/theme/basics.scss
new file mode 100644
index 000000000..bb8f68bf0
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/basics.scss
@@ -0,0 +1,27 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+body,
+body.embed { background: $bg-color }
+
+.focusable:focus { background: transparent }
+
+// Chrome & Safari scroll bar
+::-webkit-scrollbar-thumb {
+    background: $scroll-bar-thumb-color;
+
+    &:hover { background: $scroll-bar-thumb-hover-color }
+    &:active { background: $scroll-bar-thumb-active-color }
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track:hover,
+::-webkit-scrollbar-track:active {
+    background: transparent !important;
+}
+
+// Firefox scroll bar
+html { scrollbar-color: $scroll-bar-thumb-color transparent }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/button.scss b/app/javascript/styles/y-zu-dark/theme/button.scss
new file mode 100644
index 000000000..5f909d843
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/button.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+@include button-shadow;
+
+.icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+
+    &.active {
+        color: $icon-button-active-color;
+
+        &:hover { color: $icon-button-active-hover-color }
+    }
+
+    &.disabled { color: $disabled-icon-color }
+
+    &.inverted {
+        color: $icon-button-color;
+
+        &.active { color: $icon-button-active-color }
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background-color: $icon-bg-hover-color;
+        }
+
+        &:focus { background-color: transparent }
+    }
+
+    &.overlayed {
+        @include icon-button;
+        border-radius: 50%;
+        background: $media-icon-bg-color;
+        color: $media-icon-color;
+        padding: 4px;
+        line-height: 20px !important;
+    
+        &:hover {
+            background: $media-icon-bg-color;
+            color: $media-icon-hover-color;
+        }
+    }
+
+    &__counter {
+        width: 16px;
+        margin-left: 8px;
+    }
+
+    &:hover {
+        @include material-transition;
+        color: $icon-button-hover-color;
+        background-color: $icon-bg-hover-color;
+    }
+
+    &:focus { background-color: transparent }
+}
+
+// Checkbox with label
+label.icon-button {
+    &.active {
+        color: $ui-text-color;
+        background-color: transparent;
+    }
+
+    &:hover {
+        @include material-transition;
+        background-color: transparent;
+    }
+}
+
+.text-icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+    font-size: 14px;
+
+    &.active {
+        background-color: $icon-bg-hover-color;
+        color: $icon-button-active-color;
+    }
+
+    &:hover {
+        background-color: $icon-bg-hover-color;
+        color: $icon-button-hover-color;
+    }
+}
+
+.button {
+    background-color: $contained-button-color;
+    border-radius: $button-radius;
+
+    &:active,
+    &:focus {
+        background-color: $contained-button-color;
+        border-radius: $button-radius;
+    }
+
+    &:hover {
+        @include shadow-2dp;
+        background-color: $contained-button-hover-color;
+    }
+
+    &.logo-button {
+        background: $contained-button-color;
+        margin: 2px;
+    
+        &:hover { background: $contained-button-hover-color }
+    
+        .button--destructive:hover { background: $contained-button-hover-color }
+    }
+
+    &.button--block { margin: 8px 0 }
+
+    &.button-secondary {
+        color: $text-button-color;
+        border: none;
+        box-shadow: none;
+    
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+    }
+
+    &.confirmation-modal__cancel-button {
+        box-shadow: none;
+        background-color: transparent;
+        margin: 0 8px;
+        color: $text-button-color;
+    
+        &:hover { background: $text-button-hover-color }
+    
+        &:focus { background: $text-button-focus-color }
+    }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-bg-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/columns.scss b/app/javascript/styles/y-zu-dark/theme/columns.scss
new file mode 100644
index 000000000..77a5c777a
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/columns.scss
@@ -0,0 +1,511 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable {
+        background: $list-bg-color;
+        opacity: $column-transparency;
+    }
+
+    &:last-child { box-shadow: none }
+}
+
+.column-header {
+    background: $top-bar-color;
+    border-radius: $bar-radius;
+    height: 56px;
+
+    > button {
+        padding: 16px;
+        color: $top-bar-text-color;
+    }
+
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
+    &.active {
+        .column-header__icon {
+            color: $top-bar-unread-icon-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        @include icon-button;
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        padding: 8px;
+        margin: 10px;
+        border-radius: 50%;
+        box-sizing: content-box;
+
+        &.active {
+            color: $top-bar-icon-active-color;
+            background: $icon-bg-active-color;
+
+            &:hover {
+                color: $top-bar-icon-hover-color;
+                background: $icon-bg-hover-color;
+            }
+        }
+
+        &:hover {
+            color: $top-bar-icon-hover-color;
+            background: $icon-bg-hover-color;
+        }
+    }
+
+    &__setting-btn {
+        color: $icon-button-color;
+        padding: 8px 0;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            text-decoration: none;
+        }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
+    }
+
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+        opacity: $bar-transparency;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &::before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        background: $card-bg-color;
+        border-top: 1px solid $border-color;
+
+        &-inner {
+            background: $card-bg-color;
+            padding: 16px;
+        }
+
+        &.collapsed { border-top: none }
+    }
+
+    &__back-button {
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        margin: 8px 10px;
+        padding: 10px;
+        font-size: 20px;
+
+        span { display: none }
+    }
+}
+
+.column-subheading {
+    color: $section-text-color;
+    background: $bg-color;
+    padding: 12px 16px;
+    margin-top: 8px;
+    border-top: 1px solid $border-color;
+}
+
+.column-link {
+    color: $ui-text-color;
+    background: $bg-color;
+    padding: 16px;
+    border-radius: $nav-drawer-item-radius;
+
+    &:hover { background: $list-bg-hover-color }
+
+    &:active,
+    &:focus { background: $list-bg-active-color }
+
+    &__icon {
+        margin-right: 32px;
+        font-size: 20px;
+    }
+
+    &--transparent {
+        &.active {
+            color: $ui-text-color;
+            background: $menu-bg-active-color;
+
+            &:hover { background: $menu-bg-active-hover-color }
+    
+            .fa { color: $icon-color }
+        }
+
+        &:hover {
+            color: $ui-text-color;
+
+            .fa { color: $icon-color }
+        }
+    }
+
+    .fa { color: $icon-color }
+}
+
+.column-settings {
+    &__section {
+        color: $section-text-color;
+        margin-bottom: 0;
+        margin-top: 8px;
+    }
+
+    &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
+
+    &--slim-button { top: -54px }
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-bg-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.columns-area {
+    @include bg-image;
+    background-size: contain;
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $text-field-bg-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-color }
+}
+
+.empty-column-indicator {
+    color: $secondary-text-color;
+    background: $card-bg-color;
+    font-size: 16px;
+    contain: initial;  // padding fix
+}
+
+.conversation {
+    border-bottom: 1px solid $border-color;
+    padding: 12px;
+    background: $list-bg-inactive-color;
+
+    &--unread {
+        background: $list-bg-color;
+
+        .conversation__content__relative-time { color: $info-text-color }
+    }
+
+    &__unread { background: $primary-color }
+
+    &__avatar { padding: 0 16px 0 0 }
+
+    &__content {
+        padding: 0;
+
+        &__relative-time {
+            font-size: 14px;
+            color: $info-text-color;
+        }
+
+        &__names,
+        &__names a {
+            color: $primary-text-color;
+            font-size: 16px;
+        }
+    }
+}
+
+// read status in notification column
+.muted {
+    .status {
+        &__content {
+            color: $read-primary-text-color;
+    
+            p { color: $read-primary-text-color }
+    
+            a { color: $read-secondary-text-color }
+        }
+
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-bg-hover-color }
+}
+
+.getting-started {
+    background: $bg-color;
+    color: $ui-text-color;
+    opacity: $column-transparency;
+
+    &__wrapper {
+        background: $bg-color;
+        height: auto !important;
+        padding-bottom: 8px;
+        border-bottom: 1px solid $border-color;
+    }
+
+    &__footer {
+        padding: 16px;
+        
+        p {
+            color: $secondary-text-color;
+            font-size: 12px;
+            margin-bottom: 16px;
+        }
+
+        a { color: $ui-text-color }
+
+        p a { color: $link-text-color }
+    }
+
+    &__trends {
+        background: $bg-color;
+        margin-bottom: 0;
+        opacity: $column-transparency;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            margin-top: 8px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends {
+    &__header {
+        color: $section-text-color;
+        background: transparent;
+        border-bottom: 1px solid $border-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__item {
+        padding: 16px;
+        border-bottom: none;
+    
+        &__name {
+            color: $secondary-text-color;
+            font-size: 12px;
+    
+            a { color: $primary-text-color }
+        }
+    
+        &__current {
+            padding-right: 16px;
+            margin-left: 4px;
+            color: $secondary-text-color;
+        }
+    
+        &__sparkline path {
+            stroke: $primary-color;
+            fill: $primary-color;
+            fill-opacity: 0.5;
+        }
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-bg-color;
+    padding: 0 8px;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+
+    &__pagination {
+        color: $ui-text-color;
+        padding: 16px;
+        bottom: 0;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            margin: 0 4px;
+            line-height: normal !important;
+            box-sizing: content-box;
+        }
+
+        span { vertical-align: super }
+    }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+@include outlined-chip;
+
+.reactions-bar {
+    margin-top: 16px;
+    width: calc(100% - 72px);
+
+    .emoji-button {
+        color: $icon-button-color;
+        font-size: 20px;
+
+        &:hover { color: $icon-button-hover-color }
+
+        &:active { color: $icon-button-active-color }
+    }
+
+    &__item {
+        background: $contained-chip-color;
+        border-radius: 17px;
+        margin: 2px 4px;
+
+        &.active {
+            background-color: $contained-chip-selected-color;
+
+            .reactions-bar__item__count { color: $chip-selected-text-color }
+
+            &:hover { background-color: $contained-chip-selected-color }
+        }
+
+        &__emoji {
+            width: 24px;
+            height: 24px;
+            margin: 4px 0 4px 2px;
+        }
+
+        &__count {
+            font-size: 16px;
+            margin: 0 12px 0 8px;
+            color: $secondary-text-color;
+        }
+
+        &:hover { background: $contained-chip-hover-color }
+    }
+}
+
+.notification {
+    &__filter-bar {
+        background: $tab-bg-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+        opacity: $bar-transparency;
+    
+        button {
+            background: $tab-bg-color;
+            color: $tab-indicator-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-active-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
+    
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-bg-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-bg-hover-color }
+        }
+    }
+
+    &__message {
+        color: $secondary-text-color;
+        margin: 0 16px 0 70px;
+        font-size: 16px;
+    }
+
+    &__display-name:hover { color: inherit }
+}
+
+.notification-favourite .status.status-direct {
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $relationship-tag-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
+
+// unread notification
+.notification.unread:before, .status__wrapper.unread:before { border-left: none }
+
+.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/components.scss b/app/javascript/styles/y-zu-dark/theme/components.scss
new file mode 100644
index 000000000..aa64aabc5
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/components.scss
@@ -0,0 +1,647 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+@include text-area-border;
+
+.modal-root {
+    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+
+    &__overlay { background-color: rgba(0,0,0,.32) !important }
+
+    &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
+}
+
+.drawer {
+    &__header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        justify-content: space-around;
+        opacity: $bar-transparency;
+    
+        a { transition: none }
+    
+        a:hover {
+            background: $icon-bg-hover-color;
+            border-radius: 50%;
+        }
+    }
+
+    &__tab {
+        color: $top-bar-icon-color;
+        font-size: 20px;
+        margin: 10px auto 10px;
+        padding: 8px;
+        flex: none;
+        height: 20px;
+        width: 20px;
+        border-bottom: none;
+        text-align: justify;
+    
+        &:hover { color: $top-bar-icon-hover-color }
+    }
+
+    &__pager {
+        @include shadow-1dp;
+        border-radius: $card-radius;
+    }
+
+    &__inner {
+        background: $card-bg-color;
+        opacity: $column-transparency;
+
+        &.darker {
+            background: $card-bg-color;
+            position: inherit;
+        }
+
+        &__mastodon { background: $card-bg-color }
+    }
+}
+
+.search {
+    &__input {
+        background: $search-bar-color;
+        color: $tips-text-color;
+        border-radius: $search-bar-radius;
+        padding: 12px 12px 12px 40px;
+        opacity: $bar-transparency;
+
+        &:focus {
+            @include shadow-2dp;
+            background: $search-bar-focus-color;
+            color: $search-bar-text-color;
+        }
+
+        &:hover { @include search-bar-hover }
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    &__icon {
+        .fa {
+            color: $icon-color;
+            font-size: 20px;
+            top: 12px;
+            right: unset;
+            left: 12px;
+            height: 6px;
+            transition: none;
+
+            &.active { opacity: 1 }
+
+            &-search {
+                transform: none;
+                opacity: 1;
+            }
+            &-times-circle.active {
+                right: 16px;
+                left: unset;
+                transform: none;
+            }
+        }
+    }
+}
+
+.search-popout {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+    border-radius: 0px $bar-radius;
+    border-top: 1px solid $border-color;
+    margin-top: 0;
+    color: $tips-text-color;
+
+    h4 {
+        color: $secondary-text-color;
+    }
+
+    em {
+        color: $search-bar-text-color;
+    }
+}
+
+.search-results {
+    &__header {
+        color: $secondary-text-color;
+        background-color: $card-bg-color;
+        padding: 16px;
+
+        .fa { margin-right: 16px }
+    }
+
+    &__section {
+        h5 {
+            background: $card-bg-color;
+            border-bottom: 1px solid $border-color;
+            padding: 16px;
+            color: $section-text-color;
+
+            .fa { margin-right: 8px }
+        }
+    }
+}
+
+.navigation-bar {
+    color: $secondary-text-color;
+    padding: 14px;
+
+    strong {
+        color: $ui-text-color;
+    }
+
+    .navigation-bar__actions .compose__action-bar .icon-button {
+        width: 36px !important;
+        height: 36px !important;
+        padding: 8px;
+
+        &.active {
+            color: $icon-hover-color;
+            background: $icon-bg-active-color;
+        }
+    }
+}
+
+.navigation-panel hr {
+    border-top: 1px solid $border-color;
+    margin: 8px 0;
+}
+
+.flex-spacer { margin: 8px 0 }
+
+.dropdown-menu {
+    @include shadow-8dp;
+    background: $menu-bg-color;
+    padding: 8px 0;
+    border-radius: $menu-radius;
+
+    &__arrow { visibility: hidden }
+
+    &__item a {
+        font-size: 14px;
+        padding: 8px 16px;
+        background: $menu-bg-color;
+        color: $menu-text-color;
+
+        &:hover, &:active {
+            background: $menu-bg-hover-color;
+            color: $menu-text-color;
+        }
+    }
+
+    &__separator {
+        margin: 8px 0;
+        border-bottom: 1px solid $border-color;
+    }
+}
+
+.compose-form {
+    .autosuggest-textarea {
+        &__textarea {
+            background: $text-field-bg-color;
+            color: $ui-text-color;
+            padding: 8px 42px 8px 16px;
+    
+            &::placeholder { color: $tips-text-color }
+        }
+
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-bg-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-bg-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-bg-active-color }
+            }
+        }
+    }
+
+    .spoiler-input {
+        &.spoiler-input--visible { margin-bottom: 16px }
+
+        &__input {
+            color: $ui-text-color;
+            background: $card-bg-color;
+            border-bottom: 1px solid $border-color;
+            border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+    
+            &::placeholder { color: $tips-text-color }
+        }
+    }
+
+    .compose-form {
+        &__warning {
+            color: $secondary-text-color;
+            background: $card-bg-color;
+            padding: 16px;
+            border: 1px solid $border-color;
+            border-radius: $card-radius;
+            box-shadow: none;
+
+            a { color: $link-text-color }
+        }
+
+        &__modifiers {
+            background: $card-bg-color;
+            color: $tips-text-color;
+
+            .compose-form {
+                &__upload-thumbnail { border-radius: 0 }
+
+                &__upload__actions {
+                    @include material-transition;
+
+                    .icon-button {
+                        color: $media-icon-color;
+                        font-size: 16px;
+
+                        &:hover { background-color: transparent }
+                    }
+                }
+            }
+        }
+
+        &__buttons-wrapper {
+            background: $card-bg-color;
+            color: $tips-text-color;
+            padding: 8px;
+
+            .icon-button {
+                @include icon-button;
+                padding: 8px;
+            }
+
+            .text-icon-button {
+                width: 20px !important;
+                height: 20px !important;
+                padding: 8px;
+                line-height: 20px !important;
+            }
+        }
+
+        &__poll-wrapper {
+            border-top: 1px solid $border-color;
+
+            ul { padding: 16px 12px 16px 0 }
+
+            select {
+                color: $ui-text-color;
+                background-color: $bg-color;
+                border: 0;
+
+                &:focus { border-color: $border-hover-color }
+            }
+
+            .button.button-secondary {
+                box-shadow: none;
+                color: $text-button-color;
+
+                &:hover { background-color: $text-button-hover-color }
+
+                &:active,
+                &:focus { background-color: $text-button-focus-color }
+            }
+
+            .poll__footer { border-top: none }
+        }
+
+        &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+    }
+}
+
+.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
+
+
+.poll {
+    .button { margin-right: 8px }
+
+    li { margin-bottom: 0 }
+
+    &__input {
+        border: none;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+        padding: 18px;
+        margin: 0 2px;
+        background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
+        
+        &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
+
+        &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
+
+        &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
+
+        &.checkbox {
+            border-radius: 2px;
+            border: 2px solid $control-border-color;
+            padding: 8px;
+            margin: 8px 10px;
+            background: none;
+        }
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $text-field-bg-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-hover-color }
+    }
+
+    &__option {
+        padding: 16px 0 8px;
+
+        input[type=text] {
+            color: $primary-text-color;
+            background: $text-field-bg-color;
+            border: none;
+            border-radius: 2px;
+            padding: 8px 16px;
+        }
+
+        &__text { line-height: 34px }
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $progress-indicator-track-color;
+    
+        &.leading { background: $progress-indicator-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-bg-hover-color;
+        border-radius: 50%;
+        box-shadow: none;
+
+        .icon-button { color: $icon-button-active-color }
+    }
+
+    &__dropdown {
+        @include shadow-8dp;
+        background: $menu-bg-color;
+        border-radius: $dialog-radius;
+    }
+
+    &__option {
+        color: $icon-color;
+        padding: 8px 16px;
+
+        &__icon {
+            font-size: 20px;
+            margin-right: 12px;
+        }
+
+        &__content {
+            color: $secondary-text-color;
+
+            strong { color: $ui-text-color }
+        }
+
+        &.active {
+            background: $menu-bg-active-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+
+            &:hover {
+                background: $menu-bg-active-color;
+                
+                .privacy-dropdown__option__content {
+                    color: $secondary-text-color;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &:hover {
+            background: $menu-bg-hover-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+        }
+    }
+}
+
+.character-counter {
+    color: $secondary-text-color;
+}
+
+.reply-indicator {
+    box-shadow: none;
+    border: 1px solid $border-color;
+    border-radius: $card-radius;
+    background: $card-bg-color;
+    padding: 16px;
+
+    &__header { margin-bottom: 4px }
+
+    &__display {
+        &-name {
+            color: $primary-text-color;
+            padding-right: 24px;
+        }
+
+        &-avatar { margin-right: 8px }
+    }
+
+    &__content {
+        color: $primary-text-color;
+
+        p { margin-bottom: 16px }
+    }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    @include shadow-24dp;
+    background: $card-bg-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-bg-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $bg-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-bg-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                strong {
+                    font-size: 16px;
+                    color: $primary-text-color;
+                }
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-bg-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    @include shadow-24dp;
+    background: $card-bg-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-bg-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
+}
+
+.upload-progress {
+    color: $ui-text-color;
+    
+    &__backdrop {
+        border-radius: 0;
+        background: $progress-indicator-track-color;
+        margin-top: 6px;
+    }
+
+    &__tracker {
+        border-radius: 0;
+        background: $progress-indicator-color;
+    }
+}
+
+.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/containers.scss b/app/javascript/styles/y-zu-dark/theme/containers.scss
new file mode 100644
index 000000000..09af289b0
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/containers.scss
@@ -0,0 +1,57 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.public-layout {
+    .header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        margin: 16px 0;
+
+        .brand:hover { background: $tab-indicator-bg-hover-color }
+
+        .nav-link,
+        .nav-link.optional {
+            color: $top-bar-text-color;
+
+            &:hover {
+                background: $tab-indicator-bg-hover-color;
+                text-decoration: none;
+            }
+        }
+
+        .nav-button {
+            background: transparent;
+            margin: 0;
+            border-radius: 0;
+
+            &:hover { background: $tab-indicator-bg-hover-color }
+        }
+
+        .detailed-status__meta { margin-top: 16px }
+    }
+
+    .detailed-status { padding: 16px }
+
+    .footer {
+        padding-top: 16px;
+        padding-bottom: 64px;
+        color: $ui-text-color;
+
+        h4 { color: $ui-text-color }
+
+        ul a { color: $secondary-text-color }
+
+        .grid .column-2 h4 a { color: $ui-text-color }
+
+        .brand {
+            svg { fill: $icon-color }
+
+            &:hover svg { fill: $icon-hover-color }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/control.scss b/app/javascript/styles/y-zu-dark/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+    width: 36px;
+    height: 16px;
+    border-radius: 15px;
+
+    &-track {
+        background-color: $toggle-track-color;
+        margin: 4px;
+        width: 36px;
+        height: 16px;
+
+        &-check { visibility: hidden }
+        &-x { visibility: hidden }
+    }
+
+    &-thumb {
+        @include shadow-1dp;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        background-color: $toggle-thumb-color;
+    }
+
+    &--checked {
+        .react-toggle{
+            &-track { background-color: $toggle-track-active-color }
+
+            &-thumb {
+                background-color: $toggle-thumb-active-color;
+                left: 22px;
+            }
+        }
+
+        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+    }
+
+    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+    padding: 8px 0;
+
+    &__input {
+        border: 2px solid $border-color;
+
+        &.checked {
+            border-color: $icon-button-active-color;
+            background: $icon-button-active-color;
+            padding: 3px;
+            background-clip: content-box;
+        }
+    }
+}
+
+.compose-form__sensitive-button .checkbox {
+    border: 2px solid $border-color;
+    border-radius: 2px;
+
+    &.active {
+        border-color: $primary-color;
+        background: $primary-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/emoji-picker.scss b/app/javascript/styles/y-zu-dark/theme/emoji-picker.scss
new file mode 100644
index 000000000..91663fb93
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/emoji-picker.scss
@@ -0,0 +1,83 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-bg-color;
+        border-radius: $menu-radius;
+    }
+
+    &__modifiers__menu {
+        @include shadow-8dp;
+        background: $menu-bg-color;
+        border-radius: $menu-radius;
+
+        button {
+            padding: 8px;
+        }
+    }
+}
+
+.emoji-mart {
+    width: 388px !important;
+    font-size: 14px;
+    color: $menu-text-color;
+
+    &-bar {
+        border: 0 solid $border-color;
+
+        &:first-child {
+            background: $menu-bg-color;
+        }
+    }
+
+    &-anchor {
+        color: $text-tab-indicator-color;
+        padding: 10px 4px;
+
+        &-bar { background-color: $icon-tab-indicator-active-color }
+
+        &-selected { color: $icon-tab-indicator-hover-color }
+
+        &:hover { color: $icon-tab-indicator-hover-color }
+    }
+
+    &-search {
+        background: $menu-bg-color;
+
+        input {
+            outline: none;
+            padding: 8px;
+            background: $search-bar-color;
+            color: $ui-text-color;
+            border: 0;
+            border-radius: $search-bar-radius;
+
+            &:focus {
+                @include shadow-2dp;
+                background: $search-bar-focus-color;
+                color: $search-bar-text-color;
+            }
+        }
+    }
+
+    &-scroll {
+        padding: 0 8px 8px;
+        background: $menu-bg-color;
+    }
+
+    &-category {
+        &-label span {
+            padding: 4px 6px;
+            background: $menu-bg-color;
+        }
+
+        .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
+    }
+
+    &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/icons.scss b/app/javascript/styles/y-zu-dark/theme/icons.scss
new file mode 100644
index 000000000..987767544
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/icons.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+    &__icon.fa-fw { color: $icon-color }
+}
+
+.fa.fa-lock { text-transform: none }
+
+.icon-with-badge__badge {
+    background: $badge-color;
+    border: none;
+    padding: 2px 6px;
+    border-radius: 12px;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/material-icons.scss b/app/javascript/styles/y-zu-dark/theme/material-icons.scss
new file mode 100644
index 000000000..dd01ce3d6
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/material-icons.scss
@@ -0,0 +1,260 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+@import 'mixins';
+
+
+@include icon-font;
+
+.fa-fw {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+}
+
+.fa {
+    &.fa-bars,
+    &.fa-navicon,
+    &.fa-reorder,
+    &.fa-globe,
+    &.fa-cog,
+    &.fa-cogs,
+    &.fa-gears,
+    &.fa-sign-out,
+    &.fa-search,
+    &.fa-times,
+    &.fa-times-circle,
+    &.fa-close,
+    &.fa-remove,
+    &.fa-chevron-down,
+    &.fa-ellipsis-v,
+    &.fa-paperclip,
+    &.fa-tasks,
+    &.fa-plus,
+    &.fa-unlock,
+    &.fa-lock,
+    &.fa-envelope,
+    &.fa-home,
+    &.fa-bullhorn,
+    &.fa-sliders,
+    &.fa-chevron-left,
+    &.fa-chevron-right,
+    &.fa-reply,
+    &.fa-reply-all,
+    &.fa-share-alt,
+    &.fa-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.fa-bell-o,
+    &.fa-eraser,
+    &.fa-users,
+    &.fa-file-text,
+    &.fa-user-plus,
+    &.fa-address-book,
+    &.fa-address-book-o,
+    &.fa-list,
+    &.fa-list-ul,
+    &.fa-eye,
+    &.fa-eye-slash,
+    &.fa-pencil,
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check,
+    &.fa-quote-right,
+    &.fa-upload,
+    &.fa-comments,
+    &.fa-angle-right,
+    &.fa-thumb-tack {
+        @include icon-font-style;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        display: inline-block;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+        font-feature-settings: 'liga';
+        -webkit-font-smoothing: antialiased;
+    }
+}
+
+.fa {
+    &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
+    &.fa-globe::before { content: "public" }
+    &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
+    &.fa-sign-out::before { content: "exit_to_app" }
+    &.fa-search::before { content: "search" }
+    &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
+    &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
+    &.fa-paperclip::before { content: "attach_file" }
+    &.fa-tasks::before { content: "poll" }
+    &.fa-plus::before { content: "add" }
+    &.fa-unlock::before { content: "lock_open" }
+    &.fa-lock::before { content: "lock" }
+    &.fa-envelope::before { content: "mail" }
+    &.fa-home::before { content: "home" }
+    &.fa-bullhorn::before { content: "announcement" }
+    &.fa-sliders::before { content: "tune" }
+    &.fa-chevron-left::before { content: "arrow_back" }
+    &.fa-chevron-right::before { content: "arrow_forward" }
+    &.fa-reply::before { content: $reply-icon }
+    &.fa-reply-all::before { content: "reply_all" }
+    &.fa-share-alt::before { content: "share" }
+    &.fa-star::before { content: $favorite-icon }
+    &.fa-bookmark::before { content: "bookmark" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
+    &.fa-bell::before { content: "notifications" }
+    &.fa-bell-o::before { content: "notifications" }
+    &.fa-eraser::before { content: "clear_all" }
+    &.fa-users::before { content: "people" }
+    &.fa-file-text::before { content: "web" }
+    &.fa-user-plus::before { content: "person_add" }
+    &.fa-address-book::before { content: "explore" }
+    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before { content: "list" }
+    &.fa-list-ul::before { content: "list" }
+    &.fa-eye::before { content: "visibility" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "person_remove" }
+    &.fa-check::before { content: "check" }
+    &.fa-quote-right::before { content: "format_quote" }
+    &.fa-upload::before { content: "file_upload" }
+    &.fa-comments::before { content: "forum" }
+    &.fa-angle-right::before { content: "chevron_right" }
+    &.fa-thumb-tack::before { content: "push_pin" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark::before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
+// boost icon
+button.icon-button i.fa-retweet {
+    height: 20px;
+    width: 20px;
+    transition: none;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{$media-icon-color}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>') }
+
+button.icon-button i.fa-retweet:hover,
+button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+button.icon-button.disabled i.fa-retweet,
+button.icon-button.disabled i.fa-retweet:hover,
+button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
+
+// icon in tab settings
+.text-btn.column-header__setting-btn {
+    .fa {
+        vertical-align: middle;
+
+        &.fa-eraser { margin-right: 8px } // clear notification
+    }
+}
+
+// top bar icons align
+.fa.fa-bell.column-header__icon.fa-fw,
+.fa.fa-home.column-header__icon.fa-fw,
+.fa.fa-users.column-header__icon.fa-fw,
+.fa.fa-globe.column-header__icon.fa-fw,
+.fa.fa-bars.column-header__icon.fa-fw,
+.fa.fa-bookmark.column-header__icon.fa-fw,
+.fa.fa-address-book-o.column-header__icon.fa-fw,
+.fa.fa-envelope.column-header__icon.fa-fw,
+.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
+
+// top bar icons in single column mode
+.tabs-bar__link {
+    .fa.fa-home.fa-fw,
+    .fa.fa-bell.fa-fw,
+    .fa.fa-users.fa-fw,
+    .fa.fa-globe.fa-fw { vertical-align: text-bottom }
+}
+
+// getting-started and side bar icons
+.column-link .fa,
+.column-link--transparent .fa { vertical-align: text-bottom }
+
+// uploaded media icons align
+.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
+    font-size: 20px;
+    vertical-align: text-bottom;
+}
+
+// search results icons align
+.search-results__header .fa { vertical-align: text-bottom }
+
+// read more icon
+.status__content__read-more-button .fa { vertical-align: bottom }
+
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
+// status detail icon
+.detailed-status .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}
+
+// status scope
+.status__visibility-icon .fa,
+.account__header__tabs__name .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/media.scss b/app/javascript/styles/y-zu-dark/theme/media.scss
new file mode 100644
index 000000000..b8ac12414
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/media.scss
@@ -0,0 +1,126 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery {
+    border-radius: $media-radius;
+
+    &__item { border-radius: $media-radius }
+}
+
+.media-modal {
+    &__nav {
+        background: $media-icon-bg-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
+    }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+
+    &__close {
+        &.icon-button {
+            background: transparent;
+            color: $media-icon-color;
+            font-size: 24px !important;
+            width: 24px !important;
+            height: 24px !important;
+            padding: 8px;
+            box-sizing: content-box;
+            line-height: normal !important;
+    
+            &:hover {
+                background: $media-icon-bg-hover-color;
+                color: $media-icon-hover-color;
+            }
+    
+            .fa-fw {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
+    &__meta {
+        bottom: 24px;
+
+        a { color: $media-icon-color }
+    }
+
+    &__overlay {
+        .picture-in-picture__footer .icon-button {
+            color: $media-icon-color;
+
+            &:active,
+            &:focus,
+            &:hover {
+                color: $media-icon-hover-color;
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            @include material-transition;
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            @include material-transition;
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/modal.scss b/app/javascript/styles/y-zu-dark/theme/modal.scss
new file mode 100644
index 000000000..93e5b24c1
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/modal.scss
@@ -0,0 +1,104 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+    @include shadow-24dp;
+    background: $card-bg-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-bg-color;
+        padding: 8px;
+    }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.actions-modal {
+    @include shadow-24dp;
+    background: $card-bg-color;
+    border-radius: $card-radius;
+
+    ul li:not(:empty) a {
+        color: $ui-text-color;
+        font-size: 16px;
+
+        &:hover {
+            background: $card-bg-hover-color;
+            color: $ui-text-color;
+        }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-bg-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
+}
+
+.report-modal {
+    @include shadow-24dp;
+    background: $card-bg-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__target {
+        padding: 24px;
+        text-align: left;
+        font-weight: bold;
+    }
+
+    &__container {
+        border-top: none;
+    }
+
+    &__comment {
+        border-right: none;
+
+        .setting-text-label { color: $ui-text-color }
+    }
+}
+
+.embed-modal .embed-modal__container {
+    padding: 0 24px 24px 24px;
+
+    .hint {
+        margin-bottom: 16px;
+        color: $secondary-text-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/responsive.scss b/app/javascript/styles/y-zu-dark/theme/responsive.scss
new file mode 100644
index 000000000..8618f7ed7
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/responsive.scss
@@ -0,0 +1,110 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+
+        span {
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+    width: $fab-size;
+    height: $fab-size;
+    bottom: 16px;
+    right: 16px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    .column { margin: 0 !important }
+    .search__input { padding: 16px 46px }
+
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// small size screen
+@media screen and (max-width: 415px) {
+    .public-layout { padding-top: 64px }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels {
+        &__main {
+            @include shadow-1dp;
+            padding: 0;
+        }
+
+        &__pane { padding: 0 16px }
+    }
+}
+
+//single column mode
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-bg-hover-color;
+            border-bottom-color: transparent;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-bg-focus-color;
+            border-bottom-color: $tab-bg-color;
+        }
+
+        &.active { border-bottom-color: $tab-indicator-active-color }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/statuses.scss b/app/javascript/styles/y-zu-dark/theme/statuses.scss
new file mode 100644
index 000000000..7e4374014
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/statuses.scss
@@ -0,0 +1,292 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 4px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: $name-font-size;
+        padding-right: 4px;
+    }
+
+    &__relative-time { color: $info-text-color }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__avatar {
+        left: 12px;
+        top: 12px;
+    }
+
+    &__content {
+        font-size: $status-font-size;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        p { margin-bottom: 16px }
+
+        .status__content__spoiler-link {
+            background: transparent;
+
+            &:hover { background: $text-button-hover-color }
+
+            &:focus { background: $text-button-focus-color }
+        }
+
+        &__spoiler-link {
+            border: 0;
+            color: $text-button-color;
+        }
+
+        &__read-more-button {
+            font-size: 14px;
+            color: $text-button-color;
+            border-radius: $button-radius;
+            padding: 4px 6px;
+
+            &:hover {
+                background: $text-button-hover-color;
+                text-decoration: none;
+            }
+
+            &:focus { background: $text-button-focus-color }
+        }
+    }
+
+    &__action-bar {
+        margin-top: 4px;
+
+        &__counter {
+            margin-right: 6px;
+
+            &__label {
+                font-size: 14px;
+                color: $info-text-color;
+            }
+        }
+    }
+
+    &__action-bar-button {
+        margin-right: 4px;
+
+        &.icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &--with-counter {
+                margin-right: 4px;
+                width: auto !important;
+
+                &:hover { background: transparent }
+            }
+        }
+    }
+
+    &__action-bar-dropdown {
+        width: 36px !important;
+        height: 36px !important;
+        box-sizing: content-box;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &.active {
+                color: $icon-hover-color;
+                background: $icon-bg-active-color;
+            }
+
+            &:hover {
+                color:$icon-hover-color;
+                background: $icon-bg-hover-color;
+            }
+        }
+    }
+
+    &__prepend {
+        color: $secondary-text-color;
+        margin-left: 64px;
+
+        .status__display-name strong { color: $secondary-text-color }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+
+    &__visibility-icon { color: $icon-color }
+}
+
+.status-card {
+    color: $icon-color;
+    border-color: $border-color;
+    outline: none;
+    margin-top: 16px;
+
+    &__image {
+        background: transparent;
+
+        &>.fa {
+            font-size: 26px;
+        }
+    }
+
+    &__title {
+        color: $primary-text-color;
+        margin-bottom: 6px;
+    }
+
+    &__description { color: $secondary-text-color }
+
+    &__actions {
+        &>div {
+            background: $media-icon-bg-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        background: transparent;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &.horizontal {
+        border-radius: 0;
+        
+        .status-card {
+            &__image-preview { border-radius: 0 }
+
+            &__image-image { border-radius: 0 }
+        }
+    }
+}
+
+a.status-card {
+    &:hover { background-color: $card-bg-color }
+}
+
+.embed .status,
+.public-layout .status { padding: 16px 16px 16px 80px }
+
+// Detailed status in mobile
+.status.light {
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+    background: $card-bg-color;
+    padding: 16px;
+
+    &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__meta {
+        margin-top: 16px;
+        color: $info-text-color;
+    }
+
+    &__action-bar {
+        background: $card-bg-color;
+        border-top: none;
+        border-bottom: 1px solid $border-color;
+        padding: 8px 0;
+    }
+
+    &__action-bar-dropdown {
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &.active {
+                color: $icon-hover-color;
+                background: $icon-bg-active-color;
+            }
+        }
+    }
+
+    &__button {
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
+
+    .button.logo-button {
+        margin-bottom: 16px;
+        line-height: 36px;
+    }
+}
+
+// search user trends
+.display-name {
+    &__html { color: $primary-text-color }
+    &__account { color: $secondary-text-color }
+}
+
+.activity-stream {
+    @include shadow-1dp;
+    margin-bottom: 16px;
+    border-radius: $card-radius;
+
+    .entry {
+        background: $card-bg-color;
+
+        &:first-child {
+            .detailed-status,
+            .load-more,
+            .status { border-radius: $card-radius $card-radius 0 0 }
+        }
+    }
+}
+
+.entry.entry-center { border-bottom: 1px solid $border-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/theme.scss b/app/javascript/styles/y-zu-dark/theme/theme.scss
new file mode 100644
index 000000000..367893682
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/theme.scss
@@ -0,0 +1,10 @@
+/*
+* Mastodon Material 0.2.1
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/variables.scss b/app/javascript/styles/y-zu-dark/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-dark/theme/widgets.scss b/app/javascript/styles/y-zu-dark/theme/widgets.scss
new file mode 100644
index 000000000..4abdfbae9
--- /dev/null
+++ b/app/javascript/styles/y-zu-dark/theme/widgets.scss
@@ -0,0 +1,32 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.hero-widget {
+    @include shadow-2dp;
+    margin-bottom: 16px;
+
+    &__img {
+        border-radius: $card-radius $card-radius 0 0;
+        background: $card-bg-color;
+
+        img { border-radius: $card-radius $card-radius 0 0 }
+    }
+
+    &__text {
+        background: $card-bg-color;
+        padding: 16px;
+        color: $primary-text-color;
+        border-radius: 0 0 $card-radius $card-radius;
+    }
+}
+
+.endorsements-widget {
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+}
+
+.trends-widget h4 { color: $section-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light.scss b/app/javascript/styles/y-zu-light.scss
new file mode 100644
index 000000000..c769a7cef
--- /dev/null
+++ b/app/javascript/styles/y-zu-light.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'y-zu-light/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/black.scss b/app/javascript/styles/y-zu-light/color/black.scss
new file mode 100644
index 000000000..693caa813
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/color/black.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #000000;
+$menu-bg-color: #121212;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #121212;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #000000;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: #ffffff;
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: darken($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-bg-color: #121212;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/mastodon-dark.scss b/app/javascript/styles/y-zu-light/color/mastodon-dark.scss
new file mode 100644
index 000000000..b2e6bf27a
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/color/mastodon-dark.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9baec8;
+$ui-text-color: #fff;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #606984;
+$tips-text-color: #6d7889;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4ea2df;
+$menu-text-color: #282c37;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #191b22;
+$menu-bg-color: #d9e1e8;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #313543;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #282c37;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #42485a;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-bg-hover-color: lighten($bg-color, 14%);
+$icon-bg-active-color: lighten($bg-color, 18%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #fff;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.7);
+$text-button-focus-color: transparentize($text-button-color, 0.6);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
+$scroll-bar-thumb-active-color: lighten($bg-color, 32%);
+
+// App bar color
+$top-bar-color: #313543;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: #d9e1e8;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: #1f232b;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-bg-color: $tab-bg-color;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/mastodon-light.scss b/app/javascript/styles/y-zu-light/color/mastodon-light.scss
new file mode 100644
index 000000000..7e94b8de7
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/color/mastodon-light.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// Base color
+$primary-color: #2b90d9;
+$secondary-color: #2b90d9;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #217aba;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #eff3f5;
+$menu-bg-color: $bg-color;
+$menu-bg-hover-color: darken($bg-color, 6%);
+$menu-bg-active-color: darken($bg-color, 10%);
+$menu-bg-active-hover-color: darken($bg-color, 16%);
+$card-bg-color: #ffffff;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: #ffffff;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: darken($bg-color, 4%);
+$icon-bg-active-color: darken($bg-color, 8%);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $icon-hover-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: lighten($text-button-color, 36%);
+$text-button-focus-color: lighten($text-button-color, 30%);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: #ccd7e0;
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #ffffff;
+$search-bar-color: #d9e1e8;
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: #e6ebf0;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-bg-color: $tab-bg-color;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/plus-classic.scss b/app/javascript/styles/y-zu-light/color/plus-classic.scss
new file mode 100644
index 000000000..d94bbe90f
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/color/plus-classic.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #fafafa;
+$menu-bg-color: #ffffff;
+$menu-bg-hover-color: darken($menu-bg-color, 6%);
+$menu-bg-active-color: darken($menu-bg-color, 10%);
+$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
+$card-bg-color: #ffffff;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: #ffffff;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: transparentize(#000000, 0.9);
+$icon-bg-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $secondary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($bg-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #db4437;
+$search-bar-color: darken($bg-color, 6%);
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-bg-color: #ffffff;
+$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/v1-dark.scss b/app/javascript/styles/y-zu-light/color/v1-dark.scss
new file mode 100644
index 000000000..d31fbf04f
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/color/v1-dark.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #303030;
+$menu-bg-color: #424242;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #424242;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #424242;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: #ffffff;
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: darken($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
+$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
+
+// App bar color
+$top-bar-color: #1565C0;
+$search-bar-color: lighten($bg-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-bg-color: #424242;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/v1-light.scss b/app/javascript/styles/y-zu-light/color/v1-light.scss
new file mode 100644
index 000000000..2888e81b4
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/color/v1-light.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $inverted-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #fafafa;
+$menu-bg-color: #ffffff;
+$menu-bg-hover-color: darken($menu-bg-color, 6%);
+$menu-bg-active-color: darken($menu-bg-color, 10%);
+$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
+$card-bg-color: #ffffff;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: #ffffff;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: transparentize(#000000, 0.9);
+$icon-bg-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: #ffffff;
+$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
+$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($bg-color, 20%);
+$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: darken($bg-color, 6%);
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-bg-color: #ffffff;
+$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/v2-dark.scss b/app/javascript/styles/y-zu-light/color/v2-dark.scss
new file mode 100644
index 000000000..025b238f5
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/color/v2-dark.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+
+
+$color-scheme: dark;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #ffffff;
+$secondary-text-color: #9aa0a6;
+$ui-text-color: #e8eaed;
+$inverted-text-color: #000000;
+$section-text-color: $primary-color;
+$info-text-color: #9aa0a6;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $inverted-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #121212;
+$menu-bg-color: #1e1e1e;
+$menu-bg-hover-color: lighten($menu-bg-color, 6%);
+$menu-bg-active-color: lighten($menu-bg-color, 10%);
+$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
+$card-bg-color: #1e1e1e;
+$card-bg-hover-color: lighten($card-bg-color, 6%);
+$list-bg-color: #1e1e1e;
+$list-bg-hover-color: lighten($list-bg-color, 6%);
+$list-bg-active-color: lighten($list-bg-color, 10%);
+$list-bg-inactive-color: lighten($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: darken($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: #ffffff;
+$icon-bg-hover-color: transparentize(#ffffff, 0.8);
+$icon-bg-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: darken($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-hover-color: lighten($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($bg-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
+$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
+
+// App bar color
+$top-bar-color: #272727;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-bg-color: #1e1e1e;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/color/v2-light.scss b/app/javascript/styles/y-zu-light/color/v2-light.scss
new file mode 100644
index 000000000..fd9469961
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/color/v2-light.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+
+
+$color-scheme: light;
+
+// Base color
+$primary-color: #4285f4;
+$secondary-color: #db4437;
+$error-color: #B00020;
+$verified-color: #4caf50;
+
+// Text color
+$primary-text-color: #000000;
+$secondary-text-color: #5f6368;
+$ui-text-color: #202124;
+$inverted-text-color: #ffffff;
+$section-text-color: $primary-color;
+$info-text-color: #5e5e5e;
+$tips-text-color: #c0c0c0;
+$disabled-text-color: rgba(0,0,0,.54);
+$link-text-color: #4285f4;
+$menu-text-color: $ui-text-color;
+$top-bar-text-color: $ui-text-color;
+$search-bar-text-color: $primary-text-color;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$bg-color: #ffffff;
+$menu-bg-color: $bg-color;
+$menu-bg-hover-color: darken($menu-bg-color, 6%);
+$menu-bg-active-color: darken($menu-bg-color, 10%);
+$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
+$card-bg-color: $bg-color;
+$card-bg-hover-color: darken($card-bg-color, 6%);
+$list-bg-color: $bg-color;
+$list-bg-hover-color: darken($list-bg-color, 6%);
+$list-bg-active-color: darken($list-bg-color, 10%);
+$list-bg-inactive-color: darken($list-bg-color, 10%);
+$text-field-bg-color: $card-bg-color;
+$verified-bg-color: lighten($verified-color, 20%);
+$unread-bg-color: transparentize($primary-color, 0.8);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$chip-selected-text-color: $primary-color;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
+$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-bg-hover-color: transparentize(#000000, 0.9);
+$icon-bg-active-color: transparentize(#000000, 0.8);
+$disabled-icon-color: lighten($icon-color, 16%);
+$top-bar-icon-color: $icon-color;
+$top-bar-icon-hover-color: $icon-hover-color;
+$top-bar-icon-active-color: $primary-color;
+$top-bar-unread-icon-color: $secondary-color;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-bg-color: transparentize(#000000, 0.5);
+$media-icon-bg-hover-color: transparentize(#000000, 0.8);
+
+// Control color
+$control-border-color: $icon-color;
+$control-border-active-color: $primary-color;
+$control-border-hover-color: transparentize($control-border-active-color, 0.8);
+
+// Button color
+$icon-button-color: $icon-color;
+$icon-button-hover-color: $icon-hover-color;
+$icon-button-active-color: $primary-color;
+$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
+$contained-button-color: $primary-color;
+$contained-button-hover-color: lighten($contained-button-color, 10%);
+$outlined-button-color: $primary-color;
+$outlined-button-hover-color: lighten($primary-color, 36%);
+$outlined-button-active-color: lighten($primary-color, 30%);
+$text-button-color: $primary-color;
+$text-button-hover-color: transparentize($text-button-color, 0.8);
+$text-button-focus-color: transparentize($text-button-color, 0.7);
+$floating-action-button-color: #ffffff;
+$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
+$floating-action-button-active-color: darken($floating-action-button-color, 10%);
+$floating-action-button-icon-color: $primary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-hover-color: darken($border-color, 30%);
+$border-active-color: $primary-color;
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($bg-color, 20%);
+$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
+$scroll-bar-thumb-active-color: darken($bg-color, 38%);
+
+// App bar color
+$top-bar-color: $bg-color;
+$search-bar-color: darken($bg-color, 6%);
+$search-bar-focus-color: $bg-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-bg-color: $top-bar-color;
+$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-bg-color: #ffffff;
+$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+$icon-tab-indicator-active-color: $primary-color;
+$icon-tab-indicator-hover-color: $icon-hover-color;
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Progress indicator color
+$progress-indicator-color: $primary-color;
+$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
+$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/custom_color.scss b/app/javascript/styles/y-zu-light/custom_color.scss
new file mode 100644
index 000000000..7ace77932
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/custom_color.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your customization below
+$bg-color: #fafafa;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/custom_config.scss b/app/javascript/styles/y-zu-light/custom_config.scss
new file mode 100644
index 000000000..84a5a659a
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/custom_config.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+
+@import "color/v2-light.scss";
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/custom_layout.scss b/app/javascript/styles/y-zu-light/custom_layout.scss
new file mode 100644
index 000000000..fb9dbbe00
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/custom_layout.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+
+// Add your customization below
+
+$avater-radius: 2px;
+
+$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/icon_config.scss b/app/javascript/styles/y-zu-light/icon_config.scss
new file mode 100644
index 000000000..99046e176
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/icon_config.scss
@@ -0,0 +1,28 @@
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
+
+$favorite-icon-color: #ffd600;  // Star
+//$favorite-icon-color: #ff4081;  // Heart
+//$favorite-icon-color: #db4437;  // +1
+//$favorite-icon-color: #ffffff;  // inverted +1 (for plus plugin)
+
+
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment";  // blooming
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+//$icon-font-source: google;  // Google Fonts
+//$icon-font-source: github;  // GitHub
+$icon-font-source: self;  // Self-hosting
+
+// Material Icon style settings
+$icon-font-style: filled;
+//$icon-font-style: outlined;
+//$icon-font-style: round;
+//$icon-font-style: sharp;
+//$icon-font-style: two-tone;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/layout/material-v1.scss b/app/javascript/styles/y-zu-light/layout/material-v1.scss
new file mode 100644
index 000000000..23c9a0616
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/layout/material-v1.scss
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// Button radius settings
+$button-radius: 2px;
+
+
+// Card radius settings
+$card-radius: 2px;
+
+
+// Dialog radius settings
+$dialog-radius: 2px;
+
+
+// Menu radius settings
+$menu-radius: 2px;
+
+
+// Media radius settings
+$media-radius: 0;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 0;
+
+
+// Avater cropping settings
+$avater-radius: 50%;  // Rounded cropping
+//$avater-radius: 2px  // Material v1 square
+
+
+// Chip settings
+$outlined-chip: false;  // Material v1 styled contained chip
+
+
+// Button shadow
+$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/layout/material-v2.scss b/app/javascript/styles/y-zu-light/layout/material-v2.scss
new file mode 100644
index 000000000..5700a99c8
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/layout/material-v2.scss
@@ -0,0 +1,70 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+//$nav-bar-radius: 28px;  // full radius
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+//$search-bar-radius: 21px;  // full rounded
+
+
+// Bar radius settings
+$bar-radius: 0;
+//$bar-radius: 8px;
+
+
+// Button radius settings
+$button-radius: 8px;
+
+
+// Card radius settings
+$card-radius: 8px;
+
+
+// Dialog radius settings
+$dialog-radius: 8px;
+
+
+// Menu radius settings
+$menu-radius: 8px;
+
+
+// Media radius settings
+$media-radius: 0;
+//$media-radius: 2px;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 8px;  // corner rounded
+//$nav-drawer-item-radius: 32px;  // full rounded
+//$nav-drawer-item-radius: 32px 0 0 32px;  // left rounded
+
+
+// Avater cropping settings
+$avater-radius: 50%;  // Rounded cropping
+//$avater-radius: 8px  // Material v2 square
+
+
+// Chip settings
+$outlined-chip: true;  // Material v2 styled outlined chip
+//$outlined-chip: false;  // Material v1 styled contained chip
+
+
+// Button shadow
+$button-shadow: false;  // Material v2 styled colored button without shadow
+//$button-shadow: true;  // Material v1 styled colored button with shadow
+
+
+// Floating Action Button size
+$fab-size: 56px;  // Regular
+//$fab-size: 40px;  // Mini
+
+
+// Text area border
+$text-area-border: false;
+//$text-area-border: underlined;
+//$text-area-border: outlined;
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/loader.scss b/app/javascript/styles/y-zu-light/loader.scss
new file mode 100644
index 000000000..f51dde3e4
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/loader.scss
@@ -0,0 +1,8 @@
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+@import 'plugins/astarte';
+//@import 'plugins/cards';
+@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/plugins/astarte.scss b/app/javascript/styles/y-zu-light/plugins/astarte.scss
new file mode 100644
index 000000000..8c2e534bb
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/plugins/astarte.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.announcements {
+    li {
+        padding: 8px 16px;
+        background: $card-bg-color;
+        border-radius: $card-radius;
+        border: 1px solid $border-color;
+    }
+
+    &__icon {
+        margin: 0;
+        right: 16px;
+        height: 20px;
+
+        .icon-button {
+            @include icon-button;
+
+            &:hover { background: transparent }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/plugins/cards.scss b/app/javascript/styles/y-zu-light/plugins/cards.scss
new file mode 100644
index 000000000..d9b3906a5
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+
+    > .scrollable { background: $bg-color }
+}
+
+.status {
+    border-bottom: 0;
+    border-radius: $card-radius;
+    background: $card-bg-color;
+
+    &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+    border-radius: $card-radius;
+    background: $card-bg-color;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/plugins/dense.scss b/app/javascript/styles/y-zu-light/plugins/dense.scss
new file mode 100644
index 000000000..413336d04
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/plugins/dense.scss
@@ -0,0 +1,87 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+    &__header { height: 48px }
+
+    &__tab { margin: 6px auto 6px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+    height: 48px;
+
+    > button { padding: 12px 16px }
+    
+    &__buttons { height: 48px }
+
+    &__button { margin: 6px }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+    padding: 12px 16px;
+
+    p { margin-bottom: 12px }
+}
+
+.compose-form {
+    .compose-form {
+        &__publish { padding-top: 8px }
+
+        &__buttons-wrapper {
+            .icon-button,
+            .text-icon-button { padding: 4px }
+        }
+    }
+}
+
+.status {
+    padding: 8px 8px 4px 66px;
+
+    &__expand { width: 66px }
+
+    &__info { padding-right: 0 }
+
+    &__avatar {
+        left: 8px;
+        top: 10px;
+    }
+
+    &__content { padding-top: 2px }
+
+    &__action-bar-button {
+        margin: 0 4px;
+
+        &.icon-button { padding: 4px }
+    }
+
+    &__action-bar-dropdown {
+        width: 28px !important;
+        height: 28px !important;
+        margin: 0 4px;
+
+        .icon-button { padding: 4px }
+    }
+}
+
+.detailed-status {
+    padding: 14px;
+
+    &__meta { margin-top: 14px }
+
+    &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/plugins/plus.scss b/app/javascript/styles/y-zu-light/plugins/plus.scss
new file mode 100644
index 000000000..e356e937b
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/plugins/plus.scss
@@ -0,0 +1,36 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+    background: #eeeeee;
+    width: 28px !important;
+    height: 28px !important;
+
+    .fa { vertical-align: bottom }
+}
+
+// exception
+.media-modal__overlay .picture-in-picture__footer .icon-button,
+.status__action-bar-button.icon-button--with-counter { background: transparent }
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.activate,
+.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+    left: -34px;
+
+    .star-icon {
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        vertical-align: baseline;
+        font-size: 18px;
+
+        &.fa-fw::before { vertical-align: middle }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/_functions.scss b/app/javascript/styles/y-zu-light/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/_mixins.scss b/app/javascript/styles/y-zu-light/theme/_mixins.scss
new file mode 100644
index 000000000..fcd556f2b
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/_mixins.scss
@@ -0,0 +1,228 @@
+@charset "UTF-8";
+
+
+$shadow-color-1: rgba(0,0,0,.2);
+$shadow-color-2: rgba(0,0,0,.14);
+$shadow-color-3: rgba(0,0,0,.12);
+
+@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
+@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
+@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
+@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
+@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
+@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
+@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
+@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
+@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
+@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
+@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
+@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
+@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
+@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
+@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
+@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
+@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
+@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
+@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
+@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
+@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
+@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
+@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
+@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
+
+@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
+
+@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
+
+@mixin search-bar-hover {
+    @if $search-bar-hover {
+        @include shadow-2dp;
+        background: $search-bar-focus-color;
+    }
+}
+
+@mixin outlined-chip {
+    @if $outlined-chip {
+        .reactions-bar__item {
+            background: $outlined-chip-color !important;
+            border: 1px solid $outlined-chip-selected-border-color !important;
+        
+            &.active { background-color: $outlined-chip-selected-color !important }
+        
+            &:hover { background: $outlined-chip-hover-color !important }
+        }
+    }
+}
+
+@mixin button-shadow {
+    @if $button-shadow {
+        .button,
+        .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
+    }
+}
+
+@mixin text-area-border {
+    @if $text-area-border == underlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius $card-radius 0 0;
+            border-bottom: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+        }
+    }
+
+    @if $text-area-border == outlined {
+        .compose-form .autosuggest-textarea__textarea {
+            border-radius: $card-radius;
+            border: 1px solid $border-color;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus {
+                border: 2px solid $border-active-color;
+                padding: 7px 41px 7px 15px;
+            }
+        }
+    }
+}
+
+@mixin icon-button {
+    width: 20px !important;
+    height: 20px !important;
+    font-size: 20px !important;
+}
+
+// check background-image value
+@mixin bg-image {
+    @if $bg-image == none {        
+    } @else { background-image: url($bg-image) }
+}
+
+
+@mixin icon-font-style {
+    @if $icon-font-style == filled { font-family: "Material Icons" }
+    @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
+    @if $icon-font-style == round { font-family: "Material Icons Round" }
+    @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
+    @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
+}
+
+@mixin icon-font {
+    @if $icon-font-source == github {
+        @if $icon-font-style == filled {
+            @font-face {
+                font-family: "Material Icons";
+                src: local("Material Icons"),
+                     url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
+            }
+        }
+        @if $icon-font-style == outlined {
+            @font-face {
+                font-family: "Material Icons Outlined";
+                src: local("Material Icons Outlined"),
+                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == round {
+            @font-face {
+                font-family: "Material Icons Round";
+                src: local("Material Icons Round"),
+                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == sharp {
+            @font-face {
+                font-family: "Material Icons Sharp";
+                src: local("Material Icons Sharp"),
+                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == two-tone {
+            @font-face {
+                font-family: "Material Icons Two Tone";
+                src: local("Material Icons Two Tone"),
+                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
+            }
+        }
+    }
+
+    @if $icon-font-source == google {
+        @if $icon-font-style == filled {
+            @font-face {
+                font-family: "Material Icons";
+                src: local("Material Icons"),
+                     url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
+            }
+        }
+        @if $icon-font-style == outlined {
+            @font-face {
+                font-family: "Material Icons Outlined";
+                src: local("Material Icons Outlined"),
+                     url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
+            }
+        }
+        @if $icon-font-style == round {
+            @font-face {
+                font-family: "Material Icons Round";
+                src: local("Material Icons Round"),
+                     url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
+            }
+        }
+        @if $icon-font-style == sharp {
+            @font-face {
+                font-family: "Material Icons Sharp";
+                src: local("Material Icons Sharp"),
+                     url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
+            }
+        }
+        @if $icon-font-style == two-tone {
+            @font-face {
+                font-family: "Material Icons Two Tone";
+                src: local("Material Icons Two Tone"),
+                     url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
+            }
+        }
+    }
+
+    @if $icon-font-source == self {
+        @if $icon-font-style == filled {
+            @font-face {
+                font-family: "Material Icons";
+                src: local("Material Icons"),
+                     url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
+            }
+        }
+        @if $icon-font-style == outlined {
+            @font-face {
+                font-family: "Material Icons Outlined";
+                src: local("Material Icons Outlined"),
+                     url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == round {
+            @font-face {
+                font-family: "Material Icons Round";
+                src: local("Material Icons"),
+                     url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == sharp {
+            @font-face {
+                font-family: "Material Icons Sharp";
+                src: local("Material Icons Sharp"),
+                     url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
+            }
+        }
+        @if $icon-font-style == two-tone {
+            @font-face {
+                font-family: "Material Icons Two Tone";
+                src: local("Material Icons Two Tone"),
+                     url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/account.scss b/app/javascript/styles/y-zu-light/theme/account.scss
new file mode 100644
index 000000000..551b4f4a8
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/account.scss
@@ -0,0 +1,196 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+    padding: 16px;
+
+    .account__display-name,
+    .account__display-name strong { color: $primary-text-color }
+
+    &__avatar {
+        border-radius: $avater-radius;
+        width: 40px;
+        height: 40px;
+
+        &-overlay {
+            &-base {
+                border-radius: $avater-radius;
+                width: 44px;
+                height: 44px;
+                background-size: 44px;
+            }
+
+            &-overlay { border-radius: $avater-radius }
+        }
+    }
+
+    &__avatar-wrapper {
+        margin-left: 0;
+        margin-right: 16px;
+    }
+
+    &__header {
+        &__bar {
+            background: $card-bg-color;
+            padding: 8px;
+            border-bottom: none;
+
+            .avatar .account__avatar { border: none }
+        }
+
+        &__tabs {
+            padding: 8px;
+
+            &__name {
+                padding: 8px;
+
+                h1 {
+                    color: $primary-text-color;
+
+                    small { color: $secondary-text-color }
+                }
+            }
+
+            &__buttons {
+                .icon-button {
+                    @include icon-button;
+                    border: none;
+                    border-radius: 50%;
+                    padding: 8px;
+                    margin-left: 8px;
+                }
+            }
+        }
+
+        &__extra {
+            margin-top: 0;
+
+            &__links {
+                color: $secondary-text-color;
+                padding: 10px 0;
+
+                a {
+                    color: $secondary-text-color;
+                    padding: 4px 12px;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &__bio {
+            margin: 0;
+
+            .account__header {
+                &__content {
+                    color: $primary-text-color;
+                    padding: 8px;
+                }
+
+                &__fields {
+                    border: 1px solid $border-color;
+                    border-radius: 4px;
+
+                    .verified {
+                        border: none;
+                        background: $verified-bg-color;
+
+                        a,
+                        &__mark { color: $primary-text-color }
+                    }
+
+                    dl {
+                        border-bottom: 1px solid $border-color;
+
+                        &:first-child .verified { border-radius: 0 }
+
+                        &:last-child { border-bottom: 0 }
+                    }
+
+                    dt {
+                        color: $primary-text-color;
+                        background: $list-bg-inactive-color;
+                    }
+
+                    dd { color: $primary-text-color }
+                }
+            }
+        }
+
+        &__account-note {
+            padding: 8px 16px;
+            border-bottom: 1px solid $border-color;
+
+            label {
+                color: $ui-text-color;
+                margin-bottom: 8px;
+            }
+
+            textarea {
+                color: $primary-text-color;
+                padding: 8px 16px;
+                border-radius: 0;
+
+                &:focus { background: transparent }
+
+                &::placeholder { color: $tips-text-color }
+            }
+        }
+
+        &__content { color: $secondary-text-color }
+    }
+
+    &__section-headline {
+        background: $text-tab-bg-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $text-tab-indicator-color;
+
+            &.active {
+                color: $text-tab-indicator-active-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
+
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $text-tab-indicator-bg-focus-color }
+            }
+
+            &:hover { background: $text-tab-indicator-bg-hover-color }
+        }
+    }
+
+    &__relationship {
+        padding: 0;
+        height: auto;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
+}
+
+.account-gallery {
+    &__item { border-radius: 0 }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/base_config.scss b/app/javascript/styles/y-zu-light/theme/base_config.scss
new file mode 100644
index 000000000..f36a139ba
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/base_config.scss
@@ -0,0 +1,46 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+$search-bar-hover: false;
+
+
+// Status font size in timeline
+$status-font-size: 15px;  // mastodon default
+//$status-font-size: 16px;  // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px;  // mastodon default
+//$name-font-size: 16px;  // compatible with material design
+
+
+// Background image
+// If you want to use the local image, please put it in "../"
+$bg-image: none;
+//$bg-image: "./image.png";
+//$bg-image: "https://example.com/img/image.png";
+
+
+// Columns transparency settings
+$bar-transparency: 1.0;  // opacity
+//$bar-transparency: 0.8;  // semi-transparent
+
+$column-transparency: 1.0;  // opacity
+//$column-transparency: 0.8;  // semi-transparent
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/basics.scss b/app/javascript/styles/y-zu-light/theme/basics.scss
new file mode 100644
index 000000000..bb8f68bf0
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/basics.scss
@@ -0,0 +1,27 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+body,
+body.embed { background: $bg-color }
+
+.focusable:focus { background: transparent }
+
+// Chrome & Safari scroll bar
+::-webkit-scrollbar-thumb {
+    background: $scroll-bar-thumb-color;
+
+    &:hover { background: $scroll-bar-thumb-hover-color }
+    &:active { background: $scroll-bar-thumb-active-color }
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track:hover,
+::-webkit-scrollbar-track:active {
+    background: transparent !important;
+}
+
+// Firefox scroll bar
+html { scrollbar-color: $scroll-bar-thumb-color transparent }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/button.scss b/app/javascript/styles/y-zu-light/theme/button.scss
new file mode 100644
index 000000000..5f909d843
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/button.scss
@@ -0,0 +1,145 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+@include button-shadow;
+
+.icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+
+    &.active {
+        color: $icon-button-active-color;
+
+        &:hover { color: $icon-button-active-hover-color }
+    }
+
+    &.disabled { color: $disabled-icon-color }
+
+    &.inverted {
+        color: $icon-button-color;
+
+        &.active { color: $icon-button-active-color }
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background-color: $icon-bg-hover-color;
+        }
+
+        &:focus { background-color: transparent }
+    }
+
+    &.overlayed {
+        @include icon-button;
+        border-radius: 50%;
+        background: $media-icon-bg-color;
+        color: $media-icon-color;
+        padding: 4px;
+        line-height: 20px !important;
+    
+        &:hover {
+            background: $media-icon-bg-color;
+            color: $media-icon-hover-color;
+        }
+    }
+
+    &__counter {
+        width: 16px;
+        margin-left: 8px;
+    }
+
+    &:hover {
+        @include material-transition;
+        color: $icon-button-hover-color;
+        background-color: $icon-bg-hover-color;
+    }
+
+    &:focus { background-color: transparent }
+}
+
+// Checkbox with label
+label.icon-button {
+    &.active {
+        color: $ui-text-color;
+        background-color: transparent;
+    }
+
+    &:hover {
+        @include material-transition;
+        background-color: transparent;
+    }
+}
+
+.text-icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+    font-size: 14px;
+
+    &.active {
+        background-color: $icon-bg-hover-color;
+        color: $icon-button-active-color;
+    }
+
+    &:hover {
+        background-color: $icon-bg-hover-color;
+        color: $icon-button-hover-color;
+    }
+}
+
+.button {
+    background-color: $contained-button-color;
+    border-radius: $button-radius;
+
+    &:active,
+    &:focus {
+        background-color: $contained-button-color;
+        border-radius: $button-radius;
+    }
+
+    &:hover {
+        @include shadow-2dp;
+        background-color: $contained-button-hover-color;
+    }
+
+    &.logo-button {
+        background: $contained-button-color;
+        margin: 2px;
+    
+        &:hover { background: $contained-button-hover-color }
+    
+        .button--destructive:hover { background: $contained-button-hover-color }
+    }
+
+    &.button--block { margin: 8px 0 }
+
+    &.button-secondary {
+        color: $text-button-color;
+        border: none;
+        box-shadow: none;
+    
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+    }
+
+    &.confirmation-modal__cancel-button {
+        box-shadow: none;
+        background-color: transparent;
+        margin: 0 8px;
+        color: $text-button-color;
+    
+        &:hover { background: $text-button-hover-color }
+    
+        &:focus { background: $text-button-focus-color }
+    }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-bg-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/columns.scss b/app/javascript/styles/y-zu-light/theme/columns.scss
new file mode 100644
index 000000000..77a5c777a
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/columns.scss
@@ -0,0 +1,511 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable {
+        background: $list-bg-color;
+        opacity: $column-transparency;
+    }
+
+    &:last-child { box-shadow: none }
+}
+
+.column-header {
+    background: $top-bar-color;
+    border-radius: $bar-radius;
+    height: 56px;
+
+    > button {
+        padding: 16px;
+        color: $top-bar-text-color;
+    }
+
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
+    &.active {
+        .column-header__icon {
+            color: $top-bar-unread-icon-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        @include icon-button;
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        padding: 8px;
+        margin: 10px;
+        border-radius: 50%;
+        box-sizing: content-box;
+
+        &.active {
+            color: $top-bar-icon-active-color;
+            background: $icon-bg-active-color;
+
+            &:hover {
+                color: $top-bar-icon-hover-color;
+                background: $icon-bg-hover-color;
+            }
+        }
+
+        &:hover {
+            color: $top-bar-icon-hover-color;
+            background: $icon-bg-hover-color;
+        }
+    }
+
+    &__setting-btn {
+        color: $icon-button-color;
+        padding: 8px 0;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            text-decoration: none;
+        }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
+    }
+
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+        opacity: $bar-transparency;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &::before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        background: $card-bg-color;
+        border-top: 1px solid $border-color;
+
+        &-inner {
+            background: $card-bg-color;
+            padding: 16px;
+        }
+
+        &.collapsed { border-top: none }
+    }
+
+    &__back-button {
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        margin: 8px 10px;
+        padding: 10px;
+        font-size: 20px;
+
+        span { display: none }
+    }
+}
+
+.column-subheading {
+    color: $section-text-color;
+    background: $bg-color;
+    padding: 12px 16px;
+    margin-top: 8px;
+    border-top: 1px solid $border-color;
+}
+
+.column-link {
+    color: $ui-text-color;
+    background: $bg-color;
+    padding: 16px;
+    border-radius: $nav-drawer-item-radius;
+
+    &:hover { background: $list-bg-hover-color }
+
+    &:active,
+    &:focus { background: $list-bg-active-color }
+
+    &__icon {
+        margin-right: 32px;
+        font-size: 20px;
+    }
+
+    &--transparent {
+        &.active {
+            color: $ui-text-color;
+            background: $menu-bg-active-color;
+
+            &:hover { background: $menu-bg-active-hover-color }
+    
+            .fa { color: $icon-color }
+        }
+
+        &:hover {
+            color: $ui-text-color;
+
+            .fa { color: $icon-color }
+        }
+    }
+
+    .fa { color: $icon-color }
+}
+
+.column-settings {
+    &__section {
+        color: $section-text-color;
+        margin-bottom: 0;
+        margin-top: 8px;
+    }
+
+    &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
+
+    &--slim-button { top: -54px }
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-bg-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.columns-area {
+    @include bg-image;
+    background-size: contain;
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $text-field-bg-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-color }
+}
+
+.empty-column-indicator {
+    color: $secondary-text-color;
+    background: $card-bg-color;
+    font-size: 16px;
+    contain: initial;  // padding fix
+}
+
+.conversation {
+    border-bottom: 1px solid $border-color;
+    padding: 12px;
+    background: $list-bg-inactive-color;
+
+    &--unread {
+        background: $list-bg-color;
+
+        .conversation__content__relative-time { color: $info-text-color }
+    }
+
+    &__unread { background: $primary-color }
+
+    &__avatar { padding: 0 16px 0 0 }
+
+    &__content {
+        padding: 0;
+
+        &__relative-time {
+            font-size: 14px;
+            color: $info-text-color;
+        }
+
+        &__names,
+        &__names a {
+            color: $primary-text-color;
+            font-size: 16px;
+        }
+    }
+}
+
+// read status in notification column
+.muted {
+    .status {
+        &__content {
+            color: $read-primary-text-color;
+    
+            p { color: $read-primary-text-color }
+    
+            a { color: $read-secondary-text-color }
+        }
+
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-bg-hover-color }
+}
+
+.getting-started {
+    background: $bg-color;
+    color: $ui-text-color;
+    opacity: $column-transparency;
+
+    &__wrapper {
+        background: $bg-color;
+        height: auto !important;
+        padding-bottom: 8px;
+        border-bottom: 1px solid $border-color;
+    }
+
+    &__footer {
+        padding: 16px;
+        
+        p {
+            color: $secondary-text-color;
+            font-size: 12px;
+            margin-bottom: 16px;
+        }
+
+        a { color: $ui-text-color }
+
+        p a { color: $link-text-color }
+    }
+
+    &__trends {
+        background: $bg-color;
+        margin-bottom: 0;
+        opacity: $column-transparency;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            margin-top: 8px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends {
+    &__header {
+        color: $section-text-color;
+        background: transparent;
+        border-bottom: 1px solid $border-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__item {
+        padding: 16px;
+        border-bottom: none;
+    
+        &__name {
+            color: $secondary-text-color;
+            font-size: 12px;
+    
+            a { color: $primary-text-color }
+        }
+    
+        &__current {
+            padding-right: 16px;
+            margin-left: 4px;
+            color: $secondary-text-color;
+        }
+    
+        &__sparkline path {
+            stroke: $primary-color;
+            fill: $primary-color;
+            fill-opacity: 0.5;
+        }
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-bg-color;
+    padding: 0 8px;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+
+    &__pagination {
+        color: $ui-text-color;
+        padding: 16px;
+        bottom: 0;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            margin: 0 4px;
+            line-height: normal !important;
+            box-sizing: content-box;
+        }
+
+        span { vertical-align: super }
+    }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+@include outlined-chip;
+
+.reactions-bar {
+    margin-top: 16px;
+    width: calc(100% - 72px);
+
+    .emoji-button {
+        color: $icon-button-color;
+        font-size: 20px;
+
+        &:hover { color: $icon-button-hover-color }
+
+        &:active { color: $icon-button-active-color }
+    }
+
+    &__item {
+        background: $contained-chip-color;
+        border-radius: 17px;
+        margin: 2px 4px;
+
+        &.active {
+            background-color: $contained-chip-selected-color;
+
+            .reactions-bar__item__count { color: $chip-selected-text-color }
+
+            &:hover { background-color: $contained-chip-selected-color }
+        }
+
+        &__emoji {
+            width: 24px;
+            height: 24px;
+            margin: 4px 0 4px 2px;
+        }
+
+        &__count {
+            font-size: 16px;
+            margin: 0 12px 0 8px;
+            color: $secondary-text-color;
+        }
+
+        &:hover { background: $contained-chip-hover-color }
+    }
+}
+
+.notification {
+    &__filter-bar {
+        background: $tab-bg-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+        opacity: $bar-transparency;
+    
+        button {
+            background: $tab-bg-color;
+            color: $tab-indicator-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-active-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
+    
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-bg-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-bg-hover-color }
+        }
+    }
+
+    &__message {
+        color: $secondary-text-color;
+        margin: 0 16px 0 70px;
+        font-size: 16px;
+    }
+
+    &__display-name:hover { color: inherit }
+}
+
+.notification-favourite .status.status-direct {
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $relationship-tag-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
+
+// unread notification
+.notification.unread:before, .status__wrapper.unread:before { border-left: none }
+
+.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/components.scss b/app/javascript/styles/y-zu-light/theme/components.scss
new file mode 100644
index 000000000..aa64aabc5
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/components.scss
@@ -0,0 +1,647 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+@include text-area-border;
+
+.modal-root {
+    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+
+    &__overlay { background-color: rgba(0,0,0,.32) !important }
+
+    &__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
+}
+
+.drawer {
+    &__header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        justify-content: space-around;
+        opacity: $bar-transparency;
+    
+        a { transition: none }
+    
+        a:hover {
+            background: $icon-bg-hover-color;
+            border-radius: 50%;
+        }
+    }
+
+    &__tab {
+        color: $top-bar-icon-color;
+        font-size: 20px;
+        margin: 10px auto 10px;
+        padding: 8px;
+        flex: none;
+        height: 20px;
+        width: 20px;
+        border-bottom: none;
+        text-align: justify;
+    
+        &:hover { color: $top-bar-icon-hover-color }
+    }
+
+    &__pager {
+        @include shadow-1dp;
+        border-radius: $card-radius;
+    }
+
+    &__inner {
+        background: $card-bg-color;
+        opacity: $column-transparency;
+
+        &.darker {
+            background: $card-bg-color;
+            position: inherit;
+        }
+
+        &__mastodon { background: $card-bg-color }
+    }
+}
+
+.search {
+    &__input {
+        background: $search-bar-color;
+        color: $tips-text-color;
+        border-radius: $search-bar-radius;
+        padding: 12px 12px 12px 40px;
+        opacity: $bar-transparency;
+
+        &:focus {
+            @include shadow-2dp;
+            background: $search-bar-focus-color;
+            color: $search-bar-text-color;
+        }
+
+        &:hover { @include search-bar-hover }
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    &__icon {
+        .fa {
+            color: $icon-color;
+            font-size: 20px;
+            top: 12px;
+            right: unset;
+            left: 12px;
+            height: 6px;
+            transition: none;
+
+            &.active { opacity: 1 }
+
+            &-search {
+                transform: none;
+                opacity: 1;
+            }
+            &-times-circle.active {
+                right: 16px;
+                left: unset;
+                transform: none;
+            }
+        }
+    }
+}
+
+.search-popout {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+    border-radius: 0px $bar-radius;
+    border-top: 1px solid $border-color;
+    margin-top: 0;
+    color: $tips-text-color;
+
+    h4 {
+        color: $secondary-text-color;
+    }
+
+    em {
+        color: $search-bar-text-color;
+    }
+}
+
+.search-results {
+    &__header {
+        color: $secondary-text-color;
+        background-color: $card-bg-color;
+        padding: 16px;
+
+        .fa { margin-right: 16px }
+    }
+
+    &__section {
+        h5 {
+            background: $card-bg-color;
+            border-bottom: 1px solid $border-color;
+            padding: 16px;
+            color: $section-text-color;
+
+            .fa { margin-right: 8px }
+        }
+    }
+}
+
+.navigation-bar {
+    color: $secondary-text-color;
+    padding: 14px;
+
+    strong {
+        color: $ui-text-color;
+    }
+
+    .navigation-bar__actions .compose__action-bar .icon-button {
+        width: 36px !important;
+        height: 36px !important;
+        padding: 8px;
+
+        &.active {
+            color: $icon-hover-color;
+            background: $icon-bg-active-color;
+        }
+    }
+}
+
+.navigation-panel hr {
+    border-top: 1px solid $border-color;
+    margin: 8px 0;
+}
+
+.flex-spacer { margin: 8px 0 }
+
+.dropdown-menu {
+    @include shadow-8dp;
+    background: $menu-bg-color;
+    padding: 8px 0;
+    border-radius: $menu-radius;
+
+    &__arrow { visibility: hidden }
+
+    &__item a {
+        font-size: 14px;
+        padding: 8px 16px;
+        background: $menu-bg-color;
+        color: $menu-text-color;
+
+        &:hover, &:active {
+            background: $menu-bg-hover-color;
+            color: $menu-text-color;
+        }
+    }
+
+    &__separator {
+        margin: 8px 0;
+        border-bottom: 1px solid $border-color;
+    }
+}
+
+.compose-form {
+    .autosuggest-textarea {
+        &__textarea {
+            background: $text-field-bg-color;
+            color: $ui-text-color;
+            padding: 8px 42px 8px 16px;
+    
+            &::placeholder { color: $tips-text-color }
+        }
+
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-bg-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-bg-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-bg-active-color }
+            }
+        }
+    }
+
+    .spoiler-input {
+        &.spoiler-input--visible { margin-bottom: 16px }
+
+        &__input {
+            color: $ui-text-color;
+            background: $card-bg-color;
+            border-bottom: 1px solid $border-color;
+            border-radius: 0;
+
+            &:hover { border-color: $border-hover-color }
+
+            &:active,
+            &:focus { border-bottom: 2px solid $border-active-color }
+    
+            &::placeholder { color: $tips-text-color }
+        }
+    }
+
+    .compose-form {
+        &__warning {
+            color: $secondary-text-color;
+            background: $card-bg-color;
+            padding: 16px;
+            border: 1px solid $border-color;
+            border-radius: $card-radius;
+            box-shadow: none;
+
+            a { color: $link-text-color }
+        }
+
+        &__modifiers {
+            background: $card-bg-color;
+            color: $tips-text-color;
+
+            .compose-form {
+                &__upload-thumbnail { border-radius: 0 }
+
+                &__upload__actions {
+                    @include material-transition;
+
+                    .icon-button {
+                        color: $media-icon-color;
+                        font-size: 16px;
+
+                        &:hover { background-color: transparent }
+                    }
+                }
+            }
+        }
+
+        &__buttons-wrapper {
+            background: $card-bg-color;
+            color: $tips-text-color;
+            padding: 8px;
+
+            .icon-button {
+                @include icon-button;
+                padding: 8px;
+            }
+
+            .text-icon-button {
+                width: 20px !important;
+                height: 20px !important;
+                padding: 8px;
+                line-height: 20px !important;
+            }
+        }
+
+        &__poll-wrapper {
+            border-top: 1px solid $border-color;
+
+            ul { padding: 16px 12px 16px 0 }
+
+            select {
+                color: $ui-text-color;
+                background-color: $bg-color;
+                border: 0;
+
+                &:focus { border-color: $border-hover-color }
+            }
+
+            .button.button-secondary {
+                box-shadow: none;
+                color: $text-button-color;
+
+                &:hover { background-color: $text-button-hover-color }
+
+                &:active,
+                &:focus { background-color: $text-button-focus-color }
+            }
+
+            .poll__footer { border-top: none }
+        }
+
+        &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+    }
+}
+
+.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
+
+
+.poll {
+    .button { margin-right: 8px }
+
+    li { margin-bottom: 0 }
+
+    &__input {
+        border: none;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+        padding: 18px;
+        margin: 0 2px;
+        background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
+        
+        &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
+
+        &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
+
+        &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
+
+        &.checkbox {
+            border-radius: 2px;
+            border: 2px solid $control-border-color;
+            padding: 8px;
+            margin: 8px 10px;
+            background: none;
+        }
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $text-field-bg-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-hover-color }
+    }
+
+    &__option {
+        padding: 16px 0 8px;
+
+        input[type=text] {
+            color: $primary-text-color;
+            background: $text-field-bg-color;
+            border: none;
+            border-radius: 2px;
+            padding: 8px 16px;
+        }
+
+        &__text { line-height: 34px }
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $progress-indicator-track-color;
+    
+        &.leading { background: $progress-indicator-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-bg-hover-color;
+        border-radius: 50%;
+        box-shadow: none;
+
+        .icon-button { color: $icon-button-active-color }
+    }
+
+    &__dropdown {
+        @include shadow-8dp;
+        background: $menu-bg-color;
+        border-radius: $dialog-radius;
+    }
+
+    &__option {
+        color: $icon-color;
+        padding: 8px 16px;
+
+        &__icon {
+            font-size: 20px;
+            margin-right: 12px;
+        }
+
+        &__content {
+            color: $secondary-text-color;
+
+            strong { color: $ui-text-color }
+        }
+
+        &.active {
+            background: $menu-bg-active-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+
+            &:hover {
+                background: $menu-bg-active-color;
+                
+                .privacy-dropdown__option__content {
+                    color: $secondary-text-color;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &:hover {
+            background: $menu-bg-hover-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+        }
+    }
+}
+
+.character-counter {
+    color: $secondary-text-color;
+}
+
+.reply-indicator {
+    box-shadow: none;
+    border: 1px solid $border-color;
+    border-radius: $card-radius;
+    background: $card-bg-color;
+    padding: 16px;
+
+    &__header { margin-bottom: 4px }
+
+    &__display {
+        &-name {
+            color: $primary-text-color;
+            padding-right: 24px;
+        }
+
+        &-avatar { margin-right: 8px }
+    }
+
+    &__content {
+        color: $primary-text-color;
+
+        p { margin-bottom: 16px }
+    }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    @include shadow-24dp;
+    background: $card-bg-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-bg-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $bg-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-bg-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                strong {
+                    font-size: 16px;
+                    color: $primary-text-color;
+                }
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-bg-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    @include shadow-24dp;
+    background: $card-bg-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-bg-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
+}
+
+.upload-progress {
+    color: $ui-text-color;
+    
+    &__backdrop {
+        border-radius: 0;
+        background: $progress-indicator-track-color;
+        margin-top: 6px;
+    }
+
+    &__tracker {
+        border-radius: 0;
+        background: $progress-indicator-color;
+    }
+}
+
+.emoji-button { padding: 8px }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/containers.scss b/app/javascript/styles/y-zu-light/theme/containers.scss
new file mode 100644
index 000000000..09af289b0
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/containers.scss
@@ -0,0 +1,57 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.public-layout {
+    .header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        margin: 16px 0;
+
+        .brand:hover { background: $tab-indicator-bg-hover-color }
+
+        .nav-link,
+        .nav-link.optional {
+            color: $top-bar-text-color;
+
+            &:hover {
+                background: $tab-indicator-bg-hover-color;
+                text-decoration: none;
+            }
+        }
+
+        .nav-button {
+            background: transparent;
+            margin: 0;
+            border-radius: 0;
+
+            &:hover { background: $tab-indicator-bg-hover-color }
+        }
+
+        .detailed-status__meta { margin-top: 16px }
+    }
+
+    .detailed-status { padding: 16px }
+
+    .footer {
+        padding-top: 16px;
+        padding-bottom: 64px;
+        color: $ui-text-color;
+
+        h4 { color: $ui-text-color }
+
+        ul a { color: $secondary-text-color }
+
+        .grid .column-2 h4 a { color: $ui-text-color }
+
+        .brand {
+            svg { fill: $icon-color }
+
+            &:hover svg { fill: $icon-hover-color }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/control.scss b/app/javascript/styles/y-zu-light/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+    width: 36px;
+    height: 16px;
+    border-radius: 15px;
+
+    &-track {
+        background-color: $toggle-track-color;
+        margin: 4px;
+        width: 36px;
+        height: 16px;
+
+        &-check { visibility: hidden }
+        &-x { visibility: hidden }
+    }
+
+    &-thumb {
+        @include shadow-1dp;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        background-color: $toggle-thumb-color;
+    }
+
+    &--checked {
+        .react-toggle{
+            &-track { background-color: $toggle-track-active-color }
+
+            &-thumb {
+                background-color: $toggle-thumb-active-color;
+                left: 22px;
+            }
+        }
+
+        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+    }
+
+    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+    padding: 8px 0;
+
+    &__input {
+        border: 2px solid $border-color;
+
+        &.checked {
+            border-color: $icon-button-active-color;
+            background: $icon-button-active-color;
+            padding: 3px;
+            background-clip: content-box;
+        }
+    }
+}
+
+.compose-form__sensitive-button .checkbox {
+    border: 2px solid $border-color;
+    border-radius: 2px;
+
+    &.active {
+        border-color: $primary-color;
+        background: $primary-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/emoji-picker.scss b/app/javascript/styles/y-zu-light/theme/emoji-picker.scss
new file mode 100644
index 000000000..91663fb93
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/emoji-picker.scss
@@ -0,0 +1,83 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-bg-color;
+        border-radius: $menu-radius;
+    }
+
+    &__modifiers__menu {
+        @include shadow-8dp;
+        background: $menu-bg-color;
+        border-radius: $menu-radius;
+
+        button {
+            padding: 8px;
+        }
+    }
+}
+
+.emoji-mart {
+    width: 388px !important;
+    font-size: 14px;
+    color: $menu-text-color;
+
+    &-bar {
+        border: 0 solid $border-color;
+
+        &:first-child {
+            background: $menu-bg-color;
+        }
+    }
+
+    &-anchor {
+        color: $text-tab-indicator-color;
+        padding: 10px 4px;
+
+        &-bar { background-color: $icon-tab-indicator-active-color }
+
+        &-selected { color: $icon-tab-indicator-hover-color }
+
+        &:hover { color: $icon-tab-indicator-hover-color }
+    }
+
+    &-search {
+        background: $menu-bg-color;
+
+        input {
+            outline: none;
+            padding: 8px;
+            background: $search-bar-color;
+            color: $ui-text-color;
+            border: 0;
+            border-radius: $search-bar-radius;
+
+            &:focus {
+                @include shadow-2dp;
+                background: $search-bar-focus-color;
+                color: $search-bar-text-color;
+            }
+        }
+    }
+
+    &-scroll {
+        padding: 0 8px 8px;
+        background: $menu-bg-color;
+    }
+
+    &-category {
+        &-label span {
+            padding: 4px 6px;
+            background: $menu-bg-color;
+        }
+
+        .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
+    }
+
+    &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/icons.scss b/app/javascript/styles/y-zu-light/theme/icons.scss
new file mode 100644
index 000000000..987767544
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/icons.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+    &__icon.fa-fw { color: $icon-color }
+}
+
+.fa.fa-lock { text-transform: none }
+
+.icon-with-badge__badge {
+    background: $badge-color;
+    border: none;
+    padding: 2px 6px;
+    border-radius: 12px;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/material-icons.scss b/app/javascript/styles/y-zu-light/theme/material-icons.scss
new file mode 100644
index 000000000..dd01ce3d6
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/material-icons.scss
@@ -0,0 +1,260 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+@import 'mixins';
+
+
+@include icon-font;
+
+.fa-fw {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+}
+
+.fa {
+    &.fa-bars,
+    &.fa-navicon,
+    &.fa-reorder,
+    &.fa-globe,
+    &.fa-cog,
+    &.fa-cogs,
+    &.fa-gears,
+    &.fa-sign-out,
+    &.fa-search,
+    &.fa-times,
+    &.fa-times-circle,
+    &.fa-close,
+    &.fa-remove,
+    &.fa-chevron-down,
+    &.fa-ellipsis-v,
+    &.fa-paperclip,
+    &.fa-tasks,
+    &.fa-plus,
+    &.fa-unlock,
+    &.fa-lock,
+    &.fa-envelope,
+    &.fa-home,
+    &.fa-bullhorn,
+    &.fa-sliders,
+    &.fa-chevron-left,
+    &.fa-chevron-right,
+    &.fa-reply,
+    &.fa-reply-all,
+    &.fa-share-alt,
+    &.fa-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.fa-bell-o,
+    &.fa-eraser,
+    &.fa-users,
+    &.fa-file-text,
+    &.fa-user-plus,
+    &.fa-address-book,
+    &.fa-address-book-o,
+    &.fa-list,
+    &.fa-list-ul,
+    &.fa-eye,
+    &.fa-eye-slash,
+    &.fa-pencil,
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check,
+    &.fa-quote-right,
+    &.fa-upload,
+    &.fa-comments,
+    &.fa-angle-right,
+    &.fa-thumb-tack {
+        @include icon-font-style;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        display: inline-block;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+        font-feature-settings: 'liga';
+        -webkit-font-smoothing: antialiased;
+    }
+}
+
+.fa {
+    &.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
+    &.fa-globe::before { content: "public" }
+    &.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
+    &.fa-sign-out::before { content: "exit_to_app" }
+    &.fa-search::before { content: "search" }
+    &.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
+    &.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
+    &.fa-paperclip::before { content: "attach_file" }
+    &.fa-tasks::before { content: "poll" }
+    &.fa-plus::before { content: "add" }
+    &.fa-unlock::before { content: "lock_open" }
+    &.fa-lock::before { content: "lock" }
+    &.fa-envelope::before { content: "mail" }
+    &.fa-home::before { content: "home" }
+    &.fa-bullhorn::before { content: "announcement" }
+    &.fa-sliders::before { content: "tune" }
+    &.fa-chevron-left::before { content: "arrow_back" }
+    &.fa-chevron-right::before { content: "arrow_forward" }
+    &.fa-reply::before { content: $reply-icon }
+    &.fa-reply-all::before { content: "reply_all" }
+    &.fa-share-alt::before { content: "share" }
+    &.fa-star::before { content: $favorite-icon }
+    &.fa-bookmark::before { content: "bookmark" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
+    &.fa-bell::before { content: "notifications" }
+    &.fa-bell-o::before { content: "notifications" }
+    &.fa-eraser::before { content: "clear_all" }
+    &.fa-users::before { content: "people" }
+    &.fa-file-text::before { content: "web" }
+    &.fa-user-plus::before { content: "person_add" }
+    &.fa-address-book::before { content: "explore" }
+    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before { content: "list" }
+    &.fa-list-ul::before { content: "list" }
+    &.fa-eye::before { content: "visibility" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "person_remove" }
+    &.fa-check::before { content: "check" }
+    &.fa-quote-right::before { content: "format_quote" }
+    &.fa-upload::before { content: "file_upload" }
+    &.fa-comments::before { content: "forum" }
+    &.fa-angle-right::before { content: "chevron_right" }
+    &.fa-thumb-tack::before { content: "push_pin" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark::before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
+// boost icon
+button.icon-button i.fa-retweet {
+    height: 20px;
+    width: 20px;
+    transition: none;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{$media-icon-color}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>') }
+
+button.icon-button i.fa-retweet:hover,
+button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+button.icon-button.disabled i.fa-retweet,
+button.icon-button.disabled i.fa-retweet:hover,
+button.icon-button.disabled:hover i.fa-retweet  /* v3.3.0 or above */ {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
+
+// icon in tab settings
+.text-btn.column-header__setting-btn {
+    .fa {
+        vertical-align: middle;
+
+        &.fa-eraser { margin-right: 8px } // clear notification
+    }
+}
+
+// top bar icons align
+.fa.fa-bell.column-header__icon.fa-fw,
+.fa.fa-home.column-header__icon.fa-fw,
+.fa.fa-users.column-header__icon.fa-fw,
+.fa.fa-globe.column-header__icon.fa-fw,
+.fa.fa-bars.column-header__icon.fa-fw,
+.fa.fa-bookmark.column-header__icon.fa-fw,
+.fa.fa-address-book-o.column-header__icon.fa-fw,
+.fa.fa-envelope.column-header__icon.fa-fw,
+.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
+
+// top bar icons in single column mode
+.tabs-bar__link {
+    .fa.fa-home.fa-fw,
+    .fa.fa-bell.fa-fw,
+    .fa.fa-users.fa-fw,
+    .fa.fa-globe.fa-fw { vertical-align: text-bottom }
+}
+
+// getting-started and side bar icons
+.column-link .fa,
+.column-link--transparent .fa { vertical-align: text-bottom }
+
+// uploaded media icons align
+.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
+    font-size: 20px;
+    vertical-align: text-bottom;
+}
+
+// search results icons align
+.search-results__header .fa { vertical-align: text-bottom }
+
+// read more icon
+.status__content__read-more-button .fa { vertical-align: bottom }
+
+// Attachment icon
+.attachment-list__list a .fa { vertical-align: middle }
+
+// status detail icon
+.detailed-status .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}
+
+// status scope
+.status__visibility-icon .fa,
+.account__header__tabs__name .fa {
+    font-size: 16px;
+    vertical-align: text-bottom;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/media.scss b/app/javascript/styles/y-zu-light/theme/media.scss
new file mode 100644
index 000000000..b8ac12414
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/media.scss
@@ -0,0 +1,126 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery {
+    border-radius: $media-radius;
+
+    &__item { border-radius: $media-radius }
+}
+
+.media-modal {
+    &__nav {
+        background: $media-icon-bg-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
+    }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+
+    &__close {
+        &.icon-button {
+            background: transparent;
+            color: $media-icon-color;
+            font-size: 24px !important;
+            width: 24px !important;
+            height: 24px !important;
+            padding: 8px;
+            box-sizing: content-box;
+            line-height: normal !important;
+    
+            &:hover {
+                background: $media-icon-bg-hover-color;
+                color: $media-icon-hover-color;
+            }
+    
+            .fa-fw {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
+    &__meta {
+        bottom: 24px;
+
+        a { color: $media-icon-color }
+    }
+
+    &__overlay {
+        .picture-in-picture__footer .icon-button {
+            color: $media-icon-color;
+
+            &:active,
+            &:focus,
+            &:hover {
+                color: $media-icon-hover-color;
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            @include material-transition;
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            @include material-transition;
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/modal.scss b/app/javascript/styles/y-zu-light/theme/modal.scss
new file mode 100644
index 000000000..93e5b24c1
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/modal.scss
@@ -0,0 +1,104 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+    @include shadow-24dp;
+    background: $card-bg-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-bg-color;
+        padding: 8px;
+    }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.actions-modal {
+    @include shadow-24dp;
+    background: $card-bg-color;
+    border-radius: $card-radius;
+
+    ul li:not(:empty) a {
+        color: $ui-text-color;
+        font-size: 16px;
+
+        &:hover {
+            background: $card-bg-hover-color;
+            color: $ui-text-color;
+        }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-bg-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
+}
+
+.report-modal {
+    @include shadow-24dp;
+    background: $card-bg-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__target {
+        padding: 24px;
+        text-align: left;
+        font-weight: bold;
+    }
+
+    &__container {
+        border-top: none;
+    }
+
+    &__comment {
+        border-right: none;
+
+        .setting-text-label { color: $ui-text-color }
+    }
+}
+
+.embed-modal .embed-modal__container {
+    padding: 0 24px 24px 24px;
+
+    .hint {
+        margin-bottom: 16px;
+        color: $secondary-text-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/responsive.scss b/app/javascript/styles/y-zu-light/theme/responsive.scss
new file mode 100644
index 000000000..8618f7ed7
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/responsive.scss
@@ -0,0 +1,110 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+
+        span {
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+    width: $fab-size;
+    height: $fab-size;
+    bottom: 16px;
+    right: 16px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    .column { margin: 0 !important }
+    .search__input { padding: 16px 46px }
+
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// small size screen
+@media screen and (max-width: 415px) {
+    .public-layout { padding-top: 64px }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels {
+        &__main {
+            @include shadow-1dp;
+            padding: 0;
+        }
+
+        &__pane { padding: 0 16px }
+    }
+}
+
+//single column mode
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-bg-hover-color;
+            border-bottom-color: transparent;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-bg-focus-color;
+            border-bottom-color: $tab-bg-color;
+        }
+
+        &.active { border-bottom-color: $tab-indicator-active-color }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/statuses.scss b/app/javascript/styles/y-zu-light/theme/statuses.scss
new file mode 100644
index 000000000..7e4374014
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/statuses.scss
@@ -0,0 +1,292 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 4px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: $name-font-size;
+        padding-right: 4px;
+    }
+
+    &__relative-time { color: $info-text-color }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__avatar {
+        left: 12px;
+        top: 12px;
+    }
+
+    &__content {
+        font-size: $status-font-size;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        p { margin-bottom: 16px }
+
+        .status__content__spoiler-link {
+            background: transparent;
+
+            &:hover { background: $text-button-hover-color }
+
+            &:focus { background: $text-button-focus-color }
+        }
+
+        &__spoiler-link {
+            border: 0;
+            color: $text-button-color;
+        }
+
+        &__read-more-button {
+            font-size: 14px;
+            color: $text-button-color;
+            border-radius: $button-radius;
+            padding: 4px 6px;
+
+            &:hover {
+                background: $text-button-hover-color;
+                text-decoration: none;
+            }
+
+            &:focus { background: $text-button-focus-color }
+        }
+    }
+
+    &__action-bar {
+        margin-top: 4px;
+
+        &__counter {
+            margin-right: 6px;
+
+            &__label {
+                font-size: 14px;
+                color: $info-text-color;
+            }
+        }
+    }
+
+    &__action-bar-button {
+        margin-right: 4px;
+
+        &.icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &--with-counter {
+                margin-right: 4px;
+                width: auto !important;
+
+                &:hover { background: transparent }
+            }
+        }
+    }
+
+    &__action-bar-dropdown {
+        width: 36px !important;
+        height: 36px !important;
+        box-sizing: content-box;
+
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &.active {
+                color: $icon-hover-color;
+                background: $icon-bg-active-color;
+            }
+
+            &:hover {
+                color:$icon-hover-color;
+                background: $icon-bg-hover-color;
+            }
+        }
+    }
+
+    &__prepend {
+        color: $secondary-text-color;
+        margin-left: 64px;
+
+        .status__display-name strong { color: $secondary-text-color }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+
+    &__visibility-icon { color: $icon-color }
+}
+
+.status-card {
+    color: $icon-color;
+    border-color: $border-color;
+    outline: none;
+    margin-top: 16px;
+
+    &__image {
+        background: transparent;
+
+        &>.fa {
+            font-size: 26px;
+        }
+    }
+
+    &__title {
+        color: $primary-text-color;
+        margin-bottom: 6px;
+    }
+
+    &__description { color: $secondary-text-color }
+
+    &__actions {
+        &>div {
+            background: $media-icon-bg-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        background: transparent;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &.horizontal {
+        border-radius: 0;
+        
+        .status-card {
+            &__image-preview { border-radius: 0 }
+
+            &__image-image { border-radius: 0 }
+        }
+    }
+}
+
+a.status-card {
+    &:hover { background-color: $card-bg-color }
+}
+
+.embed .status,
+.public-layout .status { padding: 16px 16px 16px 80px }
+
+// Detailed status in mobile
+.status.light {
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+    background: $card-bg-color;
+    padding: 16px;
+
+    &.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__meta {
+        margin-top: 16px;
+        color: $info-text-color;
+    }
+
+    &__action-bar {
+        background: $card-bg-color;
+        border-top: none;
+        border-bottom: 1px solid $border-color;
+        padding: 8px 0;
+    }
+
+    &__action-bar-dropdown {
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+
+            &.active {
+                color: $icon-hover-color;
+                background: $icon-bg-active-color;
+            }
+        }
+    }
+
+    &__button {
+        .icon-button {
+            @include icon-button;
+            padding: 8px;
+            box-sizing: content-box;
+        }
+    }
+
+    .button.logo-button {
+        margin-bottom: 16px;
+        line-height: 36px;
+    }
+}
+
+// search user trends
+.display-name {
+    &__html { color: $primary-text-color }
+    &__account { color: $secondary-text-color }
+}
+
+.activity-stream {
+    @include shadow-1dp;
+    margin-bottom: 16px;
+    border-radius: $card-radius;
+
+    .entry {
+        background: $card-bg-color;
+
+        &:first-child {
+            .detailed-status,
+            .load-more,
+            .status { border-radius: $card-radius $card-radius 0 0 }
+        }
+    }
+}
+
+.entry.entry-center { border-bottom: 1px solid $border-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/theme.scss b/app/javascript/styles/y-zu-light/theme/theme.scss
new file mode 100644
index 000000000..367893682
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/theme.scss
@@ -0,0 +1,10 @@
+/*
+* Mastodon Material 0.2.1
+* Author: Rintan, Genbu Project
+* Copyright (C) 2020 Rintan, Genbu Project
+*/
+
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/variables.scss b/app/javascript/styles/y-zu-light/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/y-zu-light/theme/widgets.scss b/app/javascript/styles/y-zu-light/theme/widgets.scss
new file mode 100644
index 000000000..4abdfbae9
--- /dev/null
+++ b/app/javascript/styles/y-zu-light/theme/widgets.scss
@@ -0,0 +1,32 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.hero-widget {
+    @include shadow-2dp;
+    margin-bottom: 16px;
+
+    &__img {
+        border-radius: $card-radius $card-radius 0 0;
+        background: $card-bg-color;
+
+        img { border-radius: $card-radius $card-radius 0 0 }
+    }
+
+    &__text {
+        background: $card-bg-color;
+        padding: 16px;
+        color: $primary-text-color;
+        border-radius: 0 0 $card-radius $card-radius;
+    }
+}
+
+.endorsements-widget {
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+}
+
+.trends-widget h4 { color: $section-text-color }
\ No newline at end of file
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ecc3c9e32..f28c0894b 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1268,6 +1268,8 @@ en:
     mastodon-material-light: Mastodon Material (Light)
     mastodon-material-auto: Mastodon Material (Auto)
     plus: Plus
+    y-zu-dark: Y-zu (Dark)
+    y-zu-light: Y-zu (Light)
   time:
     formats:
       default: "%b %d, %Y, %H:%M"
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index fc5d13698..c74a30910 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -1247,6 +1247,8 @@ ja:
     mastodon-material-light: Mastodon Material (ライト)
     mastodon-material-auto: Mastodon Material (自動)
     plus: Plus
+    y-zu-dark: Y-zu (ダーク)
+    y-zu-light: Y-zu (ライト)
   time:
     formats:
       default: "%Y年%m月%d日 %H:%M"
diff --git a/config/themes.yml b/config/themes.yml
index ff3d800aa..df530bd65 100644
--- a/config/themes.yml
+++ b/config/themes.yml
@@ -12,3 +12,5 @@ mastodon-material-dark: styles/mastodon-material-dark.scss
 mastodon-material-light: styles/mastodon-material-light.scss
 mastodon-material-auto: styles/mastodon-material-auto.scss
 plus: styles/plus.scss
+y-zu-dark: styles/y-zu-dark.scss
+y-zu-light: styles/y-zu-light.scss