diff --git a/app/javascript/styles/material-v1-dark.scss b/app/javascript/styles/material-v1-dark.scss
new file mode 100644
index 00000000000000..b1646b3df98782
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark.scss
@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+//@import 'application';
+@import 'material-v1-dark/account';
+@import 'material-v1-dark/basics';
+@import 'material-v1-dark/button';
+//@import 'material-v1-dark/cards';
+@import 'material-v1-dark/columns';
+@import 'material-v1-dark/components';
+@import 'material-v1-dark/config';
+@import 'material-v1-dark/control';
+@import 'material-v1-dark/emoji-picker';
+@import 'material-v1-dark/icons';
+@import 'material-v1-dark/material-icons';
+@import 'material-v1-dark/media';
+@import 'material-v1-dark/mobile';
+@import 'material-v1-dark/modal';
+@import 'material-v1-dark/statuses';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/_mixins.scss b/app/javascript/styles/material-v1-dark/_mixins.scss
new file mode 100644
index 00000000000000..5f573e33971985
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/_mixins.scss
@@ -0,0 +1,25 @@
+@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 non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
diff --git a/app/javascript/styles/material-v1-dark/account.scss b/app/javascript/styles/material-v1-dark/account.scss
new file mode 100644
index 00000000000000..2d8f2f210e8684
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/account.scss
@@ -0,0 +1,139 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name,
+    .account__display-name strong { color: $secondary-text-color }
+
+    &__avatar {
+        border-radius: $avater-radius;
+        width: 40px;
+        height: 40px;
+
+        &-overlay-base {
+            border-radius: 50%;
+            width: 44px;
+            height: 44px;
+            background-size: 44px;
+        }
+    }
+
+    &__header {
+        &__bar {
+            background: $card-background-color;
+            padding: 8px;
+            border-bottom: 1px solid $border-color;
+
+            .avatar .account__avatar { border: none }
+        }
+
+        &__tabs {
+            padding: 8px;
+
+            &__name {
+                padding: 8px;
+
+                h1 {
+                    color: $primary-text-color;
+
+                    small { color: $secondary-text-color }
+                }
+            }
+
+            &__buttons {
+                .icon-button {
+                    border: none;
+                    border-radius: 50%;
+                    padding: 0;
+                }
+            }
+        }
+
+        &__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-background-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-background-inactive-color;
+                    }
+
+                    dd { color: $primary-text-color }
+                }
+            }
+        }
+    }
+
+    &__section-headline {
+        background: $card-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $secondary-text-color;
+
+            &.active {
+                color: $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-color;
+
+                &:before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/basics.scss b/app/javascript/styles/material-v1-dark/basics.scss
new file mode 100644
index 00000000000000..5c7c3dc04437d7
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/basics.scss
@@ -0,0 +1,24 @@
+@charset "UTF-8";
+@import 'config';
+
+
+body { background: $background-color }
+
+// 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/material-v1-dark/button.scss b/app/javascript/styles/material-v1-dark/button.scss
new file mode 100644
index 00000000000000..6bb6bfa299184d
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/button.scss
@@ -0,0 +1,78 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.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;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background-color: $icon-background-hover-color;
+        }
+    }
+
+    &:hover {
+        color: $icon-button-hover-color;
+        background-color: $icon-background-hover-color;
+    }
+
+    &:active,
+    &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+    font-size: 12px;
+
+    &:hover {
+        background-color: $icon-background-hover-color;
+        color: $icon-button-hover-color;
+    }
+}
+
+.button,
+.button:active,
+.button:focus {
+    background-color: $contained-button-color;
+    border-radius: $button-radius;
+}
+
+.button:hover {
+    @include shadow-2dp;
+    background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+    background: $contained-button-color;
+    margin: 2px;
+
+    &:hover { background: $contained-button-hover-color }
+
+    .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.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 }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/cards.scss b/app/javascript/styles/material-v1-dark/cards.scss
new file mode 100644
index 00000000000000..96988f2c9df943
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/cards.scss
@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+}
+
+.status {
+    border-bottom: 0 !important;
+    border-radius: $card-radius;
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+}
+
+.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/material-v1-dark/color/mastodon-dark.scss b/app/javascript/styles/material-v1-dark/color/mastodon-dark.scss
new file mode 100644
index 00000000000000..14ef148f4651b3
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/mastodon-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #444b5d;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $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($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-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-background-hover-color: transparentize($tab-indicator-color, 0.7);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/mastodon-light.scss b/app/javascript/styles/material-v1-dark/color/mastodon-light.scss
new file mode 100644
index 00000000000000..62a064b877d7ef
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/mastodon-light.scss
@@ -0,0 +1,106 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: darken($background-color, 4%);
+$icon-background-active-color: darken($background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $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: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// 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: $background-color;
+
+// Tab color
+$tab-indicator-color: $primary-color;
+$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%);
+$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/v1-dark.scss b/app/javascript/styles/material-v1-dark/color/v1-dark.scss
new file mode 100644
index 00000000000000..f6168a35e7209a
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/v1-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: #5f6368;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/v1-light.scss b/app/javascript/styles/material-v1-dark/color/v1-light.scss
new file mode 100644
index 00000000000000..3a09d2a5db47b0
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/v1-light.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-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($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/v2-dark.scss b/app/javascript/styles/material-v1-dark/color/v2-dark.scss
new file mode 100644
index 00000000000000..aae145b3b065f7
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/v2-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: #1e1e1e;
+$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: #5f6368;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-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: $primary-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/color/v2-light.scss b/app/javascript/styles/material-v1-dark/color/v2-light.scss
new file mode 100644
index 00000000000000..99d5025439b3b9
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/color/v2-light.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $secondary-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-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($background-color, 30%);
+$scroll-bar-thumb-active-color: darken($background-color, 38%);
+
+// App bar color
+$top-bar-color: $background-color;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $primary-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/columns.scss b/app/javascript/styles/material-v1-dark/columns.scss
new file mode 100644
index 00000000000000..dc61167dcfc87d
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/columns.scss
@@ -0,0 +1,391 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-background-color }
+
+    &:last-child { box-shadow: none }
+}
+
+.column-header {
+    background: $top-bar-color;
+    border-radius: $bar-radius;
+
+    > button {
+        padding: 16px 0 16px 16px;
+        color: $top-bar-text-color;
+    }
+
+    &.active {
+        .column-header__icon {
+            color: $secondary-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        margin: 8px 10px;
+        padding: 10px 12px;
+        border-radius: 50%;
+
+        &.active {
+            color: $top-bar-icon-active-color;
+            background: $icon-background-active-color;
+
+            &:hover {
+                color: $top-bar-icon-hover-color;
+                background: $icon-background-hover-color;
+            }
+        }
+
+        &:hover {
+            color: $top-bar-icon-hover-color;
+            background: $icon-background-hover-color;
+        }
+    }
+
+    &__setting-btn {
+        color: $icon-button-color;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background: $icon-background-hover-color;
+        }
+    }
+
+    &__setting-arrows { font-size: 16px }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &:before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        border-top: 1px solid $border-color;
+
+        &-inner {
+            background: $card-background-color;
+            padding: 16px;
+        }
+
+        &.collapsed { border-top: none }
+    }
+
+    &__back-button {
+        background: $top-bar-color;
+        color: $icon-color;
+        padding: 8px;
+        margin: auto 0;
+        border-radius: 50%;
+
+        span { display: none }
+    }
+}
+
+.column-subheading {
+    color: $section-text-color;
+    background: $background-color;
+    padding: 12px 16px;
+    border-top: 1px solid $border-color;
+}
+
+.column-link {
+    color: $ui-text-color;
+    background: $background-color;
+    padding: 16px;
+    border-radius: $nav-drawer-item-radius;
+
+    &:hover { background: $list-background-hover-color }
+
+    &:active,
+    &:focus { background: $list-background-active-color }
+
+    &__icon {
+        margin-right: 32px;
+        font-size: 20px;
+    }
+
+    &--transparent {
+        &.active {
+            color: $ui-text-color;
+            background: $menu-background-active-color;
+
+            &:hover { background: $menu-background-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;
+    }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $search-bar-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-color }
+
+    &:focus {
+        @include shadow-1dp;
+        background: $search-bar-focus-color;
+    }
+}
+
+.empty-column-indicator {
+    color: $secondary-text-color;
+    background: $card-background-color;
+    font-size: 16px;
+}
+
+.conversation {
+    border-bottom: 1px solid $border-color;
+    padding: 12px;
+    background: $list-background-inactive-color;
+
+    &--unread {
+        background: $list-background-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;
+        }
+    }
+}
+
+.muted {
+    .status {
+        &__content {
+            color: $primary-text-color;
+    
+            p { color: $primary-text-color }
+    
+            a { color: $secondary-text-color }
+        }
+
+        &__display-name strong { color: $primary-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-background-hover-color }
+}
+
+.getting-started {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__wrapper {
+        background: $background-color;
+        height: auto !important;
+        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 }
+
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+}
+
+.reactions-bar {
+    .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: $ui-text-color }
+        }
+
+        &__emoji {
+            width: 24px;
+            height: 24px;
+            margin: 4px 0 4px 2px;
+        }
+
+        &__count {
+            font-size: 16px;
+            margin: 0 8px;
+            color: $secondary-text-color;
+        }
+
+        &:hover { background: $contained-chip-hover-color }
+    }
+}
+
+.notification {
+    &__filter-bar {
+        background: $top-bar-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $top-bar-color;
+            color: $top-bar-icon-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-color;
+    
+                &:before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-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 {
+    background: transparent;
+
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.notification.notification-favourite.focusable,
+.notification.notification-follow.focusable { background: $list-background-inactive-color }
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.react-swipeable-view-container { height: auto }
+
+.tabs-bar__wrapper { background: transparent }
+
+.attachment-list__list a { color: $secondary-text-color }
+
+.focusable { background: transparent !important }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/components.scss b/app/javascript/styles/material-v1-dark/components.scss
new file mode 100644
index 00000000000000..f1e594e3c6bdfd
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/components.scss
@@ -0,0 +1,339 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.drawer {
+    &__header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        justify-content: space-around;
+    
+        a { transition: none }
+    
+        a:hover {
+            background: $icon-background-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-background-color;
+
+        &.darker { background: $card-background-color }
+
+        &__mastodon { background: $card-background-color }
+    }
+}
+
+.search {
+    &__input {
+        background: $search-bar-color;
+        color: $tips-text-color;
+        border-radius: $search-bar-radius;
+        padding: 12px 12px 12px 40px;
+
+        &:focus {
+            @include shadow-2dp;
+            background: $search-bar-focus-color;
+            color: $search-bar-text-color;
+        }
+
+        &::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: 10px;
+                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-background-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__section {
+        h5 {
+            background: $card-background-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-panel hr {
+    border-top: 1px solid $border-color;
+    margin: 8px 0;
+}
+
+.dropdown-menu {
+    @include shadow-8dp;
+    background: $menu-background-color;
+    padding: 8px 0;
+    border-radius: $menu-radius;
+
+    &__arrow { visibility: hidden }
+
+    &__item a {
+        font-size: 14px;
+        padding: 9px 16px;
+        background: $menu-background-color;
+        color: $menu-text-color;
+
+        &:hover, &:active {
+            background: $menu-background-hover-color;
+            color: $menu-text-color;
+        }
+    }
+
+    &__separator {
+        margin: 8px 0;
+        border-bottom: 1px solid $border-color;
+    }
+}
+
+.compose-form {
+    .autosuggest-textarea__textarea {
+        background: $card-background-color;
+        color: $ui-text-color;
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    .spoiler-input__input {
+        color: $ui-text-color;
+        background: $card-background-color;
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    .compose-form {
+        &__warning {
+            @include shadow-1dp;
+            color: $secondary-text-color;
+            background: $card-background-color;
+            padding: 16px;
+
+            a { color: $link-text-color }
+        }
+
+        &__modifiers {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__buttons-wrapper {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__poll-wrapper {
+            border-top: 1px solid $border-color;
+
+            ul { padding: 12px }
+
+            select {
+                color: $ui-text-color;
+                background-color: $background-color;
+                border: 0;
+
+                &:focus { border-color: $border-active-color }
+            }
+
+            .button.button-secondary {
+                box-shadow: none;
+                color: $outlined-button-color;
+                border-color: $outlined-button-color;
+
+                &:hover { background-color: $outlined-button-hover-color }
+
+                &:active { background-color: $outlined-button-active-color }
+
+                &:focus { background-color: $outlined-button-color }
+
+
+            }
+        }
+
+        &__utilBtns { padding-top: 0 }
+
+        &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+    }
+}
+
+.poll__input {
+    border: 2px solid $control-border-color;
+    width: 20px;
+    height: 20px;
+    flex: 0 0 20px;
+}
+
+.poll__text input[type=text] {
+    color: $ui-text-color;
+    background: $background-color;
+    border: 1px solid $border-color;
+    padding: 8px 12px;
+
+    &:focus { border-color: $border-active-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-background-hover-color;
+        border-radius: 50%;
+        box-shadow: none;
+
+        .icon-button { color: $icon-button-active-color }
+    }
+
+    &__dropdown {
+        @include shadow-8dp;
+        background: $menu-background-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-background-active-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+
+            &:hover {
+                background: $menu-background-active-color;
+                
+                .privacy-dropdown__option__content {
+                    color: $secondary-text-color;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &:hover {
+            background: $menu-background-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 {
+    @include shadow-1dp;
+    border-radius: $card-radius;
+    background: $card-background-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 }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/config.scss b/app/javascript/styles/material-v1-dark/config.scss
new file mode 100644
index 00000000000000..ee50da02ff44fe
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/config.scss
@@ -0,0 +1,61 @@
+@charset "UTF-8";
+
+
+// Color scheme
+@import 'color/v1-dark';
+
+
+// Layout profile
+@import 'layout/material-v1';
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@font-face {
+    font-family: "Material Icons";
+    src:
+        local("Material Icons"),
+        //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2");  // GitHub
+        //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2");  // Google Fonts
+        url("../fonts/MaterialIcons-Regular.woff2");  // Self-hosting
+}
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Favorite icon settings
+// If you exclude 'material-icons.scss', please comment out this section.
+.fa {
+    &.fa-star:before { content: "star" }  // Star
+    //&.fa-star:before { content: "favorite" }  // Heart
+    //&.fa-star:before { content: "plus_one" }  // +1
+}
+
+.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: #ffd600;  // Star
+    //color: #ff4081;  // Heart
+    //color: #db4437;  // +1
+}
+
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star:before { content: "star_border" }  // Star
+    //.fa.fa-star:before { content: "favorite_border" }  // Heart
+    //.fa.fa-star:before { content: "plus_one" }  // +1
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star:before { content: "star" }  // Star
+        //.fa.fa-star:before { content: "favorite" }  // Heart
+        //.fa.fa-star:before { content: "plus_one" }  // +1
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/control.scss b/app/javascript/styles/material-v1-dark/control.scss
new file mode 100644
index 00000000000000..7bd251291973b4
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/control.scss
@@ -0,0 +1,69 @@
+@charset "UTF-8";
+@import 'config';
+@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/material-v1-dark/emoji-picker.scss b/app/javascript/styles/material-v1-dark/emoji-picker.scss
new file mode 100644
index 00000000000000..d57c5c04198db5
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/emoji-picker.scss
@@ -0,0 +1,90 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+    }
+
+    &__modifiers__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+
+        button {
+            padding: 8px;
+        }
+    }
+}
+
+.emoji-mart {
+    width: 388px !important;
+    font-size: 14px;
+    color: $ui-text-color;
+
+    &-bar {
+        border: 0 solid $border-color;
+
+        &:first-child {
+            background: $menu-background-color;
+        }
+    }
+
+    &-anchors {
+        color: $icon-button-color;
+        padding: 0;
+    }
+
+    &-anchor {
+        padding: 10px 4px;
+
+        &-selected {
+            color: $icon-button-active-color;
+        }
+
+        &-bar {
+            background-color: $tab-indicator-color;
+        }
+
+        &:hover {
+            color: $icon-button-hover-color;
+        }
+    }
+
+    &-search {
+        background: $menu-background-color;
+
+        input {
+            outline: none;
+            padding: 8px;
+            background: $search-bar-color;
+            color: $ui-text-color;
+            border: 0;
+            border-radius: $bar-radius;
+
+            &:focus {
+                @include shadow-2dp;
+                background: $search-bar-focus-color;
+            }
+        }
+    }
+
+    &-scroll {
+        padding: 0 8px 8px;
+        background: $menu-background-color;
+    }
+
+    &-category-label span {
+        padding: 4px 6px;
+        background: $menu-background-color;
+    }
+
+    &-emoji:hover:before {
+        background-color: $icon-background-hover-color;
+    }
+
+    &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/icons.scss b/app/javascript/styles/material-v1-dark/icons.scss
new file mode 100644
index 00000000000000..6778e3d2c019f8
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/icons.scss
@@ -0,0 +1,37 @@
+@charset "UTF-8";
+@import 'config';
+@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 { vertical-align: sub }  //マテリアルアイコンを文字の高さにそろえる
+
+.fa.fa-times,
+.fa.fa-eraser { vertical-align: middle }  //↑の例外
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+.fa.fa-chevron-left.column-back-button__icon.fa-fw {
+    font-size: 20px;
+    margin-right: 16px;
+}
+
+.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/material-v1-dark/layout/material-v1.scss b/app/javascript/styles/material-v1-dark/layout/material-v1.scss
new file mode 100644
index 00000000000000..92f3692458bb54
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../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;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 0;
+
+
+// Avater cropping settings
+$avater-radius: 50%;  // Rounded cropping
+//$avater-radius: 2px  // Material v1 square
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/layout/material-v2.scss b/app/javascript/styles/material-v1-dark/layout/material-v2.scss
new file mode 100644
index 00000000000000..86d2c496fbc57c
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/layout/material-v2.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// 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;
+
+
+// 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
+// If you want to use contained-chip, please comment out below.
+.reactions-bar__item {
+    background: $outlined-chip-color !important;
+    border: 1px solid $border-color !important;
+
+    &.active { background-color: $outlined-chip-selected-color !important }
+
+    &:hover { background: $outlined-chip-hover-color !important }
+}
+.relationship-tag,
+.account-role {
+    background: $outlined-chip-color !important;
+    border: 1px solid $border-color !important;
+}
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/material-icons.scss b/app/javascript/styles/material-v1-dark/material-icons.scss
new file mode 100644
index 00000000000000..52b9594850ad35
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/material-icons.scss
@@ -0,0 +1,96 @@
+@charset "UTF-8";
+@import 'config';
+
+
+.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-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.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 {
+        font-family: "Material Icons";
+    }
+}
+
+.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" }
+    &.fa-reply-all:before { content: "reply_all" }
+    &.fa-bookmark:before { content: "bookmark" }
+    &.fa-ellipsis-h:before { content: "more_horiz" }
+    &.fa-bell: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" }
+}
+
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark:before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark:before { content: "bookmark" }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/media.scss b/app/javascript/styles/material-v1-dark/media.scss
new file mode 100644
index 00000000000000..74dfd8dcc20909
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/media.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.media-gallery { border-radius: $card-radius }
+
+.media-modal__close {
+    align-content: center;
+
+    &.icon-button {
+        background: transparent;
+        color: $media-icon-color;
+        text-align: center !important;
+        font-size: 24px !important;
+        width: 48px !important;
+        height: 48px !important;
+        border: 12px;
+
+        &:hover {
+            background: $media-icon-background-hover-color;
+            color: $media-icon-hover-color;
+        }
+
+        .fa-fw { width: 24px }
+    }
+}
+
+.icon-button.overlayed {
+    border-radius: 50%;
+    background: $media-icon-background-color;
+    color: $media-icon-color;
+
+    &:hover {
+        background: $media-icon-background-color;
+        color: $media-icon-hover-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/mobile.scss b/app/javascript/styles/material-v1-dark/mobile.scss
new file mode 100644
index 00000000000000..448f80585892c2
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/mobile.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import 'config';
+@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-color;
+            color: $tab-indicator-color;
+        }
+
+        .fa { font-size: 20px }
+    }
+
+    &__wrapper { @include shadow-4dp }
+}
+
+
+#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;
+
+    &: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 38px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-dark/modal.scss b/app/javascript/styles/material-v1-dark/modal.scss
new file mode 100644
index 00000000000000..40710fe43e2298
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/modal.scss
@@ -0,0 +1,61 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 280px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+}
+
+.actions-modal {
+    background: $card-background-color;
+    border-radius: $card-radius;
+
+    ul li:not(:empty) a {
+        color: $ui-text-color;
+        font-size: 16px;
+
+        &:hover { background: $card-background-hover-color }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+}
+
+.report-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__target {
+        padding: 24px;
+        text-align: left;
+        font-weight: bold;
+    }
+
+    &__container {
+        border-top: none;
+    }
+}
+
+.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/material-v1-dark/statuses.scss b/app/javascript/styles/material-v1-dark/statuses.scss
new file mode 100644
index 00000000000000..c569b3b924570c
--- /dev/null
+++ b/app/javascript/styles/material-v1-dark/statuses.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: 16px;
+        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: 16px;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .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 {
+        &__counter__label {
+            font-size: 14px;
+            color: $info-text-color;
+        }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.status-card {
+    color: $icon-color;
+    border-color: $border-color;
+    outline: none;
+
+    &__image {
+        background: transparent;
+
+        &>.fa {
+            font-size: 26px;
+        }
+    }
+
+    &__title {
+        color: $primary-text-color;
+        margin-bottom: 6px;
+    }
+
+    &__description { color: $secondary-text-color }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+.status.light {
+    .display-name span { color: $info-text-color }
+}
+
+.detailed-status {
+    background: $card-background-color;
+    padding: 16px;
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__meta {
+        margin-top: 16px;
+        color: $info-text-color;
+    }
+
+    &__action-bar {
+        background: $card-background-color;
+        border-top: none;
+        border-bottom: 1px solid $border-color;
+        padding: 12px 0;
+    }
+
+    &__button {
+        .icon-button { font-size: 20px !important }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light.scss b/app/javascript/styles/material-v1-light.scss
new file mode 100644
index 00000000000000..c75295e71e9313
--- /dev/null
+++ b/app/javascript/styles/material-v1-light.scss
@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+//@import 'application';
+@import 'material-v1-light/account';
+@import 'material-v1-light/basics';
+@import 'material-v1-light/button';
+//@import 'material-v1-light/cards';
+@import 'material-v1-light/columns';
+@import 'material-v1-light/components';
+@import 'material-v1-light/config';
+@import 'material-v1-light/control';
+@import 'material-v1-light/emoji-picker';
+@import 'material-v1-light/icons';
+@import 'material-v1-light/material-icons';
+@import 'material-v1-light/media';
+@import 'material-v1-light/mobile';
+@import 'material-v1-light/modal';
+@import 'material-v1-light/statuses';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/_mixins.scss b/app/javascript/styles/material-v1-light/_mixins.scss
new file mode 100644
index 00000000000000..5f573e33971985
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/_mixins.scss
@@ -0,0 +1,25 @@
+@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 non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
diff --git a/app/javascript/styles/material-v1-light/account.scss b/app/javascript/styles/material-v1-light/account.scss
new file mode 100644
index 00000000000000..2d8f2f210e8684
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/account.scss
@@ -0,0 +1,139 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name,
+    .account__display-name strong { color: $secondary-text-color }
+
+    &__avatar {
+        border-radius: $avater-radius;
+        width: 40px;
+        height: 40px;
+
+        &-overlay-base {
+            border-radius: 50%;
+            width: 44px;
+            height: 44px;
+            background-size: 44px;
+        }
+    }
+
+    &__header {
+        &__bar {
+            background: $card-background-color;
+            padding: 8px;
+            border-bottom: 1px solid $border-color;
+
+            .avatar .account__avatar { border: none }
+        }
+
+        &__tabs {
+            padding: 8px;
+
+            &__name {
+                padding: 8px;
+
+                h1 {
+                    color: $primary-text-color;
+
+                    small { color: $secondary-text-color }
+                }
+            }
+
+            &__buttons {
+                .icon-button {
+                    border: none;
+                    border-radius: 50%;
+                    padding: 0;
+                }
+            }
+        }
+
+        &__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-background-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-background-inactive-color;
+                    }
+
+                    dd { color: $primary-text-color }
+                }
+            }
+        }
+    }
+
+    &__section-headline {
+        background: $card-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $secondary-text-color;
+
+            &.active {
+                color: $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-color;
+
+                &:before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/basics.scss b/app/javascript/styles/material-v1-light/basics.scss
new file mode 100644
index 00000000000000..5c7c3dc04437d7
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/basics.scss
@@ -0,0 +1,24 @@
+@charset "UTF-8";
+@import 'config';
+
+
+body { background: $background-color }
+
+// 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/material-v1-light/button.scss b/app/javascript/styles/material-v1-light/button.scss
new file mode 100644
index 00000000000000..6bb6bfa299184d
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/button.scss
@@ -0,0 +1,78 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.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;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background-color: $icon-background-hover-color;
+        }
+    }
+
+    &:hover {
+        color: $icon-button-hover-color;
+        background-color: $icon-background-hover-color;
+    }
+
+    &:active,
+    &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+    font-size: 12px;
+
+    &:hover {
+        background-color: $icon-background-hover-color;
+        color: $icon-button-hover-color;
+    }
+}
+
+.button,
+.button:active,
+.button:focus {
+    background-color: $contained-button-color;
+    border-radius: $button-radius;
+}
+
+.button:hover {
+    @include shadow-2dp;
+    background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+    background: $contained-button-color;
+    margin: 2px;
+
+    &:hover { background: $contained-button-hover-color }
+
+    .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.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 }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/cards.scss b/app/javascript/styles/material-v1-light/cards.scss
new file mode 100644
index 00000000000000..96988f2c9df943
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/cards.scss
@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+}
+
+.status {
+    border-bottom: 0 !important;
+    border-radius: $card-radius;
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+}
+
+.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/material-v1-light/color/mastodon-dark.scss b/app/javascript/styles/material-v1-light/color/mastodon-dark.scss
new file mode 100644
index 00000000000000..14ef148f4651b3
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/mastodon-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #444b5d;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $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($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-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-background-hover-color: transparentize($tab-indicator-color, 0.7);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/mastodon-light.scss b/app/javascript/styles/material-v1-light/color/mastodon-light.scss
new file mode 100644
index 00000000000000..62a064b877d7ef
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/mastodon-light.scss
@@ -0,0 +1,106 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: darken($background-color, 4%);
+$icon-background-active-color: darken($background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $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: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// 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: $background-color;
+
+// Tab color
+$tab-indicator-color: $primary-color;
+$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%);
+$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/v1-dark.scss b/app/javascript/styles/material-v1-light/color/v1-dark.scss
new file mode 100644
index 00000000000000..f6168a35e7209a
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/v1-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: #5f6368;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/v1-light.scss b/app/javascript/styles/material-v1-light/color/v1-light.scss
new file mode 100644
index 00000000000000..3a09d2a5db47b0
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/v1-light.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-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($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/v2-dark.scss b/app/javascript/styles/material-v1-light/color/v2-dark.scss
new file mode 100644
index 00000000000000..aae145b3b065f7
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/v2-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: #1e1e1e;
+$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: #5f6368;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-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: $primary-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/color/v2-light.scss b/app/javascript/styles/material-v1-light/color/v2-light.scss
new file mode 100644
index 00000000000000..99d5025439b3b9
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/color/v2-light.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $secondary-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-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($background-color, 30%);
+$scroll-bar-thumb-active-color: darken($background-color, 38%);
+
+// App bar color
+$top-bar-color: $background-color;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $primary-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/columns.scss b/app/javascript/styles/material-v1-light/columns.scss
new file mode 100644
index 00000000000000..dc61167dcfc87d
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/columns.scss
@@ -0,0 +1,391 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-background-color }
+
+    &:last-child { box-shadow: none }
+}
+
+.column-header {
+    background: $top-bar-color;
+    border-radius: $bar-radius;
+
+    > button {
+        padding: 16px 0 16px 16px;
+        color: $top-bar-text-color;
+    }
+
+    &.active {
+        .column-header__icon {
+            color: $secondary-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        margin: 8px 10px;
+        padding: 10px 12px;
+        border-radius: 50%;
+
+        &.active {
+            color: $top-bar-icon-active-color;
+            background: $icon-background-active-color;
+
+            &:hover {
+                color: $top-bar-icon-hover-color;
+                background: $icon-background-hover-color;
+            }
+        }
+
+        &:hover {
+            color: $top-bar-icon-hover-color;
+            background: $icon-background-hover-color;
+        }
+    }
+
+    &__setting-btn {
+        color: $icon-button-color;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background: $icon-background-hover-color;
+        }
+    }
+
+    &__setting-arrows { font-size: 16px }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &:before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        border-top: 1px solid $border-color;
+
+        &-inner {
+            background: $card-background-color;
+            padding: 16px;
+        }
+
+        &.collapsed { border-top: none }
+    }
+
+    &__back-button {
+        background: $top-bar-color;
+        color: $icon-color;
+        padding: 8px;
+        margin: auto 0;
+        border-radius: 50%;
+
+        span { display: none }
+    }
+}
+
+.column-subheading {
+    color: $section-text-color;
+    background: $background-color;
+    padding: 12px 16px;
+    border-top: 1px solid $border-color;
+}
+
+.column-link {
+    color: $ui-text-color;
+    background: $background-color;
+    padding: 16px;
+    border-radius: $nav-drawer-item-radius;
+
+    &:hover { background: $list-background-hover-color }
+
+    &:active,
+    &:focus { background: $list-background-active-color }
+
+    &__icon {
+        margin-right: 32px;
+        font-size: 20px;
+    }
+
+    &--transparent {
+        &.active {
+            color: $ui-text-color;
+            background: $menu-background-active-color;
+
+            &:hover { background: $menu-background-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;
+    }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $search-bar-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-color }
+
+    &:focus {
+        @include shadow-1dp;
+        background: $search-bar-focus-color;
+    }
+}
+
+.empty-column-indicator {
+    color: $secondary-text-color;
+    background: $card-background-color;
+    font-size: 16px;
+}
+
+.conversation {
+    border-bottom: 1px solid $border-color;
+    padding: 12px;
+    background: $list-background-inactive-color;
+
+    &--unread {
+        background: $list-background-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;
+        }
+    }
+}
+
+.muted {
+    .status {
+        &__content {
+            color: $primary-text-color;
+    
+            p { color: $primary-text-color }
+    
+            a { color: $secondary-text-color }
+        }
+
+        &__display-name strong { color: $primary-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-background-hover-color }
+}
+
+.getting-started {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__wrapper {
+        background: $background-color;
+        height: auto !important;
+        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 }
+
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+}
+
+.reactions-bar {
+    .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: $ui-text-color }
+        }
+
+        &__emoji {
+            width: 24px;
+            height: 24px;
+            margin: 4px 0 4px 2px;
+        }
+
+        &__count {
+            font-size: 16px;
+            margin: 0 8px;
+            color: $secondary-text-color;
+        }
+
+        &:hover { background: $contained-chip-hover-color }
+    }
+}
+
+.notification {
+    &__filter-bar {
+        background: $top-bar-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $top-bar-color;
+            color: $top-bar-icon-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-color;
+    
+                &:before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-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 {
+    background: transparent;
+
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.notification.notification-favourite.focusable,
+.notification.notification-follow.focusable { background: $list-background-inactive-color }
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.react-swipeable-view-container { height: auto }
+
+.tabs-bar__wrapper { background: transparent }
+
+.attachment-list__list a { color: $secondary-text-color }
+
+.focusable { background: transparent !important }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/components.scss b/app/javascript/styles/material-v1-light/components.scss
new file mode 100644
index 00000000000000..f1e594e3c6bdfd
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/components.scss
@@ -0,0 +1,339 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.drawer {
+    &__header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        justify-content: space-around;
+    
+        a { transition: none }
+    
+        a:hover {
+            background: $icon-background-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-background-color;
+
+        &.darker { background: $card-background-color }
+
+        &__mastodon { background: $card-background-color }
+    }
+}
+
+.search {
+    &__input {
+        background: $search-bar-color;
+        color: $tips-text-color;
+        border-radius: $search-bar-radius;
+        padding: 12px 12px 12px 40px;
+
+        &:focus {
+            @include shadow-2dp;
+            background: $search-bar-focus-color;
+            color: $search-bar-text-color;
+        }
+
+        &::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: 10px;
+                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-background-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__section {
+        h5 {
+            background: $card-background-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-panel hr {
+    border-top: 1px solid $border-color;
+    margin: 8px 0;
+}
+
+.dropdown-menu {
+    @include shadow-8dp;
+    background: $menu-background-color;
+    padding: 8px 0;
+    border-radius: $menu-radius;
+
+    &__arrow { visibility: hidden }
+
+    &__item a {
+        font-size: 14px;
+        padding: 9px 16px;
+        background: $menu-background-color;
+        color: $menu-text-color;
+
+        &:hover, &:active {
+            background: $menu-background-hover-color;
+            color: $menu-text-color;
+        }
+    }
+
+    &__separator {
+        margin: 8px 0;
+        border-bottom: 1px solid $border-color;
+    }
+}
+
+.compose-form {
+    .autosuggest-textarea__textarea {
+        background: $card-background-color;
+        color: $ui-text-color;
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    .spoiler-input__input {
+        color: $ui-text-color;
+        background: $card-background-color;
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    .compose-form {
+        &__warning {
+            @include shadow-1dp;
+            color: $secondary-text-color;
+            background: $card-background-color;
+            padding: 16px;
+
+            a { color: $link-text-color }
+        }
+
+        &__modifiers {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__buttons-wrapper {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__poll-wrapper {
+            border-top: 1px solid $border-color;
+
+            ul { padding: 12px }
+
+            select {
+                color: $ui-text-color;
+                background-color: $background-color;
+                border: 0;
+
+                &:focus { border-color: $border-active-color }
+            }
+
+            .button.button-secondary {
+                box-shadow: none;
+                color: $outlined-button-color;
+                border-color: $outlined-button-color;
+
+                &:hover { background-color: $outlined-button-hover-color }
+
+                &:active { background-color: $outlined-button-active-color }
+
+                &:focus { background-color: $outlined-button-color }
+
+
+            }
+        }
+
+        &__utilBtns { padding-top: 0 }
+
+        &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+    }
+}
+
+.poll__input {
+    border: 2px solid $control-border-color;
+    width: 20px;
+    height: 20px;
+    flex: 0 0 20px;
+}
+
+.poll__text input[type=text] {
+    color: $ui-text-color;
+    background: $background-color;
+    border: 1px solid $border-color;
+    padding: 8px 12px;
+
+    &:focus { border-color: $border-active-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-background-hover-color;
+        border-radius: 50%;
+        box-shadow: none;
+
+        .icon-button { color: $icon-button-active-color }
+    }
+
+    &__dropdown {
+        @include shadow-8dp;
+        background: $menu-background-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-background-active-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+
+            &:hover {
+                background: $menu-background-active-color;
+                
+                .privacy-dropdown__option__content {
+                    color: $secondary-text-color;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &:hover {
+            background: $menu-background-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 {
+    @include shadow-1dp;
+    border-radius: $card-radius;
+    background: $card-background-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 }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/config.scss b/app/javascript/styles/material-v1-light/config.scss
new file mode 100644
index 00000000000000..dd25f6bf7241b2
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/config.scss
@@ -0,0 +1,61 @@
+@charset "UTF-8";
+
+
+// Color scheme
+@import 'color/v1-light';
+
+
+// Layout profile
+@import 'layout/material-v1';
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@font-face {
+    font-family: "Material Icons";
+    src:
+        local("Material Icons"),
+        //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2");  // GitHub
+        //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2");  // Google Fonts
+        url("../fonts/MaterialIcons-Regular.woff2");  // Self-hosting
+}
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Favorite icon settings
+// If you exclude 'material-icons.scss', please comment out this section.
+.fa {
+    &.fa-star:before { content: "star" }  // Star
+    //&.fa-star:before { content: "favorite" }  // Heart
+    //&.fa-star:before { content: "plus_one" }  // +1
+}
+
+.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: #ffd600;  // Star
+    //color: #ff4081;  // Heart
+    //color: #db4437;  // +1
+}
+
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star:before { content: "star_border" }  // Star
+    //.fa.fa-star:before { content: "favorite_border" }  // Heart
+    //.fa.fa-star:before { content: "plus_one" }  // +1
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star:before { content: "star" }  // Star
+        //.fa.fa-star:before { content: "favorite" }  // Heart
+        //.fa.fa-star:before { content: "plus_one" }  // +1
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/control.scss b/app/javascript/styles/material-v1-light/control.scss
new file mode 100644
index 00000000000000..7bd251291973b4
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/control.scss
@@ -0,0 +1,69 @@
+@charset "UTF-8";
+@import 'config';
+@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/material-v1-light/emoji-picker.scss b/app/javascript/styles/material-v1-light/emoji-picker.scss
new file mode 100644
index 00000000000000..d57c5c04198db5
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/emoji-picker.scss
@@ -0,0 +1,90 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+    }
+
+    &__modifiers__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+
+        button {
+            padding: 8px;
+        }
+    }
+}
+
+.emoji-mart {
+    width: 388px !important;
+    font-size: 14px;
+    color: $ui-text-color;
+
+    &-bar {
+        border: 0 solid $border-color;
+
+        &:first-child {
+            background: $menu-background-color;
+        }
+    }
+
+    &-anchors {
+        color: $icon-button-color;
+        padding: 0;
+    }
+
+    &-anchor {
+        padding: 10px 4px;
+
+        &-selected {
+            color: $icon-button-active-color;
+        }
+
+        &-bar {
+            background-color: $tab-indicator-color;
+        }
+
+        &:hover {
+            color: $icon-button-hover-color;
+        }
+    }
+
+    &-search {
+        background: $menu-background-color;
+
+        input {
+            outline: none;
+            padding: 8px;
+            background: $search-bar-color;
+            color: $ui-text-color;
+            border: 0;
+            border-radius: $bar-radius;
+
+            &:focus {
+                @include shadow-2dp;
+                background: $search-bar-focus-color;
+            }
+        }
+    }
+
+    &-scroll {
+        padding: 0 8px 8px;
+        background: $menu-background-color;
+    }
+
+    &-category-label span {
+        padding: 4px 6px;
+        background: $menu-background-color;
+    }
+
+    &-emoji:hover:before {
+        background-color: $icon-background-hover-color;
+    }
+
+    &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/icons.scss b/app/javascript/styles/material-v1-light/icons.scss
new file mode 100644
index 00000000000000..6778e3d2c019f8
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/icons.scss
@@ -0,0 +1,37 @@
+@charset "UTF-8";
+@import 'config';
+@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 { vertical-align: sub }  //マテリアルアイコンを文字の高さにそろえる
+
+.fa.fa-times,
+.fa.fa-eraser { vertical-align: middle }  //↑の例外
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+.fa.fa-chevron-left.column-back-button__icon.fa-fw {
+    font-size: 20px;
+    margin-right: 16px;
+}
+
+.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/material-v1-light/layout/material-v1.scss b/app/javascript/styles/material-v1-light/layout/material-v1.scss
new file mode 100644
index 00000000000000..92f3692458bb54
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../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;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 0;
+
+
+// Avater cropping settings
+$avater-radius: 50%;  // Rounded cropping
+//$avater-radius: 2px  // Material v1 square
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/layout/material-v2.scss b/app/javascript/styles/material-v1-light/layout/material-v2.scss
new file mode 100644
index 00000000000000..86d2c496fbc57c
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/layout/material-v2.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// 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;
+
+
+// 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
+// If you want to use contained-chip, please comment out below.
+.reactions-bar__item {
+    background: $outlined-chip-color !important;
+    border: 1px solid $border-color !important;
+
+    &.active { background-color: $outlined-chip-selected-color !important }
+
+    &:hover { background: $outlined-chip-hover-color !important }
+}
+.relationship-tag,
+.account-role {
+    background: $outlined-chip-color !important;
+    border: 1px solid $border-color !important;
+}
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/material-icons.scss b/app/javascript/styles/material-v1-light/material-icons.scss
new file mode 100644
index 00000000000000..52b9594850ad35
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/material-icons.scss
@@ -0,0 +1,96 @@
+@charset "UTF-8";
+@import 'config';
+
+
+.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-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.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 {
+        font-family: "Material Icons";
+    }
+}
+
+.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" }
+    &.fa-reply-all:before { content: "reply_all" }
+    &.fa-bookmark:before { content: "bookmark" }
+    &.fa-ellipsis-h:before { content: "more_horiz" }
+    &.fa-bell: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" }
+}
+
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark:before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark:before { content: "bookmark" }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/media.scss b/app/javascript/styles/material-v1-light/media.scss
new file mode 100644
index 00000000000000..74dfd8dcc20909
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/media.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.media-gallery { border-radius: $card-radius }
+
+.media-modal__close {
+    align-content: center;
+
+    &.icon-button {
+        background: transparent;
+        color: $media-icon-color;
+        text-align: center !important;
+        font-size: 24px !important;
+        width: 48px !important;
+        height: 48px !important;
+        border: 12px;
+
+        &:hover {
+            background: $media-icon-background-hover-color;
+            color: $media-icon-hover-color;
+        }
+
+        .fa-fw { width: 24px }
+    }
+}
+
+.icon-button.overlayed {
+    border-radius: 50%;
+    background: $media-icon-background-color;
+    color: $media-icon-color;
+
+    &:hover {
+        background: $media-icon-background-color;
+        color: $media-icon-hover-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/mobile.scss b/app/javascript/styles/material-v1-light/mobile.scss
new file mode 100644
index 00000000000000..448f80585892c2
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/mobile.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import 'config';
+@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-color;
+            color: $tab-indicator-color;
+        }
+
+        .fa { font-size: 20px }
+    }
+
+    &__wrapper { @include shadow-4dp }
+}
+
+
+#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;
+
+    &: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 38px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v1-light/modal.scss b/app/javascript/styles/material-v1-light/modal.scss
new file mode 100644
index 00000000000000..40710fe43e2298
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/modal.scss
@@ -0,0 +1,61 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 280px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+}
+
+.actions-modal {
+    background: $card-background-color;
+    border-radius: $card-radius;
+
+    ul li:not(:empty) a {
+        color: $ui-text-color;
+        font-size: 16px;
+
+        &:hover { background: $card-background-hover-color }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+}
+
+.report-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__target {
+        padding: 24px;
+        text-align: left;
+        font-weight: bold;
+    }
+
+    &__container {
+        border-top: none;
+    }
+}
+
+.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/material-v1-light/statuses.scss b/app/javascript/styles/material-v1-light/statuses.scss
new file mode 100644
index 00000000000000..c569b3b924570c
--- /dev/null
+++ b/app/javascript/styles/material-v1-light/statuses.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: 16px;
+        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: 16px;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .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 {
+        &__counter__label {
+            font-size: 14px;
+            color: $info-text-color;
+        }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.status-card {
+    color: $icon-color;
+    border-color: $border-color;
+    outline: none;
+
+    &__image {
+        background: transparent;
+
+        &>.fa {
+            font-size: 26px;
+        }
+    }
+
+    &__title {
+        color: $primary-text-color;
+        margin-bottom: 6px;
+    }
+
+    &__description { color: $secondary-text-color }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+.status.light {
+    .display-name span { color: $info-text-color }
+}
+
+.detailed-status {
+    background: $card-background-color;
+    padding: 16px;
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__meta {
+        margin-top: 16px;
+        color: $info-text-color;
+    }
+
+    &__action-bar {
+        background: $card-background-color;
+        border-top: none;
+        border-bottom: 1px solid $border-color;
+        padding: 12px 0;
+    }
+
+    &__button {
+        .icon-button { font-size: 20px !important }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark.scss b/app/javascript/styles/material-v2-dark.scss
new file mode 100644
index 00000000000000..04d5e399b4d0b7
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark.scss
@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+//@import 'application';
+@import 'material-v2-dark/account';
+@import 'material-v2-dark/basics';
+@import 'material-v2-dark/button';
+//@import 'material-v2-dark/cards';
+@import 'material-v2-dark/columns';
+@import 'material-v2-dark/components';
+@import 'material-v2-dark/config';
+@import 'material-v2-dark/control';
+@import 'material-v2-dark/emoji-picker';
+@import 'material-v2-dark/icons';
+@import 'material-v2-dark/material-icons';
+@import 'material-v2-dark/media';
+@import 'material-v2-dark/mobile';
+@import 'material-v2-dark/modal';
+@import 'material-v2-dark/statuses';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/_mixins.scss b/app/javascript/styles/material-v2-dark/_mixins.scss
new file mode 100644
index 00000000000000..5f573e33971985
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/_mixins.scss
@@ -0,0 +1,25 @@
+@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 non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
diff --git a/app/javascript/styles/material-v2-dark/account.scss b/app/javascript/styles/material-v2-dark/account.scss
new file mode 100644
index 00000000000000..2d8f2f210e8684
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/account.scss
@@ -0,0 +1,139 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name,
+    .account__display-name strong { color: $secondary-text-color }
+
+    &__avatar {
+        border-radius: $avater-radius;
+        width: 40px;
+        height: 40px;
+
+        &-overlay-base {
+            border-radius: 50%;
+            width: 44px;
+            height: 44px;
+            background-size: 44px;
+        }
+    }
+
+    &__header {
+        &__bar {
+            background: $card-background-color;
+            padding: 8px;
+            border-bottom: 1px solid $border-color;
+
+            .avatar .account__avatar { border: none }
+        }
+
+        &__tabs {
+            padding: 8px;
+
+            &__name {
+                padding: 8px;
+
+                h1 {
+                    color: $primary-text-color;
+
+                    small { color: $secondary-text-color }
+                }
+            }
+
+            &__buttons {
+                .icon-button {
+                    border: none;
+                    border-radius: 50%;
+                    padding: 0;
+                }
+            }
+        }
+
+        &__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-background-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-background-inactive-color;
+                    }
+
+                    dd { color: $primary-text-color }
+                }
+            }
+        }
+    }
+
+    &__section-headline {
+        background: $card-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $secondary-text-color;
+
+            &.active {
+                color: $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-color;
+
+                &:before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/basics.scss b/app/javascript/styles/material-v2-dark/basics.scss
new file mode 100644
index 00000000000000..5c7c3dc04437d7
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/basics.scss
@@ -0,0 +1,24 @@
+@charset "UTF-8";
+@import 'config';
+
+
+body { background: $background-color }
+
+// 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/material-v2-dark/button.scss b/app/javascript/styles/material-v2-dark/button.scss
new file mode 100644
index 00000000000000..6bb6bfa299184d
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/button.scss
@@ -0,0 +1,78 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.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;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background-color: $icon-background-hover-color;
+        }
+    }
+
+    &:hover {
+        color: $icon-button-hover-color;
+        background-color: $icon-background-hover-color;
+    }
+
+    &:active,
+    &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+    font-size: 12px;
+
+    &:hover {
+        background-color: $icon-background-hover-color;
+        color: $icon-button-hover-color;
+    }
+}
+
+.button,
+.button:active,
+.button:focus {
+    background-color: $contained-button-color;
+    border-radius: $button-radius;
+}
+
+.button:hover {
+    @include shadow-2dp;
+    background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+    background: $contained-button-color;
+    margin: 2px;
+
+    &:hover { background: $contained-button-hover-color }
+
+    .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.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 }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/cards.scss b/app/javascript/styles/material-v2-dark/cards.scss
new file mode 100644
index 00000000000000..96988f2c9df943
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/cards.scss
@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+}
+
+.status {
+    border-bottom: 0 !important;
+    border-radius: $card-radius;
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+}
+
+.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/material-v2-dark/color/mastodon-dark.scss b/app/javascript/styles/material-v2-dark/color/mastodon-dark.scss
new file mode 100644
index 00000000000000..14ef148f4651b3
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/mastodon-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #444b5d;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $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($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-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-background-hover-color: transparentize($tab-indicator-color, 0.7);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/mastodon-light.scss b/app/javascript/styles/material-v2-dark/color/mastodon-light.scss
new file mode 100644
index 00000000000000..62a064b877d7ef
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/mastodon-light.scss
@@ -0,0 +1,106 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: darken($background-color, 4%);
+$icon-background-active-color: darken($background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $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: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// 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: $background-color;
+
+// Tab color
+$tab-indicator-color: $primary-color;
+$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%);
+$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/v1-dark.scss b/app/javascript/styles/material-v2-dark/color/v1-dark.scss
new file mode 100644
index 00000000000000..f6168a35e7209a
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/v1-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: #5f6368;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/v1-light.scss b/app/javascript/styles/material-v2-dark/color/v1-light.scss
new file mode 100644
index 00000000000000..3a09d2a5db47b0
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/v1-light.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-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($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/v2-dark.scss b/app/javascript/styles/material-v2-dark/color/v2-dark.scss
new file mode 100644
index 00000000000000..aae145b3b065f7
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/v2-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: #1e1e1e;
+$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: #5f6368;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-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: $primary-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/color/v2-light.scss b/app/javascript/styles/material-v2-dark/color/v2-light.scss
new file mode 100644
index 00000000000000..99d5025439b3b9
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/color/v2-light.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $secondary-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-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($background-color, 30%);
+$scroll-bar-thumb-active-color: darken($background-color, 38%);
+
+// App bar color
+$top-bar-color: $background-color;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $primary-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/columns.scss b/app/javascript/styles/material-v2-dark/columns.scss
new file mode 100644
index 00000000000000..dc61167dcfc87d
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/columns.scss
@@ -0,0 +1,391 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-background-color }
+
+    &:last-child { box-shadow: none }
+}
+
+.column-header {
+    background: $top-bar-color;
+    border-radius: $bar-radius;
+
+    > button {
+        padding: 16px 0 16px 16px;
+        color: $top-bar-text-color;
+    }
+
+    &.active {
+        .column-header__icon {
+            color: $secondary-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        margin: 8px 10px;
+        padding: 10px 12px;
+        border-radius: 50%;
+
+        &.active {
+            color: $top-bar-icon-active-color;
+            background: $icon-background-active-color;
+
+            &:hover {
+                color: $top-bar-icon-hover-color;
+                background: $icon-background-hover-color;
+            }
+        }
+
+        &:hover {
+            color: $top-bar-icon-hover-color;
+            background: $icon-background-hover-color;
+        }
+    }
+
+    &__setting-btn {
+        color: $icon-button-color;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background: $icon-background-hover-color;
+        }
+    }
+
+    &__setting-arrows { font-size: 16px }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &:before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        border-top: 1px solid $border-color;
+
+        &-inner {
+            background: $card-background-color;
+            padding: 16px;
+        }
+
+        &.collapsed { border-top: none }
+    }
+
+    &__back-button {
+        background: $top-bar-color;
+        color: $icon-color;
+        padding: 8px;
+        margin: auto 0;
+        border-radius: 50%;
+
+        span { display: none }
+    }
+}
+
+.column-subheading {
+    color: $section-text-color;
+    background: $background-color;
+    padding: 12px 16px;
+    border-top: 1px solid $border-color;
+}
+
+.column-link {
+    color: $ui-text-color;
+    background: $background-color;
+    padding: 16px;
+    border-radius: $nav-drawer-item-radius;
+
+    &:hover { background: $list-background-hover-color }
+
+    &:active,
+    &:focus { background: $list-background-active-color }
+
+    &__icon {
+        margin-right: 32px;
+        font-size: 20px;
+    }
+
+    &--transparent {
+        &.active {
+            color: $ui-text-color;
+            background: $menu-background-active-color;
+
+            &:hover { background: $menu-background-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;
+    }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $search-bar-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-color }
+
+    &:focus {
+        @include shadow-1dp;
+        background: $search-bar-focus-color;
+    }
+}
+
+.empty-column-indicator {
+    color: $secondary-text-color;
+    background: $card-background-color;
+    font-size: 16px;
+}
+
+.conversation {
+    border-bottom: 1px solid $border-color;
+    padding: 12px;
+    background: $list-background-inactive-color;
+
+    &--unread {
+        background: $list-background-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;
+        }
+    }
+}
+
+.muted {
+    .status {
+        &__content {
+            color: $primary-text-color;
+    
+            p { color: $primary-text-color }
+    
+            a { color: $secondary-text-color }
+        }
+
+        &__display-name strong { color: $primary-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-background-hover-color }
+}
+
+.getting-started {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__wrapper {
+        background: $background-color;
+        height: auto !important;
+        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 }
+
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+}
+
+.reactions-bar {
+    .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: $ui-text-color }
+        }
+
+        &__emoji {
+            width: 24px;
+            height: 24px;
+            margin: 4px 0 4px 2px;
+        }
+
+        &__count {
+            font-size: 16px;
+            margin: 0 8px;
+            color: $secondary-text-color;
+        }
+
+        &:hover { background: $contained-chip-hover-color }
+    }
+}
+
+.notification {
+    &__filter-bar {
+        background: $top-bar-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $top-bar-color;
+            color: $top-bar-icon-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-color;
+    
+                &:before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-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 {
+    background: transparent;
+
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.notification.notification-favourite.focusable,
+.notification.notification-follow.focusable { background: $list-background-inactive-color }
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.react-swipeable-view-container { height: auto }
+
+.tabs-bar__wrapper { background: transparent }
+
+.attachment-list__list a { color: $secondary-text-color }
+
+.focusable { background: transparent !important }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/components.scss b/app/javascript/styles/material-v2-dark/components.scss
new file mode 100644
index 00000000000000..f1e594e3c6bdfd
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/components.scss
@@ -0,0 +1,339 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.drawer {
+    &__header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        justify-content: space-around;
+    
+        a { transition: none }
+    
+        a:hover {
+            background: $icon-background-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-background-color;
+
+        &.darker { background: $card-background-color }
+
+        &__mastodon { background: $card-background-color }
+    }
+}
+
+.search {
+    &__input {
+        background: $search-bar-color;
+        color: $tips-text-color;
+        border-radius: $search-bar-radius;
+        padding: 12px 12px 12px 40px;
+
+        &:focus {
+            @include shadow-2dp;
+            background: $search-bar-focus-color;
+            color: $search-bar-text-color;
+        }
+
+        &::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: 10px;
+                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-background-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__section {
+        h5 {
+            background: $card-background-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-panel hr {
+    border-top: 1px solid $border-color;
+    margin: 8px 0;
+}
+
+.dropdown-menu {
+    @include shadow-8dp;
+    background: $menu-background-color;
+    padding: 8px 0;
+    border-radius: $menu-radius;
+
+    &__arrow { visibility: hidden }
+
+    &__item a {
+        font-size: 14px;
+        padding: 9px 16px;
+        background: $menu-background-color;
+        color: $menu-text-color;
+
+        &:hover, &:active {
+            background: $menu-background-hover-color;
+            color: $menu-text-color;
+        }
+    }
+
+    &__separator {
+        margin: 8px 0;
+        border-bottom: 1px solid $border-color;
+    }
+}
+
+.compose-form {
+    .autosuggest-textarea__textarea {
+        background: $card-background-color;
+        color: $ui-text-color;
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    .spoiler-input__input {
+        color: $ui-text-color;
+        background: $card-background-color;
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    .compose-form {
+        &__warning {
+            @include shadow-1dp;
+            color: $secondary-text-color;
+            background: $card-background-color;
+            padding: 16px;
+
+            a { color: $link-text-color }
+        }
+
+        &__modifiers {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__buttons-wrapper {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__poll-wrapper {
+            border-top: 1px solid $border-color;
+
+            ul { padding: 12px }
+
+            select {
+                color: $ui-text-color;
+                background-color: $background-color;
+                border: 0;
+
+                &:focus { border-color: $border-active-color }
+            }
+
+            .button.button-secondary {
+                box-shadow: none;
+                color: $outlined-button-color;
+                border-color: $outlined-button-color;
+
+                &:hover { background-color: $outlined-button-hover-color }
+
+                &:active { background-color: $outlined-button-active-color }
+
+                &:focus { background-color: $outlined-button-color }
+
+
+            }
+        }
+
+        &__utilBtns { padding-top: 0 }
+
+        &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+    }
+}
+
+.poll__input {
+    border: 2px solid $control-border-color;
+    width: 20px;
+    height: 20px;
+    flex: 0 0 20px;
+}
+
+.poll__text input[type=text] {
+    color: $ui-text-color;
+    background: $background-color;
+    border: 1px solid $border-color;
+    padding: 8px 12px;
+
+    &:focus { border-color: $border-active-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-background-hover-color;
+        border-radius: 50%;
+        box-shadow: none;
+
+        .icon-button { color: $icon-button-active-color }
+    }
+
+    &__dropdown {
+        @include shadow-8dp;
+        background: $menu-background-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-background-active-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+
+            &:hover {
+                background: $menu-background-active-color;
+                
+                .privacy-dropdown__option__content {
+                    color: $secondary-text-color;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &:hover {
+            background: $menu-background-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 {
+    @include shadow-1dp;
+    border-radius: $card-radius;
+    background: $card-background-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 }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/config.scss b/app/javascript/styles/material-v2-dark/config.scss
new file mode 100644
index 00000000000000..1d9a47e6807e80
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/config.scss
@@ -0,0 +1,61 @@
+@charset "UTF-8";
+
+
+// Color scheme
+@import 'color/v2-dark';
+
+
+// Layout profile
+@import 'layout/material-v2';
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@font-face {
+    font-family: "Material Icons";
+    src:
+        local("Material Icons"),
+        //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2");  // GitHub
+        //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2");  // Google Fonts
+        url("../fonts/MaterialIcons-Regular.woff2");  // Self-hosting
+}
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Favorite icon settings
+// If you exclude 'material-icons.scss', please comment out this section.
+.fa {
+    &.fa-star:before { content: "star" }  // Star
+    //&.fa-star:before { content: "favorite" }  // Heart
+    //&.fa-star:before { content: "plus_one" }  // +1
+}
+
+.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: #ffd600;  // Star
+    //color: #ff4081;  // Heart
+    //color: #db4437;  // +1
+}
+
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star:before { content: "star_border" }  // Star
+    //.fa.fa-star:before { content: "favorite_border" }  // Heart
+    //.fa.fa-star:before { content: "plus_one" }  // +1
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star:before { content: "star" }  // Star
+        //.fa.fa-star:before { content: "favorite" }  // Heart
+        //.fa.fa-star:before { content: "plus_one" }  // +1
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/control.scss b/app/javascript/styles/material-v2-dark/control.scss
new file mode 100644
index 00000000000000..7bd251291973b4
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/control.scss
@@ -0,0 +1,69 @@
+@charset "UTF-8";
+@import 'config';
+@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/material-v2-dark/emoji-picker.scss b/app/javascript/styles/material-v2-dark/emoji-picker.scss
new file mode 100644
index 00000000000000..d57c5c04198db5
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/emoji-picker.scss
@@ -0,0 +1,90 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+    }
+
+    &__modifiers__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+
+        button {
+            padding: 8px;
+        }
+    }
+}
+
+.emoji-mart {
+    width: 388px !important;
+    font-size: 14px;
+    color: $ui-text-color;
+
+    &-bar {
+        border: 0 solid $border-color;
+
+        &:first-child {
+            background: $menu-background-color;
+        }
+    }
+
+    &-anchors {
+        color: $icon-button-color;
+        padding: 0;
+    }
+
+    &-anchor {
+        padding: 10px 4px;
+
+        &-selected {
+            color: $icon-button-active-color;
+        }
+
+        &-bar {
+            background-color: $tab-indicator-color;
+        }
+
+        &:hover {
+            color: $icon-button-hover-color;
+        }
+    }
+
+    &-search {
+        background: $menu-background-color;
+
+        input {
+            outline: none;
+            padding: 8px;
+            background: $search-bar-color;
+            color: $ui-text-color;
+            border: 0;
+            border-radius: $bar-radius;
+
+            &:focus {
+                @include shadow-2dp;
+                background: $search-bar-focus-color;
+            }
+        }
+    }
+
+    &-scroll {
+        padding: 0 8px 8px;
+        background: $menu-background-color;
+    }
+
+    &-category-label span {
+        padding: 4px 6px;
+        background: $menu-background-color;
+    }
+
+    &-emoji:hover:before {
+        background-color: $icon-background-hover-color;
+    }
+
+    &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/icons.scss b/app/javascript/styles/material-v2-dark/icons.scss
new file mode 100644
index 00000000000000..6778e3d2c019f8
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/icons.scss
@@ -0,0 +1,37 @@
+@charset "UTF-8";
+@import 'config';
+@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 { vertical-align: sub }  //マテリアルアイコンを文字の高さにそろえる
+
+.fa.fa-times,
+.fa.fa-eraser { vertical-align: middle }  //↑の例外
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+.fa.fa-chevron-left.column-back-button__icon.fa-fw {
+    font-size: 20px;
+    margin-right: 16px;
+}
+
+.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/material-v2-dark/layout/material-v1.scss b/app/javascript/styles/material-v2-dark/layout/material-v1.scss
new file mode 100644
index 00000000000000..92f3692458bb54
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../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;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 0;
+
+
+// Avater cropping settings
+$avater-radius: 50%;  // Rounded cropping
+//$avater-radius: 2px  // Material v1 square
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/layout/material-v2.scss b/app/javascript/styles/material-v2-dark/layout/material-v2.scss
new file mode 100644
index 00000000000000..86d2c496fbc57c
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/layout/material-v2.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// 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;
+
+
+// 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
+// If you want to use contained-chip, please comment out below.
+.reactions-bar__item {
+    background: $outlined-chip-color !important;
+    border: 1px solid $border-color !important;
+
+    &.active { background-color: $outlined-chip-selected-color !important }
+
+    &:hover { background: $outlined-chip-hover-color !important }
+}
+.relationship-tag,
+.account-role {
+    background: $outlined-chip-color !important;
+    border: 1px solid $border-color !important;
+}
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/material-icons.scss b/app/javascript/styles/material-v2-dark/material-icons.scss
new file mode 100644
index 00000000000000..52b9594850ad35
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/material-icons.scss
@@ -0,0 +1,96 @@
+@charset "UTF-8";
+@import 'config';
+
+
+.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-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.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 {
+        font-family: "Material Icons";
+    }
+}
+
+.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" }
+    &.fa-reply-all:before { content: "reply_all" }
+    &.fa-bookmark:before { content: "bookmark" }
+    &.fa-ellipsis-h:before { content: "more_horiz" }
+    &.fa-bell: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" }
+}
+
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark:before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark:before { content: "bookmark" }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/media.scss b/app/javascript/styles/material-v2-dark/media.scss
new file mode 100644
index 00000000000000..74dfd8dcc20909
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/media.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.media-gallery { border-radius: $card-radius }
+
+.media-modal__close {
+    align-content: center;
+
+    &.icon-button {
+        background: transparent;
+        color: $media-icon-color;
+        text-align: center !important;
+        font-size: 24px !important;
+        width: 48px !important;
+        height: 48px !important;
+        border: 12px;
+
+        &:hover {
+            background: $media-icon-background-hover-color;
+            color: $media-icon-hover-color;
+        }
+
+        .fa-fw { width: 24px }
+    }
+}
+
+.icon-button.overlayed {
+    border-radius: 50%;
+    background: $media-icon-background-color;
+    color: $media-icon-color;
+
+    &:hover {
+        background: $media-icon-background-color;
+        color: $media-icon-hover-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/mobile.scss b/app/javascript/styles/material-v2-dark/mobile.scss
new file mode 100644
index 00000000000000..448f80585892c2
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/mobile.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import 'config';
+@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-color;
+            color: $tab-indicator-color;
+        }
+
+        .fa { font-size: 20px }
+    }
+
+    &__wrapper { @include shadow-4dp }
+}
+
+
+#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;
+
+    &: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 38px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-dark/modal.scss b/app/javascript/styles/material-v2-dark/modal.scss
new file mode 100644
index 00000000000000..40710fe43e2298
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/modal.scss
@@ -0,0 +1,61 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 280px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+}
+
+.actions-modal {
+    background: $card-background-color;
+    border-radius: $card-radius;
+
+    ul li:not(:empty) a {
+        color: $ui-text-color;
+        font-size: 16px;
+
+        &:hover { background: $card-background-hover-color }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+}
+
+.report-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__target {
+        padding: 24px;
+        text-align: left;
+        font-weight: bold;
+    }
+
+    &__container {
+        border-top: none;
+    }
+}
+
+.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/material-v2-dark/statuses.scss b/app/javascript/styles/material-v2-dark/statuses.scss
new file mode 100644
index 00000000000000..c569b3b924570c
--- /dev/null
+++ b/app/javascript/styles/material-v2-dark/statuses.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: 16px;
+        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: 16px;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .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 {
+        &__counter__label {
+            font-size: 14px;
+            color: $info-text-color;
+        }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.status-card {
+    color: $icon-color;
+    border-color: $border-color;
+    outline: none;
+
+    &__image {
+        background: transparent;
+
+        &>.fa {
+            font-size: 26px;
+        }
+    }
+
+    &__title {
+        color: $primary-text-color;
+        margin-bottom: 6px;
+    }
+
+    &__description { color: $secondary-text-color }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+.status.light {
+    .display-name span { color: $info-text-color }
+}
+
+.detailed-status {
+    background: $card-background-color;
+    padding: 16px;
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__meta {
+        margin-top: 16px;
+        color: $info-text-color;
+    }
+
+    &__action-bar {
+        background: $card-background-color;
+        border-top: none;
+        border-bottom: 1px solid $border-color;
+        padding: 12px 0;
+    }
+
+    &__button {
+        .icon-button { font-size: 20px !important }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light.scss b/app/javascript/styles/material-v2-light.scss
new file mode 100644
index 00000000000000..51e5eabd47522c
--- /dev/null
+++ b/app/javascript/styles/material-v2-light.scss
@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+//@import 'application';
+@import 'material-v2-light/account';
+@import 'material-v2-light/basics';
+@import 'material-v2-light/button';
+//@import 'material-v2-light/cards';
+@import 'material-v2-light/columns';
+@import 'material-v2-light/components';
+@import 'material-v2-light/config';
+@import 'material-v2-light/control';
+@import 'material-v2-light/emoji-picker';
+@import 'material-v2-light/icons';
+@import 'material-v2-light/material-icons';
+@import 'material-v2-light/media';
+@import 'material-v2-light/mobile';
+@import 'material-v2-light/modal';
+@import 'material-v2-light/statuses';
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/_mixins.scss b/app/javascript/styles/material-v2-light/_mixins.scss
new file mode 100644
index 00000000000000..5f573e33971985
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/_mixins.scss
@@ -0,0 +1,25 @@
+@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 non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
diff --git a/app/javascript/styles/material-v2-light/account.scss b/app/javascript/styles/material-v2-light/account.scss
new file mode 100644
index 00000000000000..2d8f2f210e8684
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/account.scss
@@ -0,0 +1,139 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name,
+    .account__display-name strong { color: $secondary-text-color }
+
+    &__avatar {
+        border-radius: $avater-radius;
+        width: 40px;
+        height: 40px;
+
+        &-overlay-base {
+            border-radius: 50%;
+            width: 44px;
+            height: 44px;
+            background-size: 44px;
+        }
+    }
+
+    &__header {
+        &__bar {
+            background: $card-background-color;
+            padding: 8px;
+            border-bottom: 1px solid $border-color;
+
+            .avatar .account__avatar { border: none }
+        }
+
+        &__tabs {
+            padding: 8px;
+
+            &__name {
+                padding: 8px;
+
+                h1 {
+                    color: $primary-text-color;
+
+                    small { color: $secondary-text-color }
+                }
+            }
+
+            &__buttons {
+                .icon-button {
+                    border: none;
+                    border-radius: 50%;
+                    padding: 0;
+                }
+            }
+        }
+
+        &__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-background-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-background-inactive-color;
+                    }
+
+                    dd { color: $primary-text-color }
+                }
+            }
+        }
+    }
+
+    &__section-headline {
+        background: $card-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $secondary-text-color;
+
+            &.active {
+                color: $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-color;
+
+                &:before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/basics.scss b/app/javascript/styles/material-v2-light/basics.scss
new file mode 100644
index 00000000000000..5c7c3dc04437d7
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/basics.scss
@@ -0,0 +1,24 @@
+@charset "UTF-8";
+@import 'config';
+
+
+body { background: $background-color }
+
+// 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/material-v2-light/button.scss b/app/javascript/styles/material-v2-light/button.scss
new file mode 100644
index 00000000000000..6bb6bfa299184d
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/button.scss
@@ -0,0 +1,78 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.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;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background-color: $icon-background-hover-color;
+        }
+    }
+
+    &:hover {
+        color: $icon-button-hover-color;
+        background-color: $icon-background-hover-color;
+    }
+
+    &:active,
+    &:focus { background-color: transparent }
+}
+
+.text-icon-button {
+    color: $icon-button-color;
+    border-radius: 50%;
+    font-size: 12px;
+
+    &:hover {
+        background-color: $icon-background-hover-color;
+        color: $icon-button-hover-color;
+    }
+}
+
+.button,
+.button:active,
+.button:focus {
+    background-color: $contained-button-color;
+    border-radius: $button-radius;
+}
+
+.button:hover {
+    @include shadow-2dp;
+    background-color: $contained-button-hover-color;
+}
+
+.button.logo-button {
+    background: $contained-button-color;
+    margin: 2px;
+
+    &:hover { background: $contained-button-hover-color }
+
+    .button--destructive:hover { background: $contained-button-hover-color }
+}
+
+.button.button--block { margin: 8px 0 }
+
+.button.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 }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/cards.scss b/app/javascript/styles/material-v2-light/cards.scss
new file mode 100644
index 00000000000000..96988f2c9df943
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/cards.scss
@@ -0,0 +1,29 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+}
+
+.status {
+    border-bottom: 0 !important;
+    border-radius: $card-radius;
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+}
+
+.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/material-v2-light/color/mastodon-dark.scss b/app/javascript/styles/material-v2-light/color/mastodon-dark.scss
new file mode 100644
index 00000000000000..14ef148f4651b3
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/mastodon-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #191b22;
+$menu-background-color: #d9e1e8;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #444b5d;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #282c37;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #42485a;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #393f4f;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: lighten($background-color, 14%);
+$icon-background-active-color: lighten($background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $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($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 16%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
+$scroll-bar-thumb-active-color: lighten($background-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-background-hover-color: transparentize($tab-indicator-color, 0.7);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/mastodon-light.scss b/app/javascript/styles/material-v2-light/color/mastodon-light.scss
new file mode 100644
index 00000000000000..62a064b877d7ef
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/mastodon-light.scss
@@ -0,0 +1,106 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #eff3f5;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($background-color, 6%);
+$menu-background-active-color: darken($background-color, 10%);
+$menu-background-active-hover-color: darken($background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: darken($background-color, 4%);
+$icon-background-active-color: darken($background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $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: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-active-color: darken($border-color, 30%);
+
+// 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: $background-color;
+
+// Tab color
+$tab-indicator-color: $primary-color;
+$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%);
+$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/v1-dark.scss b/app/javascript/styles/material-v2-light/color/v1-dark.scss
new file mode 100644
index 00000000000000..f6168a35e7209a
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/v1-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$disabled-icon-color: lighten($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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: #5f6368;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-color, 20%);
+$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
+$scroll-bar-thumb-active-color: lighten($background-color, 38%);
+
+// App bar color
+$top-bar-color: #2196f3;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/v1-light.scss b/app/javascript/styles/material-v2-light/color/v1-light.scss
new file mode 100644
index 00000000000000..3a09d2a5db47b0
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/v1-light.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #fafafa;
+$menu-background-color: #ffffff;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: #ffffff;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: #ffffff;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-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-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-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($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/v2-dark.scss b/app/javascript/styles/material-v2-light/color/v2-dark.scss
new file mode 100644
index 00000000000000..aae145b3b065f7
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/v2-dark.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #121212;
+$menu-background-color: #1e1e1e;
+$menu-background-hover-color: lighten($menu-background-color, 6%);
+$menu-background-active-color: lighten($menu-background-color, 10%);
+$menu-background-active-hover-color: lighten($menu-background-color, 16%);
+$card-background-color: #1e1e1e;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #1e1e1e;
+$list-background-hover-color: lighten($list-background-color, 6%);
+$list-background-active-color: lighten($list-background-color, 10%);
+$list-background-inactive-color: lighten($list-background-color, 10%);
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #1e1e1e;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-background-hover-color: transparentize(#ffffff, 0.8);
+$icon-background-active-color: transparentize(#ffffff, 0.7);
+$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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: #1e1e1e;
+$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: #5f6368;
+$border-active-color: lighten($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: lighten($background-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: $primary-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/color/v2-light.scss b/app/javascript/styles/material-v2-light/color/v2-light.scss
new file mode 100644
index 00000000000000..99d5025439b3b9
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/color/v2-light.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+
+// 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;
+
+// Background-color
+$background-color: #ffffff;
+$menu-background-color: $background-color;
+$menu-background-hover-color: darken($menu-background-color, 6%);
+$menu-background-active-color: darken($menu-background-color, 10%);
+$menu-background-active-hover-color: darken($menu-background-color, 16%);
+$card-background-color: $background-color;
+$card-background-hover-color: darken($card-background-color, 6%);
+$card-background-inactive-color: darken($card-background-color, 10%);
+$list-background-color: $background-color;
+$list-background-hover-color: darken($list-background-color, 6%);
+$list-background-active-color: darken($list-background-color, 10%);
+$list-background-inactive-color: darken($list-background-color, 10%);
+$verified-background-color: lighten($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #e0e0e0;
+$contained-chip-hover-color: darken($contained-chip-color, 6%);
+$contained-chip-selected-color: darken($contained-chip-color, 12%);
+$outlined-chip-color: #ffffff;
+$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
+$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-background-hover-color: transparentize(#000000, 0.9);
+$icon-background-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;
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
+$control-border-color: $icon-color;
+
+// 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: $secondary-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-active-color: darken($border-color, 30%);
+
+// Scroll bar color
+$scroll-bar-thumb-color: darken($background-color, 20%);
+$scroll-bar-thumb-hover-color: darken($background-color, 30%);
+$scroll-bar-thumb-active-color: darken($background-color, 38%);
+
+// App bar color
+$top-bar-color: $background-color;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $primary-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/columns.scss b/app/javascript/styles/material-v2-light/columns.scss
new file mode 100644
index 00000000000000..dc61167dcfc87d
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/columns.scss
@@ -0,0 +1,391 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-background-color }
+
+    &:last-child { box-shadow: none }
+}
+
+.column-header {
+    background: $top-bar-color;
+    border-radius: $bar-radius;
+
+    > button {
+        padding: 16px 0 16px 16px;
+        color: $top-bar-text-color;
+    }
+
+    &.active {
+        .column-header__icon {
+            color: $secondary-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        background: $top-bar-color;
+        color: $top-bar-icon-color;
+        margin: 8px 10px;
+        padding: 10px 12px;
+        border-radius: 50%;
+
+        &.active {
+            color: $top-bar-icon-active-color;
+            background: $icon-background-active-color;
+
+            &:hover {
+                color: $top-bar-icon-hover-color;
+                background: $icon-background-hover-color;
+            }
+        }
+
+        &:hover {
+            color: $top-bar-icon-hover-color;
+            background: $icon-background-hover-color;
+        }
+    }
+
+    &__setting-btn {
+        color: $icon-button-color;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            background: $icon-background-hover-color;
+        }
+    }
+
+    &__setting-arrows { font-size: 16px }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &:before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        border-top: 1px solid $border-color;
+
+        &-inner {
+            background: $card-background-color;
+            padding: 16px;
+        }
+
+        &.collapsed { border-top: none }
+    }
+
+    &__back-button {
+        background: $top-bar-color;
+        color: $icon-color;
+        padding: 8px;
+        margin: auto 0;
+        border-radius: 50%;
+
+        span { display: none }
+    }
+}
+
+.column-subheading {
+    color: $section-text-color;
+    background: $background-color;
+    padding: 12px 16px;
+    border-top: 1px solid $border-color;
+}
+
+.column-link {
+    color: $ui-text-color;
+    background: $background-color;
+    padding: 16px;
+    border-radius: $nav-drawer-item-radius;
+
+    &:hover { background: $list-background-hover-color }
+
+    &:active,
+    &:focus { background: $list-background-active-color }
+
+    &__icon {
+        margin-right: 32px;
+        font-size: 20px;
+    }
+
+    &--transparent {
+        &.active {
+            color: $ui-text-color;
+            background: $menu-background-active-color;
+
+            &:hover { background: $menu-background-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;
+    }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $search-bar-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-color }
+
+    &:focus {
+        @include shadow-1dp;
+        background: $search-bar-focus-color;
+    }
+}
+
+.empty-column-indicator {
+    color: $secondary-text-color;
+    background: $card-background-color;
+    font-size: 16px;
+}
+
+.conversation {
+    border-bottom: 1px solid $border-color;
+    padding: 12px;
+    background: $list-background-inactive-color;
+
+    &--unread {
+        background: $list-background-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;
+        }
+    }
+}
+
+.muted {
+    .status {
+        &__content {
+            color: $primary-text-color;
+    
+            p { color: $primary-text-color }
+    
+            a { color: $secondary-text-color }
+        }
+
+        &__display-name strong { color: $primary-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-background-hover-color }
+}
+
+.getting-started {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__wrapper {
+        background: $background-color;
+        height: auto !important;
+        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 }
+
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+}
+
+.reactions-bar {
+    .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: $ui-text-color }
+        }
+
+        &__emoji {
+            width: 24px;
+            height: 24px;
+            margin: 4px 0 4px 2px;
+        }
+
+        &__count {
+            font-size: 16px;
+            margin: 0 8px;
+            color: $secondary-text-color;
+        }
+
+        &:hover { background: $contained-chip-hover-color }
+    }
+}
+
+.notification {
+    &__filter-bar {
+        background: $top-bar-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $top-bar-color;
+            color: $top-bar-icon-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-color;
+                border-bottom: 4px solid $tab-indicator-color;
+    
+                &:before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $tab-indicator-background-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 {
+    background: transparent;
+
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.notification.notification-favourite.focusable,
+.notification.notification-follow.focusable { background: $list-background-inactive-color }
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.react-swipeable-view-container { height: auto }
+
+.tabs-bar__wrapper { background: transparent }
+
+.attachment-list__list a { color: $secondary-text-color }
+
+.focusable { background: transparent !important }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/components.scss b/app/javascript/styles/material-v2-light/components.scss
new file mode 100644
index 00000000000000..f1e594e3c6bdfd
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/components.scss
@@ -0,0 +1,339 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.drawer {
+    &__header {
+        @include shadow-4dp;
+        background: $top-bar-color;
+        border-radius: $nav-bar-radius;
+        justify-content: space-around;
+    
+        a { transition: none }
+    
+        a:hover {
+            background: $icon-background-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-background-color;
+
+        &.darker { background: $card-background-color }
+
+        &__mastodon { background: $card-background-color }
+    }
+}
+
+.search {
+    &__input {
+        background: $search-bar-color;
+        color: $tips-text-color;
+        border-radius: $search-bar-radius;
+        padding: 12px 12px 12px 40px;
+
+        &:focus {
+            @include shadow-2dp;
+            background: $search-bar-focus-color;
+            color: $search-bar-text-color;
+        }
+
+        &::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: 10px;
+                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-background-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__section {
+        h5 {
+            background: $card-background-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-panel hr {
+    border-top: 1px solid $border-color;
+    margin: 8px 0;
+}
+
+.dropdown-menu {
+    @include shadow-8dp;
+    background: $menu-background-color;
+    padding: 8px 0;
+    border-radius: $menu-radius;
+
+    &__arrow { visibility: hidden }
+
+    &__item a {
+        font-size: 14px;
+        padding: 9px 16px;
+        background: $menu-background-color;
+        color: $menu-text-color;
+
+        &:hover, &:active {
+            background: $menu-background-hover-color;
+            color: $menu-text-color;
+        }
+    }
+
+    &__separator {
+        margin: 8px 0;
+        border-bottom: 1px solid $border-color;
+    }
+}
+
+.compose-form {
+    .autosuggest-textarea__textarea {
+        background: $card-background-color;
+        color: $ui-text-color;
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    .spoiler-input__input {
+        color: $ui-text-color;
+        background: $card-background-color;
+
+        &::placeholder { color: $tips-text-color }
+    }
+
+    .compose-form {
+        &__warning {
+            @include shadow-1dp;
+            color: $secondary-text-color;
+            background: $card-background-color;
+            padding: 16px;
+
+            a { color: $link-text-color }
+        }
+
+        &__modifiers {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__buttons-wrapper {
+            background: $card-background-color;
+            color: $tips-text-color;
+        }
+
+        &__poll-wrapper {
+            border-top: 1px solid $border-color;
+
+            ul { padding: 12px }
+
+            select {
+                color: $ui-text-color;
+                background-color: $background-color;
+                border: 0;
+
+                &:focus { border-color: $border-active-color }
+            }
+
+            .button.button-secondary {
+                box-shadow: none;
+                color: $outlined-button-color;
+                border-color: $outlined-button-color;
+
+                &:hover { background-color: $outlined-button-hover-color }
+
+                &:active { background-color: $outlined-button-active-color }
+
+                &:focus { background-color: $outlined-button-color }
+
+
+            }
+        }
+
+        &__utilBtns { padding-top: 0 }
+
+        &__publish .compose-form__publish-button-wrapper { box-shadow: none }
+    }
+}
+
+.poll__input {
+    border: 2px solid $control-border-color;
+    width: 20px;
+    height: 20px;
+    flex: 0 0 20px;
+}
+
+.poll__text input[type=text] {
+    color: $ui-text-color;
+    background: $background-color;
+    border: 1px solid $border-color;
+    padding: 8px 12px;
+
+    &:focus { border-color: $border-active-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-background-hover-color;
+        border-radius: 50%;
+        box-shadow: none;
+
+        .icon-button { color: $icon-button-active-color }
+    }
+
+    &__dropdown {
+        @include shadow-8dp;
+        background: $menu-background-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-background-active-color;
+            color: $icon-hover-color;
+
+            .privacy-dropdown__option__content {
+                color: $secondary-text-color;
+
+                strong { color: $ui-text-color }
+            }
+
+            &:hover {
+                background: $menu-background-active-color;
+                
+                .privacy-dropdown__option__content {
+                    color: $secondary-text-color;
+
+                    strong { color: $ui-text-color }
+                }
+            }
+        }
+
+        &:hover {
+            background: $menu-background-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 {
+    @include shadow-1dp;
+    border-radius: $card-radius;
+    background: $card-background-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 }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/config.scss b/app/javascript/styles/material-v2-light/config.scss
new file mode 100644
index 00000000000000..f823bad9a00b44
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/config.scss
@@ -0,0 +1,61 @@
+@charset "UTF-8";
+
+
+// Color scheme
+@import 'color/v2-light';
+
+
+// Layout profile
+@import 'layout/material-v2';
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@font-face {
+    font-family: "Material Icons";
+    src:
+        local("Material Icons"),
+        //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2");  // GitHub
+        //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2");  // Google Fonts
+        url("../fonts/MaterialIcons-Regular.woff2");  // Self-hosting
+}
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Favorite icon settings
+// If you exclude 'material-icons.scss', please comment out this section.
+.fa {
+    &.fa-star:before { content: "star" }  // Star
+    //&.fa-star:before { content: "favorite" }  // Heart
+    //&.fa-star:before { content: "plus_one" }  // +1
+}
+
+.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: #ffd600;  // Star
+    //color: #ff4081;  // Heart
+    //color: #db4437;  // +1
+}
+
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star:before { content: "star_border" }  // Star
+    //.fa.fa-star:before { content: "favorite_border" }  // Heart
+    //.fa.fa-star:before { content: "plus_one" }  // +1
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star:before { content: "star" }  // Star
+        //.fa.fa-star:before { content: "favorite" }  // Heart
+        //.fa.fa-star:before { content: "plus_one" }  // +1
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/control.scss b/app/javascript/styles/material-v2-light/control.scss
new file mode 100644
index 00000000000000..7bd251291973b4
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/control.scss
@@ -0,0 +1,69 @@
+@charset "UTF-8";
+@import 'config';
+@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/material-v2-light/emoji-picker.scss b/app/javascript/styles/material-v2-light/emoji-picker.scss
new file mode 100644
index 00000000000000..d57c5c04198db5
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/emoji-picker.scss
@@ -0,0 +1,90 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+    }
+
+    &__modifiers__menu {
+        @include shadow-8dp;
+        background: $menu-background-color;
+        border-radius: $menu-radius;
+
+        button {
+            padding: 8px;
+        }
+    }
+}
+
+.emoji-mart {
+    width: 388px !important;
+    font-size: 14px;
+    color: $ui-text-color;
+
+    &-bar {
+        border: 0 solid $border-color;
+
+        &:first-child {
+            background: $menu-background-color;
+        }
+    }
+
+    &-anchors {
+        color: $icon-button-color;
+        padding: 0;
+    }
+
+    &-anchor {
+        padding: 10px 4px;
+
+        &-selected {
+            color: $icon-button-active-color;
+        }
+
+        &-bar {
+            background-color: $tab-indicator-color;
+        }
+
+        &:hover {
+            color: $icon-button-hover-color;
+        }
+    }
+
+    &-search {
+        background: $menu-background-color;
+
+        input {
+            outline: none;
+            padding: 8px;
+            background: $search-bar-color;
+            color: $ui-text-color;
+            border: 0;
+            border-radius: $bar-radius;
+
+            &:focus {
+                @include shadow-2dp;
+                background: $search-bar-focus-color;
+            }
+        }
+    }
+
+    &-scroll {
+        padding: 0 8px 8px;
+        background: $menu-background-color;
+    }
+
+    &-category-label span {
+        padding: 4px 6px;
+        background: $menu-background-color;
+    }
+
+    &-emoji:hover:before {
+        background-color: $icon-background-hover-color;
+    }
+
+    &-no-results { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/icons.scss b/app/javascript/styles/material-v2-light/icons.scss
new file mode 100644
index 00000000000000..6778e3d2c019f8
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/icons.scss
@@ -0,0 +1,37 @@
+@charset "UTF-8";
+@import 'config';
+@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 { vertical-align: sub }  //マテリアルアイコンを文字の高さにそろえる
+
+.fa.fa-times,
+.fa.fa-eraser { vertical-align: middle }  //↑の例外
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+.fa.fa-chevron-left.column-back-button__icon.fa-fw {
+    font-size: 20px;
+    margin-right: 16px;
+}
+
+.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/material-v2-light/layout/material-v1.scss b/app/javascript/styles/material-v2-light/layout/material-v1.scss
new file mode 100644
index 00000000000000..92f3692458bb54
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../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;
+
+
+// Navigation drawer item settings
+$nav-drawer-item-radius: 0;
+
+
+// Avater cropping settings
+$avater-radius: 50%;  // Rounded cropping
+//$avater-radius: 2px  // Material v1 square
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/layout/material-v2.scss b/app/javascript/styles/material-v2-light/layout/material-v2.scss
new file mode 100644
index 00000000000000..86d2c496fbc57c
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/layout/material-v2.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 8px;
+
+
+// Search bar radius
+$search-bar-radius: 8px;
+
+
+// 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;
+
+
+// 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
+// If you want to use contained-chip, please comment out below.
+.reactions-bar__item {
+    background: $outlined-chip-color !important;
+    border: 1px solid $border-color !important;
+
+    &.active { background-color: $outlined-chip-selected-color !important }
+
+    &:hover { background: $outlined-chip-hover-color !important }
+}
+.relationship-tag,
+.account-role {
+    background: $outlined-chip-color !important;
+    border: 1px solid $border-color !important;
+}
+
+
+// Button shadow
+// If you want to use material v2 styled non-shadow button, please comment out this section.
+.button,
+.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/material-icons.scss b/app/javascript/styles/material-v2-light/material-icons.scss
new file mode 100644
index 00000000000000..52b9594850ad35
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/material-icons.scss
@@ -0,0 +1,96 @@
+@charset "UTF-8";
+@import 'config';
+
+
+.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-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.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 {
+        font-family: "Material Icons";
+    }
+}
+
+.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" }
+    &.fa-reply-all:before { content: "reply_all" }
+    &.fa-bookmark:before { content: "bookmark" }
+    &.fa-ellipsis-h:before { content: "more_horiz" }
+    &.fa-bell: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" }
+}
+
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark:before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark:before { content: "bookmark" }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/media.scss b/app/javascript/styles/material-v2-light/media.scss
new file mode 100644
index 00000000000000..74dfd8dcc20909
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/media.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.media-gallery { border-radius: $card-radius }
+
+.media-modal__close {
+    align-content: center;
+
+    &.icon-button {
+        background: transparent;
+        color: $media-icon-color;
+        text-align: center !important;
+        font-size: 24px !important;
+        width: 48px !important;
+        height: 48px !important;
+        border: 12px;
+
+        &:hover {
+            background: $media-icon-background-hover-color;
+            color: $media-icon-hover-color;
+        }
+
+        .fa-fw { width: 24px }
+    }
+}
+
+.icon-button.overlayed {
+    border-radius: 50%;
+    background: $media-icon-background-color;
+    color: $media-icon-color;
+
+    &:hover {
+        background: $media-icon-background-color;
+        color: $media-icon-hover-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/mobile.scss b/app/javascript/styles/material-v2-light/mobile.scss
new file mode 100644
index 00000000000000..448f80585892c2
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/mobile.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import 'config';
+@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-color;
+            color: $tab-indicator-color;
+        }
+
+        .fa { font-size: 20px }
+    }
+
+    &__wrapper { @include shadow-4dp }
+}
+
+
+#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;
+
+    &: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 38px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-v2-light/modal.scss b/app/javascript/styles/material-v2-light/modal.scss
new file mode 100644
index 00000000000000..40710fe43e2298
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/modal.scss
@@ -0,0 +1,61 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 280px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+}
+
+.actions-modal {
+    background: $card-background-color;
+    border-radius: $card-radius;
+
+    ul li:not(:empty) a {
+        color: $ui-text-color;
+        font-size: 16px;
+
+        &:hover { background: $card-background-hover-color }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+}
+
+.report-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__target {
+        padding: 24px;
+        text-align: left;
+        font-weight: bold;
+    }
+
+    &__container {
+        border-top: none;
+    }
+}
+
+.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/material-v2-light/statuses.scss b/app/javascript/styles/material-v2-light/statuses.scss
new file mode 100644
index 00000000000000..c569b3b924570c
--- /dev/null
+++ b/app/javascript/styles/material-v2-light/statuses.scss
@@ -0,0 +1,146 @@
+@charset "UTF-8";
+@import 'config';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: 16px;
+        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: 16px;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .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 {
+        &__counter__label {
+            font-size: 14px;
+            color: $info-text-color;
+        }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.status-card {
+    color: $icon-color;
+    border-color: $border-color;
+    outline: none;
+
+    &__image {
+        background: transparent;
+
+        &>.fa {
+            font-size: 26px;
+        }
+    }
+
+    &__title {
+        color: $primary-text-color;
+        margin-bottom: 6px;
+    }
+
+    &__description { color: $secondary-text-color }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+.status.light {
+    .display-name span { color: $info-text-color }
+}
+
+.detailed-status {
+    background: $card-background-color;
+    padding: 16px;
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__meta {
+        margin-top: 16px;
+        color: $info-text-color;
+    }
+
+    &__action-bar {
+        background: $card-background-color;
+        border-top: none;
+        border-bottom: 1px solid $border-color;
+        padding: 12px 0;
+    }
+
+    &__button {
+        .icon-button { font-size: 20px !important }
+    }
+}
\ No newline at end of file
diff --git a/config/locales/en.yml b/config/locales/en.yml
index bea07a4435a199..a11ecf18557bc9 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1240,7 +1240,10 @@ en:
     default: Mastodon (Dark)
     mastodon-light: Mastodon (Light)
     # additional theme
-    mastodon-material-dev: Material Dev (Light)
+    material-v1-dark: Material v1 (Dark)
+    material-v1-light: Material v1 (Light)
+    material-v2-dark: Material v2 (Dark)
+    material-v2-light: Material v2 (Light)
   time:
     formats:
       default: "%b %d, %Y, %H:%M"
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index 211ffb09c20894..489463ed648445 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -1222,7 +1222,10 @@ ja:
     default: Mastodon (ダーク)
     mastodon-light: Mastodon (ライト)
     # 追加テーマ
-    mastodon-material: Material Dev (ライト)
+    material-v1-dark: Material v1 (ダーク)
+    material-v1-light: Material v1 (ライト)
+    material-v2-dark: Material v2 (ダーク)
+    material-v2-light: Material v2 (ライト)
   time:
     formats:
       default: "%Y年%m月%d日 %H:%M"
diff --git a/config/themes.yml b/config/themes.yml
index e93b9f8f1107cf..015c9ddf7c180e 100644
--- a/config/themes.yml
+++ b/config/themes.yml
@@ -3,4 +3,7 @@ contrast: styles/contrast.scss
 mastodon-light: styles/mastodon-light.scss
 
 # 追加テーマ
-mastodon-material: styles/mastodon-material-dev.scss
+material-v1-dark: styles/material-v1-dark.scss
+material-v1-light: styles/material-v1-light.scss
+material-v2-dark: styles/material-v2-dark.scss
+material-v2-light: styles/material-v2-light.scss