diff --git a/Gemfile b/Gemfile
index e632c80f5..98cb286ba 100644
--- a/Gemfile
+++ b/Gemfile
@@ -105,6 +105,8 @@ gem 'json-ld'
 gem 'json-ld-preloaded', '~> 3.1'
 gem 'rdf-normalize', '~> 0.4'
 
+gem 'redcarpet', "~> 3.4.0" 
+
 group :development, :test do
   gem 'fabrication', '~> 2.21'
   gem 'fuubar', '~> 2.5'
diff --git a/Gemfile.lock b/Gemfile.lock
index 0fe84f21e..852133e7e 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -480,6 +480,7 @@ GEM
       link_header (~> 0.0, >= 0.0.8)
     rdf-normalize (0.4.0)
       rdf (~> 3.1)
+    redcarpet (3.4.0)
     redis (4.2.1)
     redis-actionpack (5.2.0)
       actionpack (>= 5, < 7)
@@ -755,6 +756,7 @@ DEPENDENCIES
   rails-i18n (~> 5.1)
   rails-settings-cached (~> 0.6)
   rdf-normalize (~> 0.4)
+  redcarpet (~> 3.4.0)
   redis (~> 4.2)
   redis-namespace (~> 1.7)
   redis-rails (~> 5.0)
diff --git a/app/controllers/api/v2/media_controller.rb b/app/controllers/api/v2/media_controller.rb
index 0c1baf01d..de2c72313 100644
--- a/app/controllers/api/v2/media_controller.rb
+++ b/app/controllers/api/v2/media_controller.rb
@@ -1,5 +1,8 @@
 # frozen_string_literal: true
 
+class Api::V2::MediaController < Api::V1::MediaController
+end
+__END__
 class Api::V2::MediaController < Api::V1::MediaController
   def create
     @media_attachment = current_account.media_attachments.create!({ delay_processing: true }.merge(media_attachment_params))
diff --git a/app/javascript/fonts/MaterialIcons-Regular.woff2 b/app/javascript/fonts/MaterialIcons-Regular.woff2
new file mode 100644
index 000000000..9fa211252
Binary files /dev/null and b/app/javascript/fonts/MaterialIcons-Regular.woff2 differ
diff --git a/app/javascript/mastodon/actions/UtilBtns.js b/app/javascript/mastodon/actions/UtilBtns.js
new file mode 100644
index 000000000..52ccc6877
--- /dev/null
+++ b/app/javascript/mastodon/actions/UtilBtns.js
@@ -0,0 +1,71 @@
+import { changeCompose } from '../actions/compose';
+
+
+
+export const UTILBTNS_GOJI = 'UTILBTNS_GOJI';
+export const UTILBTNS_HARUKIN = 'UTILBTNS_HARUKIN';
+
+
+
+export function submitGoji (textarea) {
+  return function (dispatch, getState) {
+    if (!textarea.value) {
+      let text = [
+        "#ゴジモリｨｨィィイイ",
+        ":goji:"
+      ].join("\r\n");
+
+      dispatch(submitGojiRequest());
+      dispatch(changeCompose(text));
+
+      textarea.focus();
+    }
+  }
+}
+
+export function submitGojiRequest () {
+  return {
+    type: UTILBTNS_GOJI
+  }
+}
+
+export function submitHarukin (textarea) {
+  return function (dispatch, getState) {
+    const HARUKINS = [":harukin: ", ":harukin_old: ", ":harukin_ika: ", ":harukin_tako: "];
+    const MAX = 6;
+
+    if (!textarea.value) {
+      let text = "";
+
+      let quantity = Math.round(Math.random() * MAX + 1);
+      let type = Math.round(Math.random() * (HARUKINS.length - 1));
+
+      let harukin = HARUKINS[type];
+
+      switch (quantity) {
+        default:
+          text = [
+            harukin.repeat(quantity),
+            "🔥 ".repeat(quantity)
+          ].join("\r\n");
+
+          break;
+          
+        case MAX + 1:
+          text = `${harukin}💕\r\n`.repeat(6);
+          break;
+      }
+
+      dispatch(submitHarukinRequest());
+      dispatch(changeCompose(text));
+
+      textarea.focus();
+    }
+  }
+}
+
+export function submitHarukinRequest () {
+  return {
+    type: UTILBTNS_HARUKIN
+  }
+}
diff --git a/app/javascript/mastodon/components/announcement_icon_button.js b/app/javascript/mastodon/components/announcement_icon_button.js
new file mode 100644
index 000000000..0de58c6f7
--- /dev/null
+++ b/app/javascript/mastodon/components/announcement_icon_button.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import Motion from 'react-motion/lib/Motion';
+import spring from 'react-motion/lib/spring';
+import PropTypes from 'prop-types';
+
+class IconButton extends React.PureComponent {
+
+  static propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
+    size: PropTypes.number,
+    active: PropTypes.bool,
+    style: PropTypes.object,
+    activeStyle: PropTypes.object,
+    disabled: PropTypes.bool,
+    inverted: PropTypes.bool,
+    animate: PropTypes.bool,
+    overlay: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    size: 18,
+    active: false,
+    disabled: false,
+    animate: false,
+    overlay: false,
+  };
+
+  handleClick = (e) =>  {
+    e.preventDefault();
+
+    if (!this.props.disabled) {
+      this.props.onClick(e);
+    }
+  }
+
+  render () {
+    const style = {
+      fontSize: `${this.props.size}px`,
+      width: `${this.props.size * 1.28571429}px`,
+      height: `${this.props.size * 1.28571429}px`,
+      lineHeight: `${this.props.size}px`,
+      ...this.props.style,
+      ...(this.props.active ? this.props.activeStyle : {}),
+    };
+
+    const classes = ['icon-button'];
+
+    if (this.props.active) {
+      classes.push('active');
+    }
+
+    if (this.props.disabled) {
+      classes.push('disabled');
+    }
+
+    if (this.props.inverted) {
+      classes.push('inverted');
+    }
+
+    if (this.props.overlay) {
+      classes.push('overlayed');
+    }
+
+    if (this.props.className) {
+      classes.push(this.props.className);
+    }
+
+    return (
+      <Motion defaultStyle={{ rotate: this.props.active ? 180 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? 0 : 180) : 0 }}>
+        {({ rotate }) =>
+          <button
+            aria-label={this.props.title}
+            title={this.props.title}
+            className={classes.join(' ')}
+            onClick={this.handleClick}
+            style={style}
+          >
+            <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
+          </button>
+        }
+      </Motion>
+    );
+  }
+
+}
+
+export default IconButton;
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 231c517e9..727674dcf 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -130,6 +130,14 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
+  handleBookmarkClick = () => {
+    this.props.onBookmark(this.props.status);
+  }
+
+  handleReblogClick = (e) => {
+    this.props.onReblog(this.props.status, e);
+  }
+  
   _openInteractionDialog = type => {
     window.open(`/interact/${this.props.status.get('id')}?type=${type}`, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
   }
@@ -332,6 +340,7 @@ class StatusActionBar extends ImmutablePureComponent {
         <IconButton className='status__action-bar-button' disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} />
         <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
         {shareButton}
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 
         <div className='status__action-bar-dropdown'>
           <DropdownMenuContainer
diff --git a/app/javascript/mastodon/features/compose/components/announcements.js b/app/javascript/mastodon/features/compose/components/announcements.js
new file mode 100644
index 000000000..ad7043e89
--- /dev/null
+++ b/app/javascript/mastodon/features/compose/components/announcements.js
@@ -0,0 +1,127 @@
+import React from 'react';
+import Immutable from 'immutable';
+import PropTypes from 'prop-types';
+import Link from 'react-router-dom/Link';
+import { defineMessages, injectIntl } from 'react-intl';
+import IconButton from '../../../components/announcement_icon_button';
+import Motion from 'react-motion/lib/Motion';
+import spring from 'react-motion/lib/spring';
+
+const Collapsable = ({ fullHeight, minHeight, isVisible, children }) => (
+  <Motion defaultStyle={{ height: isVisible ? fullHeight : minHeight }} style={{ height: spring(!isVisible ? minHeight : fullHeight) }}>
+    {({ height }) =>
+      <div style={{ height: `${height}px`, overflow: 'hidden' }}>
+        {children}
+      </div>
+    }
+  </Motion>
+);
+
+Collapsable.propTypes = {
+  fullHeight: PropTypes.number.isRequired,
+  minHeight: PropTypes.number.isRequired,
+  isVisible: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+const messages = defineMessages({
+  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
+  welcome: { id: 'welcome.message', defaultMessage: '{domain}へようこそ!' },
+  markdown: { id: 'markdown.list', defaultMessage: 'markdown一覧' },
+});
+
+const hashtags = Immutable.fromJS([
+  '神崎ドン自己紹介',
+]);
+
+class Announcements extends React.PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    homeSize: PropTypes.number,
+    isLoading: PropTypes.bool,
+  };
+
+  state = {
+    showId: null,
+    isLoaded: false,
+  };
+
+  onClick = (announcementId, currentState) => {
+    this.setState({ showId: currentState.showId === announcementId ? null : announcementId });
+  }
+  nl2br (text) {
+    return text.split(/(\n)/g).map((line, i) => {
+      if (line.match(/(\n)/g)) {
+        return React.createElement('br', { key: i });
+      }
+      return line;
+    });
+  }
+
+  render () {
+    const { intl } = this.props;
+
+    return (
+      <ul className='announcements'>
+        <li>
+          <Collapsable isVisible={this.state.showId === 'markdown'} fullHeight={1240} minHeight={20} >
+            <div className='announcements__body'>
+              <p>{ this.nl2br(intl.formatMessage(messages.markdown, { domain: document.title }))}<br />
+              <br />
+                (半角)は半角スペースを入力する必要がある場所です。(半角)だけの列は半角スペースのみが入力された列が必要であるを指します。<br /><br />
+                〜〜〜〜〜〜見出し〜〜〜〜〜〜<br /><br />
+                #(半角)見出しテキスト<br /><br />
+                #は1〜6個重ねることができます。<br /><br />
+                〜〜〜〜コードブロック〜〜〜〜<br /><br />
+                `コード`<br /><br />
+                〜〜〜〜〜〜引用〜〜〜〜〜〜<br /><br />
+                >引用文<br />
+                (半角)<br />
+                ここから先は引用が切れます<br />
+                引用は複数回重ねることが可能です。<br /><br />
+                〜〜〜〜〜〜リスト〜〜〜〜〜〜<br /><br />
+                (半角)<br />
+                +(半角)内容1<br />
+                +(半角)内容2<br />
+                (半角)<br /><br />
+                内容の数に制限はありません。<br />
+                投稿トップにリストを持ってくる場合に限り1行目の(半角)は必要ありません。<br />
+                +(半角)を1.(半角)に置き換えることで数字付きリストになります。<br /><br />
+                〜〜〜〜〜上付き文字〜〜〜〜〜<br /><br />
+                _上付き文字_<br /><br />
+                〜〜〜〜〜下付き文字〜〜〜〜〜<br /><br />
+                __下付き文字__<br /><br />
+                〜〜〜〜〜小さい文字〜〜〜〜〜<br /><br />
+                ___小さい文字___<br /><br />
+                〜〜〜〜〜取り消し線〜〜〜〜〜<br /><br />
+                ~~取り消したい文字列~~<br /><br />
+                〜〜〜〜〜〜横罫線〜〜〜〜〜〜<br /><br />
+                ___<br /><br />
+                〜〜〜〜〜〜リンク〜〜〜〜〜〜<br /><br />
+                [リンク文章](https://・・・)<br /><br />
+                〜〜〜〜〜〜画像〜〜〜〜〜〜<br /><br />
+                ![画像説明](https://・・・)<br /><br />
+                リンク、画像ともにURLにはhttps://から始まる物のみご利用可能です。
+      			  </p>
+            </div>
+          </Collapsable>
+          <div className='announcements__icon'>
+            <IconButton title={intl.formatMessage(messages.toggle_visible)} icon='caret-up' onClick={() => this.onClick('markdown', this.state)} size={20} animate active={this.state.showId === 'markdown'} />
+          </div>
+        </li>
+      </ul>
+    );
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (!this.state.isLoaded) {
+      if (!nextProps.isLoading && (nextProps.homeSize === 0 || this.props.homeSize !== nextProps.homeSize)) {
+        this.setState({ isLoaded: true });
+      }
+    }
+  }
+
+}
+
+export default injectIntl(Announcements);
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index 47e189251..14d8ee795 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -20,6 +20,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { length } from 'stringz';
 import { countableText } from '../util/counter';
 import Icon from 'mastodon/components/icon';
+import { UserCounter } from './user_counter';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
@@ -28,6 +29,10 @@ const messages = defineMessages({
   spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
   publish: { id: 'compose_form.publish', defaultMessage: 'Toot' },
   publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
+
+  
+  utilBtns_goji: { id: 'compose_form.utilBtns_goji', defaultMessage: 'Typo!!!' },
+  utilBtns_harukin: { id: 'compose_form.utilBtns_harukin', defaultMessage: 'Burn Harukin' }
 });
 
 export default @injectIntl
@@ -60,7 +65,9 @@ class ComposeForm extends ImmutablePureComponent {
     onPickEmoji: PropTypes.func.isRequired,
     showSearch: PropTypes.bool,
     anyMedia: PropTypes.bool,
-    singleColumn: PropTypes.bool,
+    singleColumn: PropTypes.bool,  
+    onGojiSubmit: PropTypes.func.isRequired,
+    onHarukinSubmit: PropTypes.func.isRequired
   };
 
   static defaultProps = {
@@ -88,7 +95,7 @@ class ComposeForm extends ImmutablePureComponent {
     const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props;
     const fulltext = [this.props.spoilerText, countableText(this.props.text)].join('');
 
-    if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > 500 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
+    if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > 2048 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
       return;
     }
 
@@ -177,11 +184,15 @@ class ComposeForm extends ImmutablePureComponent {
     this.props.onPickEmoji(position, data, needsSpace);
   }
 
+  
+  handleOnGojiSubmit = () => this.props.onGojiSubmit(this.autosuggestTextarea.textarea);
+  handleOnHarukinSubmit = () => this.props.onHarukinSubmit(this.autosuggestTextarea.textarea);
+
   render () {
     const { intl, onPaste, showSearch, anyMedia } = this.props;
     const disabled = this.props.isSubmitting;
     const text     = [this.props.spoilerText, countableText(this.props.text)].join('');
-    const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > 500 || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
+    const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > 2048 || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
     let publishText = '';
 
     if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
@@ -243,11 +254,22 @@ class ComposeForm extends ImmutablePureComponent {
             <PrivacyDropdownContainer />
             <SpoilerButtonContainer />
           </div>
-          <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
+          <div className='character-counter__wrapper'><CharacterCounter max={2048} text={text} /></div>
         </div>
 
         <div className='compose-form__publish'>
-          <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
+          <div className='compose-form__publish-button-wrapper'>
+            
+            <Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block>
+              <span className="fa fa-send">{publishText}</span>
+            </Button>
+          </div>
+        </div>
+
+        <div className="compose-form__utilBtns">
+
+          <Button className="compose-form__utilBtns-goji" text={intl.formatMessage(messages.utilBtns_goji)} onClick={this.handleOnGojiSubmit} block />
+          <Button className="compose-form__utilBtns-harukin" text={intl.formatMessage(messages.utilBtns_harukin)} onClick={this.handleOnHarukinSubmit} block />
         </div>
       </div>
     );
diff --git a/app/javascript/mastodon/features/compose/components/user_counter.js b/app/javascript/mastodon/features/compose/components/user_counter.js
new file mode 100644
index 000000000..e49d2f1a8
--- /dev/null
+++ b/app/javascript/mastodon/features/compose/components/user_counter.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class UserCounter extends React.PureComponent {
+  render () {
+    return (
+      <span>10人</span>
+    );
+  }
+}
diff --git a/app/javascript/mastodon/features/compose/containers/announcements_container.js b/app/javascript/mastodon/features/compose/containers/announcements_container.js
new file mode 100644
index 000000000..e1dbb29b9
--- /dev/null
+++ b/app/javascript/mastodon/features/compose/containers/announcements_container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import Announcements from '../components/announcements';
+
+const mapStateToProps = state => {
+  return {
+    homeSize: state.getIn(['timelines', 'home', 'items']).size,
+    isLoading: state.getIn(['timelines', 'home', 'isLoading']),
+  };
+};
+
+export default connect(mapStateToProps)(Announcements);
diff --git a/app/javascript/mastodon/features/compose/containers/compose_form_container.js b/app/javascript/mastodon/features/compose/containers/compose_form_container.js
index 37a0e8845..c4b27ad79 100644
--- a/app/javascript/mastodon/features/compose/containers/compose_form_container.js
+++ b/app/javascript/mastodon/features/compose/containers/compose_form_container.js
@@ -11,6 +11,11 @@ import {
   uploadCompose,
 } from '../../../actions/compose';
 
+import {
+  submitGoji,
+  submitHarukin
+} from '../../../actions/UtilBtns';
+
 const mapStateToProps = state => ({
   text: state.getIn(['compose', 'text']),
   suggestions: state.getIn(['compose', 'suggestions']),
@@ -60,6 +65,18 @@ const mapDispatchToProps = (dispatch) => ({
   onPickEmoji (position, data, needsSpace) {
     dispatch(insertEmojiCompose(position, data, needsSpace));
   },
+  
+  onRisaSubmit (textarea) {
+    dispatch(submitRisa(textarea));
+  },
+
+  onGojiSubmit (textarea) {
+    dispatch(submitGoji(textarea));
+  },
+
+  onHarukinSubmit (textarea) {
+    dispatch(submitHarukin(textarea));
+  },
 
 });
 
diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js
index e2de8b0e6..474527a4b 100644
--- a/app/javascript/mastodon/features/compose/index.js
+++ b/app/javascript/mastodon/features/compose/index.js
@@ -17,6 +17,7 @@ import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
 import { mascot } from '../../initial_state';
 import Icon from 'mastodon/components/icon';
 import { logOut } from 'mastodon/utils/log_out';
+import AnnouncementsContainer from './containers/announcements_container';
 
 const messages = defineMessages({
   start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
@@ -127,6 +128,7 @@ class Compose extends React.PureComponent {
             <NavigationContainer onClose={this.onBlur} />
 
             <ComposeFormContainer />
+            <AnnouncementsContainer />
 
             <div className='drawer__inner__mastodon'>
               <img alt='' draggable='false' src={mascot || elephantUIPlane} />
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js
index d9838e1c7..411c726ec 100644
--- a/app/javascript/mastodon/features/getting_started/index.js
+++ b/app/javascript/mastodon/features/getting_started/index.js
@@ -18,6 +18,7 @@ import TrendsContainer from './containers/trends_container';
 const messages = defineMessages({
   home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
   notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
+  admin_notifications: { id: 'tabs_bar.admin_notifications', defaultMessage: 'Admin Notifications' },
   public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
   settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
   community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
@@ -98,7 +99,7 @@ class GettingStarted extends ImmutablePureComponent {
     if (multiColumn) {
       navItems.push(
         <ColumnSubheading key={i++} text={intl.formatMessage(messages.discover)} />,
-        <ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />,
+	<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />,
         <ColumnLink key={i++} icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />,
       );
 
@@ -107,9 +108,10 @@ class GettingStarted extends ImmutablePureComponent {
       if (profile_directory) {
         navItems.push(
           <ColumnLink key={i++} icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />,
-        );
+          <ColumnLink key={i++} icon='bullhorn' text={intl.formatMessage(messages.admin_notifications)} to='/timelines/tag/Yづinfo' />,
+	);
 
-        height += 48;
+        height += 48*2;
       }
 
       navItems.push(
@@ -120,9 +122,10 @@ class GettingStarted extends ImmutablePureComponent {
     } else if (profile_directory) {
       navItems.push(
         <ColumnLink key={i++} icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />,
+        <ColumnLink key={i++} icon='bullhorn' text={intl.formatMessage(messages.admin_notifications)} to='/timelines/tag/Yづinfo' />,
       );
 
-      height += 48;
+      height += 48*2;
     }
 
     navItems.push(
diff --git a/app/javascript/mastodon/locales/ja.json b/app/javascript/mastodon/locales/ja.json
index ec3d0ee59..7b9d4fbbb 100644
--- a/app/javascript/mastodon/locales/ja.json
+++ b/app/javascript/mastodon/locales/ja.json
@@ -69,7 +69,7 @@
   "column.lists": "リスト",
   "column.mutes": "ミュートしたユーザー",
   "column.notifications": "通知",
-  "column.pins": "固定されたトゥート",
+  "column.pins": "固定された投稿",
   "column.public": "連合タイムライン",
   "column_back_button.label": "戻る",
   "column_header.hide_settings": "設定を隠す",
@@ -87,7 +87,7 @@
   "compose_form.hashtag_warning": "このトゥートは公開設定ではないのでハッシュタグの一覧に表示されません。公開トゥートだけがハッシュタグで検索できます。",
   "compose_form.lock_disclaimer": "あなたのアカウントは{locked}になっていません。誰でもあなたをフォローすることができ、フォロワー限定の投稿を見ることができます。",
   "compose_form.lock_disclaimer.lock": "承認制",
-  "compose_form.placeholder": "今なにしてる？",
+  "compose_form.placeholder": "ちょうどL.A.に到着しました。",
   "compose_form.poll.add_option": "追加",
   "compose_form.poll.duration": "アンケート期間",
   "compose_form.poll.option_placeholder": "項目 {number}",
@@ -102,6 +102,8 @@
   "compose_form.spoiler.marked": "閲覧注意が設定されています",
   "compose_form.spoiler.unmarked": "閲覧注意が設定されていません",
   "compose_form.spoiler_placeholder": "ここに警告を書いてください",
+  "compose_form.utilBtns_goji": "誤字盛！",
+  "compose_form.utilBtns_harukin": "はるきん焼却",
   "confirmation_modal.cancel": "キャンセル",
   "confirmations.block.block_and_report": "ブロックし通報",
   "confirmations.block.confirm": "ブロック",
@@ -180,7 +182,8 @@
   "getting_started.invite": "招待",
   "getting_started.open_source_notice": "Mastodonはオープンソースソフトウェアです。誰でもGitHub ( {github} ) から開発に参加したり、問題を報告したりできます。",
   "getting_started.security": "アカウント設定",
-  "getting_started.terms": "プライバシーポリシー",
+  "getting_started.security": "セキュリティ",
+  "getting_started.terms": "利用規約とプライバシーポリシー",
   "hashtag.column_header.tag_mode.all": "と {additional}",
   "hashtag.column_header.tag_mode.any": "か {additional}",
   "hashtag.column_header.tag_mode.none": "({additional} を除く)",
@@ -190,6 +193,7 @@
   "hashtag.column_settings.tag_mode.any": "いずれかを含む",
   "hashtag.column_settings.tag_mode.none": "これらを除く",
   "hashtag.column_settings.tag_toggle": "このカラムに追加のタグを含める",
+  "home.column_settings.advanced": "高度な設定",
   "home.column_settings.basic": "基本設定",
   "home.column_settings.show_reblogs": "ブースト表示",
   "home.column_settings.show_replies": "返信表示",
@@ -281,7 +285,8 @@
   "navigation_bar.filters": "フィルター設定",
   "navigation_bar.follow_requests": "フォローリクエスト",
   "navigation_bar.follows_and_followers": "フォロー・フォロワー",
-  "navigation_bar.info": "このサーバーについて",
+  "navigation_bar.generate_qrcode": "プロフィールのQRコードを生成",
+  "navigation_bar.info": "Yづドンについて",
   "navigation_bar.keyboard_shortcuts": "ホットキー",
   "navigation_bar.lists": "リスト",
   "navigation_bar.logout": "ログアウト",
@@ -291,7 +296,12 @@
   "navigation_bar.preferences": "ユーザー設定",
   "navigation_bar.public_timeline": "連合タイムライン",
   "navigation_bar.security": "セキュリティ",
-  "notification.favourite": "{name}さんがあなたのトゥートをお気に入りに登録しました",
+  "notification.and_n_others": "and {count, plural, one {# other} other {# others}}",
+  "notification.and_n_others": "と、他 {count} 件",
+  "navigation_bar.announcements": "運営からのお知らせ",
+  "navigation_bar.trends": "トレンド",
+  "navigation_bar.bookmarks": "ブックマーク",
+  "notification.favourite": "{name}さんがあなたのトゥートに╰( ^o^)╮-=ﾆ=一＝三★しました",
   "notification.follow": "{name}さんにフォローされました",
   "notification.follow_request": "{name} さんがあなたにフォローリクエストしました",
   "notification.mention": "{name}さんがあなたに返信しました",
@@ -338,6 +348,7 @@
   "privacy.unlisted.long": "誰でも閲覧可、公開TLに非表示",
   "privacy.unlisted.short": "未収載",
   "refresh": "更新",
+  "qr_modal.description": "QRコードを読み取って簡単にプロフィールにアクセスしましょう。",
   "regeneration_indicator.label": "読み込み中…",
   "regeneration_indicator.sublabel": "ホームタイムラインは準備中です！",
   "relative_time.days": "{number}日前",
@@ -409,6 +420,7 @@
   "status.unpin": "プロフィールへの固定を解除",
   "suggestions.dismiss": "隠す",
   "suggestions.header": "興味あるかもしれません…",
+  "tabs_bar.admin_notifications": "Adminからのお知らせ",
   "tabs_bar.federated_timeline": "連合",
   "tabs_bar.home": "ホーム",
   "tabs_bar.local_timeline": "ローカル",
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 8ebc45b62..4a4975a21 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -26,3 +26,6 @@
 @import 'mastodon/dashboard';
 @import 'mastodon/rtl';
 @import 'mastodon/accessibility';
+
+@import 'markdown';
+@import 'astarte';
diff --git a/app/javascript/styles/astarte.scss b/app/javascript/styles/astarte.scss
new file mode 100644
index 000000000..66507b944
--- /dev/null
+++ b/app/javascript/styles/astarte.scss
@@ -0,0 +1,59 @@
+
+  .announcements {
+    padding: 0 10px;
+  
+    li {
+      display: flex;
+      padding: 10px;
+      color: #282c37;
+      background: darken($white, 10%);
+      border-radius: 4px;
+  
+      & + li {
+        margin-top: 10px;
+      }
+    }
+  }
+  
+  .announcements__admin {
+    width: 100%;
+    position: relative;
+  
+    p {
+      padding: 0 5px;
+      font-size: 14px;
+    }
+  }
+  
+  .announcements__icon {
+    display: inline-block;
+    position: absolute;
+    margin: -5px 5px;
+    right: 10px;
+  }
+  
+  .announcements__body {
+    width: 100%;
+    position: relative;
+  
+    p {
+      padding: 0 5px;
+      font-size: 14px;
+    }
+  
+    a {
+      display: inline-block;
+      float: right;
+      clear: both;
+      color: #282c37;
+      background: darken($white, 5%);
+      text-decoration: none;
+      padding: 1px 10px 0;
+      border: solid 1px #282c37;
+      font-size: 10px;
+      font-weight: 600;
+      border-radius: 4px;
+      margin-top: 5px;
+    }
+  }
+  
diff --git a/app/javascript/styles/contrast.scss b/app/javascript/styles/contrast.scss
index 5b43aecbe..31805363c 100644
--- a/app/javascript/styles/contrast.scss
+++ b/app/javascript/styles/contrast.scss
@@ -1,3 +1,5 @@
 @import 'contrast/variables';
 @import 'application';
 @import 'contrast/diff';
+
+@import 'markdown';
diff --git a/app/javascript/styles/markdown.scss b/app/javascript/styles/markdown.scss
new file mode 100644
index 000000000..be08de0cd
--- /dev/null
+++ b/app/javascript/styles/markdown.scss
@@ -0,0 +1,266 @@
+.status__content {
+
+  font-family: inherit;
+
+  h1{
+    color: #ec840d;
+    font-weight: bold;
+    font-size: 1.6em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #ff0000;
+  }
+
+  h2{
+    color: #ec840d;
+    font-weight: bold;
+    font-size: 1.5em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #fffb00;
+  }
+
+  h3{
+    color: #ec840d;
+    font-weight: bold;
+    font-size: 1.4em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #2bff00;
+  }
+
+  h4{
+    color: #ec840d;
+    font-weight: bold;
+    font-size: 1.3em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #00ffea;
+  }
+
+  h5{
+    color: #ec840d;
+    font-weight: bold;
+    font-size: 1.2em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #0004ff;
+  }
+
+  h6{
+    color: #ec840d;
+    font-weight: bold;
+    font-size: 1.1em;
+    padding: 0.5em;
+    display: inline-block;
+    line-height: 1.3;
+    background: #dbebf8;
+    vertical-align: middle;
+    border-radius: 25px 25px 25px 25px;
+    text-align: center;
+    border-bottom: solid 3px #7700ff;
+  }
+
+  em{
+    font-style: italic;
+  }
+
+  strong{
+    font-weight: bold;
+  }
+
+  code{
+    display: block;
+    border-left: 2px solid;
+    border-color: #079903;
+    color: $white;
+    padding-left: 10px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 5px;
+    background-color: #000000;
+
+    .positive{
+      color: #5bda57;
+    }
+
+    .negative{
+      color: #ff4949;
+    }
+
+    .rust-fanc{
+      color: #ba7eff;
+    }
+
+    .ruby-func{
+      color: #24a8e6;
+    }
+
+    .rust-macro{
+      color: #d2ff6a;
+    }
+
+    .contents{
+      color: #ff9925;
+    }
+  }
+
+  pre{
+    display: inline-block;
+    font-family: 'Noto Sans Japanese', sans-serif;
+    font-weight: 400;
+  }
+
+  p ~ blockquote {
+    margin-top: -8px;
+  }
+
+  blockquote{
+      padding-left: 8px;
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
+      color: $primary-text-color;
+      background-color: $ui-base-color;
+      display: block;
+      border-left: 4px solid $classic-highlight-color;
+  }
+
+  ul.md-contents {
+    border: double 4px #21b384;
+    padding: 0.5em 1em 0.5em 2.3em;
+    position: relative;
+  }
+  ul li.md-contents {
+    line-height: 1.5;
+    padding: 0.2em 0;
+    list-style-type: none!important;
+  }
+  ul li.md-contents:before {
+    font-family: FontAwesome;
+    content: "\f0a4";
+    position: absolute;
+    left : 1em;
+    color: #21b384;
+  }
+
+  ol.md-contents {
+    border: double 4px #ff954f;
+    padding: 0.5em 1em 0.5em 1em;
+    position: relative;
+    list-style: inside decimal;
+  }
+
+  ol li.md-contents {
+    line-height: 1.5;
+    padding: 0.2em 0;
+  }
+
+  hr {
+    border-width: 2px 0px 0px 0px;
+    border-style: dashed;
+    border-color: #ff7676;
+    height: 1px;
+    }
+
+  p>a>img{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  a>img{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  p>a{
+    color: #1FBFF9;
+  }
+
+  a{
+    color: #1FBFF9;
+  }
+
+  sup{
+    font-size: 75.5%;
+    vertical-align: top;
+    position: relative;
+    top: -0.5em;
+  }
+
+  sub{
+    font-size: 75.5%;
+    vertical-align: bottom;
+    position: relative;
+    top: 0.5em;
+  }
+
+  small{
+    font-size: 50.0%;
+    vertical-align: bottom;
+    position: relative;
+  }
+
+  table {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    color: $classic-highlight-color;
+    display: block;
+    width: 100%;
+    overflow: auto;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  table tr{
+    background-color: #000000;
+  }
+
+  table th, table td{
+    padding: 6px 13px;
+    border: 1px solid $classic-highlight-color;
+  }
+
+  table th{
+    font-weight: 600;
+  }
+
+  table thead tr{
+    background-color: $black;
+  }
+
+  td, th{
+    padding: 0;
+  }
+
+  span.img_FTL {
+    display: none;
+  }
+
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-auto.scss b/app/javascript/styles/mastodon-auto.scss
new file mode 100644
index 000000000..ccb5d24eb
--- /dev/null
+++ b/app/javascript/styles/mastodon-auto.scss
@@ -0,0 +1,2 @@
+@use 'application';
+@media (prefers-color-scheme: light) { @import 'mastodon-light'; }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss
index 756a12d86..c99938bfa 100644
--- a/app/javascript/styles/mastodon-light.scss
+++ b/app/javascript/styles/mastodon-light.scss
@@ -1,3 +1,5 @@
 @import 'mastodon-light/variables';
 @import 'application';
 @import 'mastodon-light/diff';
+
+@import 'markdown';
diff --git a/app/javascript/styles/mastodon-material-auto.scss b/app/javascript/styles/mastodon-material-auto.scss
new file mode 100644
index 000000000..189b2891c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-auto.scss
@@ -0,0 +1,2 @@
+@use 'mastodon-material-dark';
+@media (prefers-color-scheme: light) { @import 'mastodon-material-light'; }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark.scss b/app/javascript/styles/mastodon-material-dark.scss
new file mode 100644
index 000000000..889983ed4
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/black.scss b/app/javascript/styles/mastodon-material-dark/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/black.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$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: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-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: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
new file mode 100644
index 000000000..c3c168316
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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: #313543;
+$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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
new file mode 100644
index 000000000..54d894fec
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
new file mode 100644
index 000000000..60c8370a2
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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(#000000, 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: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
new file mode 100644
index 000000000..77cef824f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$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: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: #1565C0;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
new file mode 100644
index 000000000..64f8d5842
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
new file mode 100644
index 000000000..8c575bce5
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
new file mode 100644
index 000000000..20336e96d
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/custom_color.scss b/app/javascript/styles/mastodon-material-dark/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/custom_config.scss b/app/javascript/styles/mastodon-material-dark/custom_config.scss
new file mode 100644
index 000000000..03e8e0c81
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/custom_config.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/mastodon-dark';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/custom_layout.scss b/app/javascript/styles/mastodon-material-dark/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/icon_config.scss b/app/javascript/styles/mastodon-material-dark/icon_config.scss
new file mode 100644
index 000000000..610c7e308
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/icon_config.scss
@@ -0,0 +1,26 @@
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
+
+$favorite-icon-color: #ffd600;  // Star
+//$favorite-icon-color: #ff4081;  // Heart
+//$favorite-icon-color: #db4437;  // +1
+//$favorite-icon-color: #ffffff;  // inverted +1
+
+
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment";  // blooming
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@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
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
new file mode 100644
index 000000000..825deaf8c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// Button radius settings
+$button-radius: 2px;
+
+
+// Card radius settings
+$card-radius: 2px;
+
+
+// Dialog radius settings
+$dialog-radius: 2px;
+
+
+// Menu radius settings
+$menu-radius: 2px;
+
+
+// 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/mastodon-material-dark/layout/material-v2.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
new file mode 100644
index 000000000..853d82b15
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@import '../theme/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 }
+}
+
+
+// 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/mastodon-material-dark/loader.scss b/app/javascript/styles/mastodon-material-dark/loader.scss
new file mode 100644
index 000000000..e962aa921
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/loader.scss
@@ -0,0 +1,7 @@
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/cards.scss b/app/javascript/styles/mastodon-material-dark/plugins/cards.scss
new file mode 100644
index 000000000..c134cbeeb
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+
+    > .scrollable { background: $background-color }
+}
+
+.status {
+    border-bottom: 0;
+    border-radius: $card-radius;
+    background: $card-background-color;
+
+    &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+    border-radius: $card-radius;
+    background: $card-background-color;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/dense.scss b/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
new file mode 100644
index 000000000..b3ba40812
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/plugins/dense.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+    &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+    &__buttons { height: 48px }
+
+    &__button {
+        margin: 8px;
+        padding: 10px 8px;
+
+        .fa { vertical-align: text-top }
+    }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+    padding: 12px 16px;
+
+    p { margin-bottom: 12px }
+}
+
+.compose-form {
+    .compose-form__publish { padding-top: 8px }
+}
+
+.status {
+    padding: 8px 8px 8px 66px;
+
+    &__expand { width: 66px }
+
+    &__info { padding-right: 0 }
+
+    &__avatar {
+        left: 8px;
+        top: 10px;
+    }
+
+    &__content { padding-top: 2px }
+}
+
+.detailed-status {
+    padding: 14px;
+
+    &__meta { margin-top: 14px }
+
+    &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/plugins/plus.scss b/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+    background: #eeeeee;
+    width: 28px !important;
+    height: 28px !important;
+
+    .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+    left: -34px;
+
+    .star-icon {
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        vertical-align: baseline;
+        font-size: 18px;
+
+        &.fa-fw::before { vertical-align: middle }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/_functions.scss b/app/javascript/styles/mastodon-material-dark/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss b/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
new file mode 100644
index 000000000..5f573e339
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/_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/mastodon-material-dark/theme/account.scss b/app/javascript/styles/mastodon-material-dark/theme/account.scss
new file mode 100644
index 000000000..34a8a1816
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/account.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name { color: $primary-text-color }
+    .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;
+            }
+
+            &-overlay { border-radius: $avater-radius }
+        }
+    }
+
+    &__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 }
+                }
+            }
+        }
+
+        &__content { color: $secondary-text-color }
+    }
+
+    &__section-headline {
+        background: $text-tab-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $text-tab-indicator-color;
+
+            &.active {
+                color: $text-tab-indicator-active-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
+
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $text-tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $text-tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/base_config.scss b/app/javascript/styles/mastodon-material-dark/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Status font size in timeline
+$status-font-size: 15px;  // mastodon default
+//$status-font-size: 16px;  // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px;  // mastodon default
+//$name-font-size: 16px;  // compatible with material design
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/basics.scss b/app/javascript/styles/mastodon-material-dark/theme/basics.scss
new file mode 100644
index 000000000..4c122d1c6
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+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/mastodon-material-dark/theme/button.scss b/app/javascript/styles/mastodon-material-dark/theme/button.scss
new file mode 100644
index 000000000..1231bac98
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+        }
+    }
+
+    &.overlayed {
+        border-radius: 50%;
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+    
+        &:hover {
+            background: $media-icon-background-color;
+            color: $media-icon-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 }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-background-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/columns.scss b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
new file mode 100644
index 000000000..54effffd3
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/columns.scss
@@ -0,0 +1,474 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-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;
+    }
+
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
+    &.active {
+        .column-header__icon {
+            color: $top-bar-unread-icon-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        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;
+        padding: 8px 0;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            text-decoration: none;
+        }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
+    }
+
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &::before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        background: $card-background-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: $top-bar-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;
+    }
+
+    &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $text-field-background-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-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;
+        }
+    }
+}
+
+// read status in notification column
+.muted {
+    .status {
+        &__content {
+            color: $read-primary-text-color;
+    
+            p { color: $read-primary-text-color }
+    
+            a { color: $read-secondary-text-color }
+        }
+
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-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 }
+    }
+
+    &__trends {
+        background: $background-color;
+        margin-bottom: 0;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends {
+    &__header {
+        color: $section-text-color;
+        background: transparent;
+        border-bottom: 1px solid $border-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__item {
+        padding: 16px;
+        border-bottom: none;
+    
+        &__name {
+            color: $secondary-text-color;
+            font-size: 12px;
+    
+            a { color: $primary-text-color }
+        }
+    
+        &__current {
+            padding-right: 16px;
+            margin-left: 4px;
+            color: $secondary-text-color;
+        }
+    
+        &__sparkline path {
+            stroke: $primary-color;
+            fill: $primary-color;
+            fill-opacity: 0.5;
+        }
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.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: $tab-background-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $tab-background-color;
+            color: $tab-indicator-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-active-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
+    
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-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 {
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $relationship-tag-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/components.scss b/app/javascript/styles/mastodon-material-dark/theme/components.scss
new file mode 100644
index 000000000..ae5bfe158
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/components.scss
@@ -0,0 +1,534 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+            position: inherit;
+        }
+
+        &__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: 16px;
+                left: unset;
+                transform: none;
+            }
+        }
+    }
+}
+
+.search-popout {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+    border-radius: 0px $bar-radius;
+    border-top: 1px solid $border-color;
+    margin-top: 0;
+    color: $tips-text-color;
+
+    h4 {
+        color: $secondary-text-color;
+    }
+
+    em {
+        color: $search-bar-text-color;
+    }
+}
+
+.search-results {
+    &__header {
+        color: $secondary-text-color;
+        background-color: $card-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: 8px 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: $text-field-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+    
+            &::placeholder { color: $tips-text-color }
+        }
+
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-background-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-background-active-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: 16px 12px 16px 0 }
+
+            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 }
+    }
+}
+
+.no-reduce-motion .spoiler-input {
+    transition-duration: .2s, .2s;
+}
+
+
+.poll {
+    &__input {
+        border: 2px solid $control-border-color;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $text-field-background-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-active-color }
+    }
+
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $poll-bar-color;
+    
+        &.leading { background: $poll-bar-leading-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-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 {
+    box-shadow: none;
+    border: 1px solid $border-color;
+    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 }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/control.scss b/app/javascript/styles/mastodon-material-dark/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+    width: 36px;
+    height: 16px;
+    border-radius: 15px;
+
+    &-track {
+        background-color: $toggle-track-color;
+        margin: 4px;
+        width: 36px;
+        height: 16px;
+
+        &-check { visibility: hidden }
+        &-x { visibility: hidden }
+    }
+
+    &-thumb {
+        @include shadow-1dp;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        background-color: $toggle-thumb-color;
+    }
+
+    &--checked {
+        .react-toggle{
+            &-track { background-color: $toggle-track-active-color }
+
+            &-thumb {
+                background-color: $toggle-thumb-active-color;
+                left: 22px;
+            }
+        }
+
+        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+    }
+
+    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+    padding: 8px 0;
+
+    &__input {
+        border: 2px solid $border-color;
+
+        &.checked {
+            border-color: $icon-button-active-color;
+            background: $icon-button-active-color;
+            padding: 3px;
+            background-clip: content-box;
+        }
+    }
+}
+
+.compose-form__sensitive-button .checkbox {
+    border: 2px solid $border-color;
+    border-radius: 2px;
+
+    &.active {
+        border-color: $primary-color;
+        background: $primary-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
new file mode 100644
index 000000000..70e22752d
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-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: $menu-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-active-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: $search-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/mastodon-material-dark/theme/icons.scss b/app/javascript/styles/mastodon-material-dark/theme/icons.scss
new file mode 100644
index 000000000..1367647ec
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+    &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub }  // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle }  // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+    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/mastodon-material-dark/theme/material-icons.scss b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
new file mode 100644
index 000000000..747856253
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
@@ -0,0 +1,159 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.fa {
+    &.fa-bars,
+    &.fa-navicon,
+    &.fa-reorder,
+    &.fa-globe,
+    &.fa-cog,
+    &.fa-cogs,
+    &.fa-gears,
+    &.fa-sign-out,
+    &.fa-search,
+    &.fa-times,
+    &.fa-times-circle,
+    &.fa-close,
+    &.fa-remove,
+    &.fa-chevron-down,
+    &.fa-ellipsis-v,
+    &.fa-paperclip,
+    &.fa-tasks,
+    &.fa-plus,
+    &.fa-unlock,
+    &.fa-lock,
+    &.fa-envelope,
+    &.fa-home,
+    &.fa-bullhorn,
+    &.fa-sliders,
+    &.fa-chevron-left,
+    &.fa-chevron-right,
+    &.fa-reply,
+    &.fa-reply-all,
+    &.fa-share-alt,
+    &.fa-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.fa-eraser,
+    &.fa-users,
+    &.fa-file-text,
+    &.fa-user-plus,
+    &.fa-address-book,
+    &.fa-address-book-o,
+    &.fa-list,
+    &.fa-list-ul,
+    &.fa-eye,
+    &.fa-eye-slash,
+    &.fa-pencil,
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check,
+    &.fa-quote-right {
+        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-icon }
+    &.fa-reply-all::before { content: "reply_all" }
+    &.fa-share-alt::before { content: "share" }
+    &.fa-star::before { content: $favorite-icon }
+    &.fa-bookmark::before { content: "bookmark" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
+    &.fa-bell::before { content: "notifications" }
+    &.fa-eraser::before { content: "clear_all" }
+    &.fa-users::before { content: "people" }
+    &.fa-file-text::before { content: "web" }
+    &.fa-user-plus::before { content: "person_add" }
+    &.fa-address-book::before { content: "explore" }
+    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before { content: "list" }
+    &.fa-list-ul::before { content: "list" }
+    &.fa-eye::before { content: "visibility" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "delete" }
+    &.fa-check::before { content: "check" }
+    &.fa-quote-right::before { content: "format_quote" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark::before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+    height: 18px;
+    width: 18px;
+    transition: none;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/media.scss b/app/javascript/styles/mastodon-material-dark/theme/media.scss
new file mode 100644
index 000000000..9d0203828
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/media.scss
@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
+
+.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 }
+    }
+}
+
+.media-modal {
+    &__nav {
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
+    }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/modal.scss b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
new file mode 100644
index 000000000..2748c8723
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/modal.scss
@@ -0,0 +1,102 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 300px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.actions-modal {
+    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;
+            color: $ui-text-color;
+        }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-background-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
+}
+
+.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;
+    }
+
+    &__comment {
+        border-right: none;
+
+        .setting-text-label { color: $ui-text-color }
+    }
+}
+
+.embed-modal .embed-modal__container {
+    padding: 0 24px 24px 24px;
+
+    .hint {
+        margin-bottom: 16px;
+        color: $secondary-text-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/responsive.scss b/app/javascript/styles/mastodon-material-dark/theme/responsive.scss
new file mode 100644
index 000000000..9ae304041
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/responsive.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+
+        span {
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    .column { margin: 0 !important }
+    .search__input { padding: 16px 46px }
+
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
new file mode 100644
index 000000000..eedf77c2a
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: $name-font-size;
+        padding-right: 4px;
+    }
+
+    &__relative-time { color: $info-text-color }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__avatar {
+        left: 12px;
+        top: 12px;
+    }
+
+    &__content {
+        font-size: $status-font-size;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .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;
+        }
+    }
+
+    &__prepend {
+        color: $secondary-text-color;
+        margin-left: 64px;
+
+        .status__display-name strong { color: $secondary-text-color }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.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 }
+
+    &__actions {
+        &>div {
+            background: $media-icon-background-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        background: transparent;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+    background: $card-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 }
+    }
+}
+
+// search user trends
+.display-name {
+    &__html { color: $primary-text-color }
+    &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/theme.scss b/app/javascript/styles/mastodon-material-dark/theme/theme.scss
new file mode 100644
index 000000000..f92276549
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-dark/theme/variables.scss b/app/javascript/styles/mastodon-material-dark/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-dark/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light.scss b/app/javascript/styles/mastodon-material-light.scss
new file mode 100644
index 000000000..5068d6386
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'mastodon-material-light/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/black.scss b/app/javascript/styles/mastodon-material-light/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/black.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$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: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-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: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
new file mode 100644
index 000000000..c3c168316
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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: #313543;
+$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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
new file mode 100644
index 000000000..54d894fec
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
new file mode 100644
index 000000000..60c8370a2
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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(#000000, 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: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
new file mode 100644
index 000000000..77cef824f
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$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: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: #1565C0;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v1-light.scss b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
new file mode 100644
index 000000000..64f8d5842
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/v1-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
new file mode 100644
index 000000000..8c575bce5
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/color/v2-light.scss b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
new file mode 100644
index 000000000..20336e96d
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/color/v2-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/custom_color.scss b/app/javascript/styles/mastodon-material-light/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/custom_config.scss b/app/javascript/styles/mastodon-material-light/custom_config.scss
new file mode 100644
index 000000000..cf51584fc
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/custom_config.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/mastodon-light';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/custom_layout.scss b/app/javascript/styles/mastodon-material-light/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/icon_config.scss b/app/javascript/styles/mastodon-material-light/icon_config.scss
new file mode 100644
index 000000000..610c7e308
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/icon_config.scss
@@ -0,0 +1,26 @@
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
+
+$favorite-icon-color: #ffd600;  // Star
+//$favorite-icon-color: #ff4081;  // Heart
+//$favorite-icon-color: #db4437;  // +1
+//$favorite-icon-color: #ffffff;  // inverted +1
+
+
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment";  // blooming
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@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
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/layout/material-v1.scss b/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
new file mode 100644
index 000000000..825deaf8c
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// Button radius settings
+$button-radius: 2px;
+
+
+// Card radius settings
+$card-radius: 2px;
+
+
+// Dialog radius settings
+$dialog-radius: 2px;
+
+
+// Menu radius settings
+$menu-radius: 2px;
+
+
+// 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/mastodon-material-light/layout/material-v2.scss b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
new file mode 100644
index 000000000..853d82b15
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@import '../theme/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 }
+}
+
+
+// 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/mastodon-material-light/loader.scss b/app/javascript/styles/mastodon-material-light/loader.scss
new file mode 100644
index 000000000..e962aa921
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/loader.scss
@@ -0,0 +1,7 @@
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/plugins/cards.scss b/app/javascript/styles/mastodon-material-light/plugins/cards.scss
new file mode 100644
index 000000000..c134cbeeb
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+
+    > .scrollable { background: $background-color }
+}
+
+.status {
+    border-bottom: 0;
+    border-radius: $card-radius;
+    background: $card-background-color;
+
+    &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+    border-radius: $card-radius;
+    background: $card-background-color;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/plugins/dense.scss b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
new file mode 100644
index 000000000..b3ba40812
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/plugins/dense.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+    &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+    &__buttons { height: 48px }
+
+    &__button {
+        margin: 8px;
+        padding: 10px 8px;
+
+        .fa { vertical-align: text-top }
+    }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+    padding: 12px 16px;
+
+    p { margin-bottom: 12px }
+}
+
+.compose-form {
+    .compose-form__publish { padding-top: 8px }
+}
+
+.status {
+    padding: 8px 8px 8px 66px;
+
+    &__expand { width: 66px }
+
+    &__info { padding-right: 0 }
+
+    &__avatar {
+        left: 8px;
+        top: 10px;
+    }
+
+    &__content { padding-top: 2px }
+}
+
+.detailed-status {
+    padding: 14px;
+
+    &__meta { margin-top: 14px }
+
+    &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/plugins/plus.scss b/app/javascript/styles/mastodon-material-light/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+    background: #eeeeee;
+    width: 28px !important;
+    height: 28px !important;
+
+    .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+    left: -34px;
+
+    .star-icon {
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        vertical-align: baseline;
+        font-size: 18px;
+
+        &.fa-fw::before { vertical-align: middle }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/_functions.scss b/app/javascript/styles/mastodon-material-light/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/_mixins.scss b/app/javascript/styles/mastodon-material-light/theme/_mixins.scss
new file mode 100644
index 000000000..5f573e339
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/_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/mastodon-material-light/theme/account.scss b/app/javascript/styles/mastodon-material-light/theme/account.scss
new file mode 100644
index 000000000..34a8a1816
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/account.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name { color: $primary-text-color }
+    .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;
+            }
+
+            &-overlay { border-radius: $avater-radius }
+        }
+    }
+
+    &__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 }
+                }
+            }
+        }
+
+        &__content { color: $secondary-text-color }
+    }
+
+    &__section-headline {
+        background: $text-tab-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $text-tab-indicator-color;
+
+            &.active {
+                color: $text-tab-indicator-active-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
+
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $text-tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $text-tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/base_config.scss b/app/javascript/styles/mastodon-material-light/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Status font size in timeline
+$status-font-size: 15px;  // mastodon default
+//$status-font-size: 16px;  // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px;  // mastodon default
+//$name-font-size: 16px;  // compatible with material design
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/basics.scss b/app/javascript/styles/mastodon-material-light/theme/basics.scss
new file mode 100644
index 000000000..4c122d1c6
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+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/mastodon-material-light/theme/button.scss b/app/javascript/styles/mastodon-material-light/theme/button.scss
new file mode 100644
index 000000000..1231bac98
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+        }
+    }
+
+    &.overlayed {
+        border-radius: 50%;
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+    
+        &:hover {
+            background: $media-icon-background-color;
+            color: $media-icon-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 }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-background-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/columns.scss b/app/javascript/styles/mastodon-material-light/theme/columns.scss
new file mode 100644
index 000000000..54effffd3
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/columns.scss
@@ -0,0 +1,474 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-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;
+    }
+
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
+    &.active {
+        .column-header__icon {
+            color: $top-bar-unread-icon-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        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;
+        padding: 8px 0;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            text-decoration: none;
+        }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
+    }
+
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &::before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        background: $card-background-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: $top-bar-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;
+    }
+
+    &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $text-field-background-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-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;
+        }
+    }
+}
+
+// read status in notification column
+.muted {
+    .status {
+        &__content {
+            color: $read-primary-text-color;
+    
+            p { color: $read-primary-text-color }
+    
+            a { color: $read-secondary-text-color }
+        }
+
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-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 }
+    }
+
+    &__trends {
+        background: $background-color;
+        margin-bottom: 0;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends {
+    &__header {
+        color: $section-text-color;
+        background: transparent;
+        border-bottom: 1px solid $border-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__item {
+        padding: 16px;
+        border-bottom: none;
+    
+        &__name {
+            color: $secondary-text-color;
+            font-size: 12px;
+    
+            a { color: $primary-text-color }
+        }
+    
+        &__current {
+            padding-right: 16px;
+            margin-left: 4px;
+            color: $secondary-text-color;
+        }
+    
+        &__sparkline path {
+            stroke: $primary-color;
+            fill: $primary-color;
+            fill-opacity: 0.5;
+        }
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.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: $tab-background-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $tab-background-color;
+            color: $tab-indicator-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-active-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
+    
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-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 {
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $relationship-tag-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/components.scss b/app/javascript/styles/mastodon-material-light/theme/components.scss
new file mode 100644
index 000000000..ae5bfe158
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/components.scss
@@ -0,0 +1,534 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+            position: inherit;
+        }
+
+        &__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: 16px;
+                left: unset;
+                transform: none;
+            }
+        }
+    }
+}
+
+.search-popout {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+    border-radius: 0px $bar-radius;
+    border-top: 1px solid $border-color;
+    margin-top: 0;
+    color: $tips-text-color;
+
+    h4 {
+        color: $secondary-text-color;
+    }
+
+    em {
+        color: $search-bar-text-color;
+    }
+}
+
+.search-results {
+    &__header {
+        color: $secondary-text-color;
+        background-color: $card-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: 8px 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: $text-field-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+    
+            &::placeholder { color: $tips-text-color }
+        }
+
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-background-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-background-active-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: 16px 12px 16px 0 }
+
+            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 }
+    }
+}
+
+.no-reduce-motion .spoiler-input {
+    transition-duration: .2s, .2s;
+}
+
+
+.poll {
+    &__input {
+        border: 2px solid $control-border-color;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $text-field-background-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-active-color }
+    }
+
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $poll-bar-color;
+    
+        &.leading { background: $poll-bar-leading-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-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 {
+    box-shadow: none;
+    border: 1px solid $border-color;
+    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 }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/control.scss b/app/javascript/styles/mastodon-material-light/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+    width: 36px;
+    height: 16px;
+    border-radius: 15px;
+
+    &-track {
+        background-color: $toggle-track-color;
+        margin: 4px;
+        width: 36px;
+        height: 16px;
+
+        &-check { visibility: hidden }
+        &-x { visibility: hidden }
+    }
+
+    &-thumb {
+        @include shadow-1dp;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        background-color: $toggle-thumb-color;
+    }
+
+    &--checked {
+        .react-toggle{
+            &-track { background-color: $toggle-track-active-color }
+
+            &-thumb {
+                background-color: $toggle-thumb-active-color;
+                left: 22px;
+            }
+        }
+
+        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+    }
+
+    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+    padding: 8px 0;
+
+    &__input {
+        border: 2px solid $border-color;
+
+        &.checked {
+            border-color: $icon-button-active-color;
+            background: $icon-button-active-color;
+            padding: 3px;
+            background-clip: content-box;
+        }
+    }
+}
+
+.compose-form__sensitive-button .checkbox {
+    border: 2px solid $border-color;
+    border-radius: 2px;
+
+    &.active {
+        border-color: $primary-color;
+        background: $primary-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
new file mode 100644
index 000000000..70e22752d
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-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: $menu-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-active-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: $search-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/mastodon-material-light/theme/icons.scss b/app/javascript/styles/mastodon-material-light/theme/icons.scss
new file mode 100644
index 000000000..1367647ec
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+    &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub }  // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle }  // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+    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/mastodon-material-light/theme/material-icons.scss b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
new file mode 100644
index 000000000..747856253
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss
@@ -0,0 +1,159 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.fa {
+    &.fa-bars,
+    &.fa-navicon,
+    &.fa-reorder,
+    &.fa-globe,
+    &.fa-cog,
+    &.fa-cogs,
+    &.fa-gears,
+    &.fa-sign-out,
+    &.fa-search,
+    &.fa-times,
+    &.fa-times-circle,
+    &.fa-close,
+    &.fa-remove,
+    &.fa-chevron-down,
+    &.fa-ellipsis-v,
+    &.fa-paperclip,
+    &.fa-tasks,
+    &.fa-plus,
+    &.fa-unlock,
+    &.fa-lock,
+    &.fa-envelope,
+    &.fa-home,
+    &.fa-bullhorn,
+    &.fa-sliders,
+    &.fa-chevron-left,
+    &.fa-chevron-right,
+    &.fa-reply,
+    &.fa-reply-all,
+    &.fa-share-alt,
+    &.fa-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.fa-eraser,
+    &.fa-users,
+    &.fa-file-text,
+    &.fa-user-plus,
+    &.fa-address-book,
+    &.fa-address-book-o,
+    &.fa-list,
+    &.fa-list-ul,
+    &.fa-eye,
+    &.fa-eye-slash,
+    &.fa-pencil,
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check,
+    &.fa-quote-right {
+        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-icon }
+    &.fa-reply-all::before { content: "reply_all" }
+    &.fa-share-alt::before { content: "share" }
+    &.fa-star::before { content: $favorite-icon }
+    &.fa-bookmark::before { content: "bookmark" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
+    &.fa-bell::before { content: "notifications" }
+    &.fa-eraser::before { content: "clear_all" }
+    &.fa-users::before { content: "people" }
+    &.fa-file-text::before { content: "web" }
+    &.fa-user-plus::before { content: "person_add" }
+    &.fa-address-book::before { content: "explore" }
+    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before { content: "list" }
+    &.fa-list-ul::before { content: "list" }
+    &.fa-eye::before { content: "visibility" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "delete" }
+    &.fa-check::before { content: "check" }
+    &.fa-quote-right::before { content: "format_quote" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark::before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+    height: 18px;
+    width: 18px;
+    transition: none;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/media.scss b/app/javascript/styles/mastodon-material-light/theme/media.scss
new file mode 100644
index 000000000..9d0203828
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/media.scss
@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
+
+.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 }
+    }
+}
+
+.media-modal {
+    &__nav {
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
+    }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/modal.scss b/app/javascript/styles/mastodon-material-light/theme/modal.scss
new file mode 100644
index 000000000..2748c8723
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/modal.scss
@@ -0,0 +1,102 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 300px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.actions-modal {
+    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;
+            color: $ui-text-color;
+        }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-background-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
+}
+
+.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;
+    }
+
+    &__comment {
+        border-right: none;
+
+        .setting-text-label { color: $ui-text-color }
+    }
+}
+
+.embed-modal .embed-modal__container {
+    padding: 0 24px 24px 24px;
+
+    .hint {
+        margin-bottom: 16px;
+        color: $secondary-text-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/responsive.scss b/app/javascript/styles/mastodon-material-light/theme/responsive.scss
new file mode 100644
index 000000000..9ae304041
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/responsive.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+
+        span {
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    .column { margin: 0 !important }
+    .search__input { padding: 16px 46px }
+
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/statuses.scss b/app/javascript/styles/mastodon-material-light/theme/statuses.scss
new file mode 100644
index 000000000..eedf77c2a
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: $name-font-size;
+        padding-right: 4px;
+    }
+
+    &__relative-time { color: $info-text-color }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__avatar {
+        left: 12px;
+        top: 12px;
+    }
+
+    &__content {
+        font-size: $status-font-size;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .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;
+        }
+    }
+
+    &__prepend {
+        color: $secondary-text-color;
+        margin-left: 64px;
+
+        .status__display-name strong { color: $secondary-text-color }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.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 }
+
+    &__actions {
+        &>div {
+            background: $media-icon-background-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        background: transparent;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+    background: $card-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 }
+    }
+}
+
+// search user trends
+.display-name {
+    &__html { color: $primary-text-color }
+    &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/theme.scss b/app/javascript/styles/mastodon-material-light/theme/theme.scss
new file mode 100644
index 000000000..f92276549
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon-material-light/theme/variables.scss b/app/javascript/styles/mastodon-material-light/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/mastodon-material-light/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 06533246b..2310af268 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -703,10 +703,29 @@
     justify-content: flex-end;
     min-width: 0;
     flex: 0 0 auto;
-
+    padding-top: 10px;
+    
     .compose-form__publish-button-wrapper {
       overflow: hidden;
-      padding-top: 10px;
+
+      button {
+        display: inline-block;
+        width: auto;
+
+        margin-right: 0.5em;
+      }
+
+      button:last-child {
+        margin-right: auto;
+      }
+    }
+  }
+
+  .compose-form__utilBtns {
+    padding-top: 10px;
+
+    * {
+      margin-bottom: 1em;
     }
   }
 }
@@ -2021,7 +2040,7 @@ a.account__display-name {
       }
 
       &__inner {
-        position: fixed;
+        position: static;
         width: 285px;
         pointer-events: auto;
         height: 100%;
@@ -2390,6 +2409,7 @@ a.account__display-name {
   }
 
   .getting-started__wrapper,
+  .getting-started__trends,
   .search {
     margin-bottom: 10px;
   }
@@ -2496,24 +2516,13 @@ a.account__display-name {
   margin-bottom: 10px;
   height: calc(100% - 20px);
   overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-
-  & > a {
-    flex: 0 0 auto;
-  }
 
   hr {
-    flex: 0 0 auto;
     border: 0;
     background: transparent;
     border-top: 1px solid lighten($ui-base-color, 4%);
     margin: 10px 0;
   }
-
-  .flex-spacer {
-    background: transparent;
-  }
 }
 
 .drawer__pager {
@@ -2904,10 +2913,8 @@ a.account__display-name {
   }
 
   &__trends {
+    background: $ui-base-color;
     flex: 0 1 auto;
-    opacity: 1;
-    animation: fade 150ms linear;
-    margin-top: 10px;
 
     h4 {
       font-size: 12px;
@@ -2933,15 +2940,11 @@ a.account__display-name {
     @media screen and (max-height: 670px) {
       display: none;
     }
+  }
 
-    .trends__item {
-      border-bottom: 0;
-      padding: 10px;
-
-      &__current {
-        color: $darker-text-color;
-      }
-    }
+  &__scrollable {
+    max-height: 100%;
+    overflow-y: auto;
   }
 }
 
@@ -6178,6 +6181,12 @@ noscript {
   }
 }
 
+.embed-modal__qrcode {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .account__moved-note {
   padding: 14px 10px;
   padding-bottom: 16px;
@@ -6730,7 +6739,7 @@ noscript {
       font-size: 24px;
       line-height: 36px;
       font-weight: 500;
-      text-align: right;
+      text-align: center;
       padding-right: 15px;
       margin-left: 5px;
       color: $secondary-text-color;
@@ -6740,12 +6749,7 @@ noscript {
       flex: 0 0 auto;
       width: 50px;
 
-      path:first-child {
-        fill: rgba($highlight-text-color, 0.25) !important;
-        fill-opacity: 1 !important;
-      }
-
-      path:last-child {
+      path {
         stroke: lighten($highlight-text-color, 6%) !important;
         fill: none !important;
       }
diff --git a/app/javascript/styles/material-auto.scss b/app/javascript/styles/material-auto.scss
new file mode 100644
index 000000000..116958187
--- /dev/null
+++ b/app/javascript/styles/material-auto.scss
@@ -0,0 +1,2 @@
+@use 'material-dark';
+@media (prefers-color-scheme: light) { @import 'material-light'; }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black.scss b/app/javascript/styles/material-black.scss
new file mode 100644
index 000000000..19f29bc08
--- /dev/null
+++ b/app/javascript/styles/material-black.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'material-black/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/black.scss b/app/javascript/styles/material-black/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/material-black/color/black.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$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: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-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: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/mastodon-dark.scss b/app/javascript/styles/material-black/color/mastodon-dark.scss
new file mode 100644
index 000000000..c3c168316
--- /dev/null
+++ b/app/javascript/styles/material-black/color/mastodon-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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: #313543;
+$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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/mastodon-light.scss b/app/javascript/styles/material-black/color/mastodon-light.scss
new file mode 100644
index 000000000..54d894fec
--- /dev/null
+++ b/app/javascript/styles/material-black/color/mastodon-light.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/plus-classic.scss b/app/javascript/styles/material-black/color/plus-classic.scss
new file mode 100644
index 000000000..60c8370a2
--- /dev/null
+++ b/app/javascript/styles/material-black/color/plus-classic.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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(#000000, 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: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/v1-dark.scss b/app/javascript/styles/material-black/color/v1-dark.scss
new file mode 100644
index 000000000..77cef824f
--- /dev/null
+++ b/app/javascript/styles/material-black/color/v1-dark.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$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: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: #1565C0;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/v1-light.scss b/app/javascript/styles/material-black/color/v1-light.scss
new file mode 100644
index 000000000..64f8d5842
--- /dev/null
+++ b/app/javascript/styles/material-black/color/v1-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/v2-dark.scss b/app/javascript/styles/material-black/color/v2-dark.scss
new file mode 100644
index 000000000..8c575bce5
--- /dev/null
+++ b/app/javascript/styles/material-black/color/v2-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/color/v2-light.scss b/app/javascript/styles/material-black/color/v2-light.scss
new file mode 100644
index 000000000..20336e96d
--- /dev/null
+++ b/app/javascript/styles/material-black/color/v2-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/custom_color.scss b/app/javascript/styles/material-black/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-black/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/custom_config.scss b/app/javascript/styles/material-black/custom_config.scss
new file mode 100644
index 000000000..b85ed3d23
--- /dev/null
+++ b/app/javascript/styles/material-black/custom_config.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/black';
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/custom_layout.scss b/app/javascript/styles/material-black/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-black/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/icon_config.scss b/app/javascript/styles/material-black/icon_config.scss
new file mode 100644
index 000000000..610c7e308
--- /dev/null
+++ b/app/javascript/styles/material-black/icon_config.scss
@@ -0,0 +1,26 @@
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
+
+$favorite-icon-color: #ffd600;  // Star
+//$favorite-icon-color: #ff4081;  // Heart
+//$favorite-icon-color: #db4437;  // +1
+//$favorite-icon-color: #ffffff;  // inverted +1
+
+
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment";  // blooming
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@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
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/layout/material-v1.scss b/app/javascript/styles/material-black/layout/material-v1.scss
new file mode 100644
index 000000000..825deaf8c
--- /dev/null
+++ b/app/javascript/styles/material-black/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// Button radius settings
+$button-radius: 2px;
+
+
+// Card radius settings
+$card-radius: 2px;
+
+
+// Dialog radius settings
+$dialog-radius: 2px;
+
+
+// Menu radius settings
+$menu-radius: 2px;
+
+
+// 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-black/layout/material-v2.scss b/app/javascript/styles/material-black/layout/material-v2.scss
new file mode 100644
index 000000000..853d82b15
--- /dev/null
+++ b/app/javascript/styles/material-black/layout/material-v2.scss
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@import '../theme/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 }
+}
+
+
+// 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-black/loader.scss b/app/javascript/styles/material-black/loader.scss
new file mode 100644
index 000000000..e962aa921
--- /dev/null
+++ b/app/javascript/styles/material-black/loader.scss
@@ -0,0 +1,7 @@
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/plugins/cards.scss b/app/javascript/styles/material-black/plugins/cards.scss
new file mode 100644
index 000000000..c134cbeeb
--- /dev/null
+++ b/app/javascript/styles/material-black/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+
+    > .scrollable { background: $background-color }
+}
+
+.status {
+    border-bottom: 0;
+    border-radius: $card-radius;
+    background: $card-background-color;
+
+    &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+    border-radius: $card-radius;
+    background: $card-background-color;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/plugins/dense.scss b/app/javascript/styles/material-black/plugins/dense.scss
new file mode 100644
index 000000000..b3ba40812
--- /dev/null
+++ b/app/javascript/styles/material-black/plugins/dense.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+    &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+    &__buttons { height: 48px }
+
+    &__button {
+        margin: 8px;
+        padding: 10px 8px;
+
+        .fa { vertical-align: text-top }
+    }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+    padding: 12px 16px;
+
+    p { margin-bottom: 12px }
+}
+
+.compose-form {
+    .compose-form__publish { padding-top: 8px }
+}
+
+.status {
+    padding: 8px 8px 8px 66px;
+
+    &__expand { width: 66px }
+
+    &__info { padding-right: 0 }
+
+    &__avatar {
+        left: 8px;
+        top: 10px;
+    }
+
+    &__content { padding-top: 2px }
+}
+
+.detailed-status {
+    padding: 14px;
+
+    &__meta { margin-top: 14px }
+
+    &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/plugins/plus.scss b/app/javascript/styles/material-black/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/material-black/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+    background: #eeeeee;
+    width: 28px !important;
+    height: 28px !important;
+
+    .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+    left: -34px;
+
+    .star-icon {
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        vertical-align: baseline;
+        font-size: 18px;
+
+        &.fa-fw::before { vertical-align: middle }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/_functions.scss b/app/javascript/styles/material-black/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/_mixins.scss b/app/javascript/styles/material-black/theme/_mixins.scss
new file mode 100644
index 000000000..5f573e339
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/_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-black/theme/account.scss b/app/javascript/styles/material-black/theme/account.scss
new file mode 100644
index 000000000..34a8a1816
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/account.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name { color: $primary-text-color }
+    .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;
+            }
+
+            &-overlay { border-radius: $avater-radius }
+        }
+    }
+
+    &__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 }
+                }
+            }
+        }
+
+        &__content { color: $secondary-text-color }
+    }
+
+    &__section-headline {
+        background: $text-tab-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $text-tab-indicator-color;
+
+            &.active {
+                color: $text-tab-indicator-active-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
+
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $text-tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $text-tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/base_config.scss b/app/javascript/styles/material-black/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Status font size in timeline
+$status-font-size: 15px;  // mastodon default
+//$status-font-size: 16px;  // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px;  // mastodon default
+//$name-font-size: 16px;  // compatible with material design
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/basics.scss b/app/javascript/styles/material-black/theme/basics.scss
new file mode 100644
index 000000000..4c122d1c6
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+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-black/theme/button.scss b/app/javascript/styles/material-black/theme/button.scss
new file mode 100644
index 000000000..1231bac98
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+        }
+    }
+
+    &.overlayed {
+        border-radius: 50%;
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+    
+        &:hover {
+            background: $media-icon-background-color;
+            color: $media-icon-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 }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-background-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/columns.scss b/app/javascript/styles/material-black/theme/columns.scss
new file mode 100644
index 000000000..54effffd3
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/columns.scss
@@ -0,0 +1,474 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-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;
+    }
+
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
+    &.active {
+        .column-header__icon {
+            color: $top-bar-unread-icon-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        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;
+        padding: 8px 0;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            text-decoration: none;
+        }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
+    }
+
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &::before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        background: $card-background-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: $top-bar-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;
+    }
+
+    &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $text-field-background-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-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;
+        }
+    }
+}
+
+// read status in notification column
+.muted {
+    .status {
+        &__content {
+            color: $read-primary-text-color;
+    
+            p { color: $read-primary-text-color }
+    
+            a { color: $read-secondary-text-color }
+        }
+
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-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 }
+    }
+
+    &__trends {
+        background: $background-color;
+        margin-bottom: 0;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends {
+    &__header {
+        color: $section-text-color;
+        background: transparent;
+        border-bottom: 1px solid $border-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__item {
+        padding: 16px;
+        border-bottom: none;
+    
+        &__name {
+            color: $secondary-text-color;
+            font-size: 12px;
+    
+            a { color: $primary-text-color }
+        }
+    
+        &__current {
+            padding-right: 16px;
+            margin-left: 4px;
+            color: $secondary-text-color;
+        }
+    
+        &__sparkline path {
+            stroke: $primary-color;
+            fill: $primary-color;
+            fill-opacity: 0.5;
+        }
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.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: $tab-background-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $tab-background-color;
+            color: $tab-indicator-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-active-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
+    
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-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 {
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $relationship-tag-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/components.scss b/app/javascript/styles/material-black/theme/components.scss
new file mode 100644
index 000000000..ae5bfe158
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/components.scss
@@ -0,0 +1,534 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+            position: inherit;
+        }
+
+        &__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: 16px;
+                left: unset;
+                transform: none;
+            }
+        }
+    }
+}
+
+.search-popout {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+    border-radius: 0px $bar-radius;
+    border-top: 1px solid $border-color;
+    margin-top: 0;
+    color: $tips-text-color;
+
+    h4 {
+        color: $secondary-text-color;
+    }
+
+    em {
+        color: $search-bar-text-color;
+    }
+}
+
+.search-results {
+    &__header {
+        color: $secondary-text-color;
+        background-color: $card-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: 8px 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: $text-field-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+    
+            &::placeholder { color: $tips-text-color }
+        }
+
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-background-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-background-active-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: 16px 12px 16px 0 }
+
+            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 }
+    }
+}
+
+.no-reduce-motion .spoiler-input {
+    transition-duration: .2s, .2s;
+}
+
+
+.poll {
+    &__input {
+        border: 2px solid $control-border-color;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $text-field-background-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-active-color }
+    }
+
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $poll-bar-color;
+    
+        &.leading { background: $poll-bar-leading-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-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 {
+    box-shadow: none;
+    border: 1px solid $border-color;
+    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 }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/control.scss b/app/javascript/styles/material-black/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+    width: 36px;
+    height: 16px;
+    border-radius: 15px;
+
+    &-track {
+        background-color: $toggle-track-color;
+        margin: 4px;
+        width: 36px;
+        height: 16px;
+
+        &-check { visibility: hidden }
+        &-x { visibility: hidden }
+    }
+
+    &-thumb {
+        @include shadow-1dp;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        background-color: $toggle-thumb-color;
+    }
+
+    &--checked {
+        .react-toggle{
+            &-track { background-color: $toggle-track-active-color }
+
+            &-thumb {
+                background-color: $toggle-thumb-active-color;
+                left: 22px;
+            }
+        }
+
+        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+    }
+
+    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+    padding: 8px 0;
+
+    &__input {
+        border: 2px solid $border-color;
+
+        &.checked {
+            border-color: $icon-button-active-color;
+            background: $icon-button-active-color;
+            padding: 3px;
+            background-clip: content-box;
+        }
+    }
+}
+
+.compose-form__sensitive-button .checkbox {
+    border: 2px solid $border-color;
+    border-radius: 2px;
+
+    &.active {
+        border-color: $primary-color;
+        background: $primary-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/emoji-picker.scss b/app/javascript/styles/material-black/theme/emoji-picker.scss
new file mode 100644
index 000000000..70e22752d
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-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: $menu-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-active-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: $search-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-black/theme/icons.scss b/app/javascript/styles/material-black/theme/icons.scss
new file mode 100644
index 000000000..1367647ec
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+    &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub }  // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle }  // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+    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-black/theme/material-icons.scss b/app/javascript/styles/material-black/theme/material-icons.scss
new file mode 100644
index 000000000..747856253
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/material-icons.scss
@@ -0,0 +1,159 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.fa {
+    &.fa-bars,
+    &.fa-navicon,
+    &.fa-reorder,
+    &.fa-globe,
+    &.fa-cog,
+    &.fa-cogs,
+    &.fa-gears,
+    &.fa-sign-out,
+    &.fa-search,
+    &.fa-times,
+    &.fa-times-circle,
+    &.fa-close,
+    &.fa-remove,
+    &.fa-chevron-down,
+    &.fa-ellipsis-v,
+    &.fa-paperclip,
+    &.fa-tasks,
+    &.fa-plus,
+    &.fa-unlock,
+    &.fa-lock,
+    &.fa-envelope,
+    &.fa-home,
+    &.fa-bullhorn,
+    &.fa-sliders,
+    &.fa-chevron-left,
+    &.fa-chevron-right,
+    &.fa-reply,
+    &.fa-reply-all,
+    &.fa-share-alt,
+    &.fa-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.fa-eraser,
+    &.fa-users,
+    &.fa-file-text,
+    &.fa-user-plus,
+    &.fa-address-book,
+    &.fa-address-book-o,
+    &.fa-list,
+    &.fa-list-ul,
+    &.fa-eye,
+    &.fa-eye-slash,
+    &.fa-pencil,
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check,
+    &.fa-quote-right {
+        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-icon }
+    &.fa-reply-all::before { content: "reply_all" }
+    &.fa-share-alt::before { content: "share" }
+    &.fa-star::before { content: $favorite-icon }
+    &.fa-bookmark::before { content: "bookmark" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
+    &.fa-bell::before { content: "notifications" }
+    &.fa-eraser::before { content: "clear_all" }
+    &.fa-users::before { content: "people" }
+    &.fa-file-text::before { content: "web" }
+    &.fa-user-plus::before { content: "person_add" }
+    &.fa-address-book::before { content: "explore" }
+    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before { content: "list" }
+    &.fa-list-ul::before { content: "list" }
+    &.fa-eye::before { content: "visibility" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "delete" }
+    &.fa-check::before { content: "check" }
+    &.fa-quote-right::before { content: "format_quote" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark::before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+    height: 18px;
+    width: 18px;
+    transition: none;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/media.scss b/app/javascript/styles/material-black/theme/media.scss
new file mode 100644
index 000000000..9d0203828
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/media.scss
@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
+
+.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 }
+    }
+}
+
+.media-modal {
+    &__nav {
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
+    }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/modal.scss b/app/javascript/styles/material-black/theme/modal.scss
new file mode 100644
index 000000000..2748c8723
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/modal.scss
@@ -0,0 +1,102 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 300px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.actions-modal {
+    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;
+            color: $ui-text-color;
+        }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-background-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
+}
+
+.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;
+    }
+
+    &__comment {
+        border-right: none;
+
+        .setting-text-label { color: $ui-text-color }
+    }
+}
+
+.embed-modal .embed-modal__container {
+    padding: 0 24px 24px 24px;
+
+    .hint {
+        margin-bottom: 16px;
+        color: $secondary-text-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/responsive.scss b/app/javascript/styles/material-black/theme/responsive.scss
new file mode 100644
index 000000000..9ae304041
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/responsive.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+
+        span {
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    .column { margin: 0 !important }
+    .search__input { padding: 16px 46px }
+
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/statuses.scss b/app/javascript/styles/material-black/theme/statuses.scss
new file mode 100644
index 000000000..eedf77c2a
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: $name-font-size;
+        padding-right: 4px;
+    }
+
+    &__relative-time { color: $info-text-color }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__avatar {
+        left: 12px;
+        top: 12px;
+    }
+
+    &__content {
+        font-size: $status-font-size;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .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;
+        }
+    }
+
+    &__prepend {
+        color: $secondary-text-color;
+        margin-left: 64px;
+
+        .status__display-name strong { color: $secondary-text-color }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.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 }
+
+    &__actions {
+        &>div {
+            background: $media-icon-background-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        background: transparent;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+    background: $card-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 }
+    }
+}
+
+// search user trends
+.display-name {
+    &__html { color: $primary-text-color }
+    &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/theme.scss b/app/javascript/styles/material-black/theme/theme.scss
new file mode 100644
index 000000000..f92276549
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-black/theme/variables.scss b/app/javascript/styles/material-black/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/material-black/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark.scss b/app/javascript/styles/material-dark.scss
new file mode 100644
index 000000000..8cfd6c6be
--- /dev/null
+++ b/app/javascript/styles/material-dark.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'material-dark/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/black.scss b/app/javascript/styles/material-dark/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/material-dark/color/black.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$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: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-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: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/mastodon-dark.scss b/app/javascript/styles/material-dark/color/mastodon-dark.scss
new file mode 100644
index 000000000..c3c168316
--- /dev/null
+++ b/app/javascript/styles/material-dark/color/mastodon-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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: #313543;
+$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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/mastodon-light.scss b/app/javascript/styles/material-dark/color/mastodon-light.scss
new file mode 100644
index 000000000..54d894fec
--- /dev/null
+++ b/app/javascript/styles/material-dark/color/mastodon-light.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/plus-classic.scss b/app/javascript/styles/material-dark/color/plus-classic.scss
new file mode 100644
index 000000000..60c8370a2
--- /dev/null
+++ b/app/javascript/styles/material-dark/color/plus-classic.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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(#000000, 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: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/v1-dark.scss b/app/javascript/styles/material-dark/color/v1-dark.scss
new file mode 100644
index 000000000..77cef824f
--- /dev/null
+++ b/app/javascript/styles/material-dark/color/v1-dark.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$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: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: #1565C0;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/v1-light.scss b/app/javascript/styles/material-dark/color/v1-light.scss
new file mode 100644
index 000000000..64f8d5842
--- /dev/null
+++ b/app/javascript/styles/material-dark/color/v1-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/v2-dark.scss b/app/javascript/styles/material-dark/color/v2-dark.scss
new file mode 100644
index 000000000..8c575bce5
--- /dev/null
+++ b/app/javascript/styles/material-dark/color/v2-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/color/v2-light.scss b/app/javascript/styles/material-dark/color/v2-light.scss
new file mode 100644
index 000000000..20336e96d
--- /dev/null
+++ b/app/javascript/styles/material-dark/color/v2-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/custom_color.scss b/app/javascript/styles/material-dark/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-dark/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/custom_config.scss b/app/javascript/styles/material-dark/custom_config.scss
new file mode 100644
index 000000000..2a0c9e0fd
--- /dev/null
+++ b/app/javascript/styles/material-dark/custom_config.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/v2-dark';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/custom_layout.scss b/app/javascript/styles/material-dark/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-dark/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/icon_config.scss b/app/javascript/styles/material-dark/icon_config.scss
new file mode 100644
index 000000000..610c7e308
--- /dev/null
+++ b/app/javascript/styles/material-dark/icon_config.scss
@@ -0,0 +1,26 @@
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
+
+$favorite-icon-color: #ffd600;  // Star
+//$favorite-icon-color: #ff4081;  // Heart
+//$favorite-icon-color: #db4437;  // +1
+//$favorite-icon-color: #ffffff;  // inverted +1
+
+
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment";  // blooming
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@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
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/layout/material-v1.scss b/app/javascript/styles/material-dark/layout/material-v1.scss
new file mode 100644
index 000000000..825deaf8c
--- /dev/null
+++ b/app/javascript/styles/material-dark/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// Button radius settings
+$button-radius: 2px;
+
+
+// Card radius settings
+$card-radius: 2px;
+
+
+// Dialog radius settings
+$dialog-radius: 2px;
+
+
+// Menu radius settings
+$menu-radius: 2px;
+
+
+// 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-dark/layout/material-v2.scss b/app/javascript/styles/material-dark/layout/material-v2.scss
new file mode 100644
index 000000000..853d82b15
--- /dev/null
+++ b/app/javascript/styles/material-dark/layout/material-v2.scss
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@import '../theme/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 }
+}
+
+
+// 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-dark/loader.scss b/app/javascript/styles/material-dark/loader.scss
new file mode 100644
index 000000000..e962aa921
--- /dev/null
+++ b/app/javascript/styles/material-dark/loader.scss
@@ -0,0 +1,7 @@
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/plugins/cards.scss b/app/javascript/styles/material-dark/plugins/cards.scss
new file mode 100644
index 000000000..c134cbeeb
--- /dev/null
+++ b/app/javascript/styles/material-dark/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+
+    > .scrollable { background: $background-color }
+}
+
+.status {
+    border-bottom: 0;
+    border-radius: $card-radius;
+    background: $card-background-color;
+
+    &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+    border-radius: $card-radius;
+    background: $card-background-color;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/plugins/dense.scss b/app/javascript/styles/material-dark/plugins/dense.scss
new file mode 100644
index 000000000..b3ba40812
--- /dev/null
+++ b/app/javascript/styles/material-dark/plugins/dense.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+    &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+    &__buttons { height: 48px }
+
+    &__button {
+        margin: 8px;
+        padding: 10px 8px;
+
+        .fa { vertical-align: text-top }
+    }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+    padding: 12px 16px;
+
+    p { margin-bottom: 12px }
+}
+
+.compose-form {
+    .compose-form__publish { padding-top: 8px }
+}
+
+.status {
+    padding: 8px 8px 8px 66px;
+
+    &__expand { width: 66px }
+
+    &__info { padding-right: 0 }
+
+    &__avatar {
+        left: 8px;
+        top: 10px;
+    }
+
+    &__content { padding-top: 2px }
+}
+
+.detailed-status {
+    padding: 14px;
+
+    &__meta { margin-top: 14px }
+
+    &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/plugins/plus.scss b/app/javascript/styles/material-dark/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/material-dark/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+    background: #eeeeee;
+    width: 28px !important;
+    height: 28px !important;
+
+    .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+    left: -34px;
+
+    .star-icon {
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        vertical-align: baseline;
+        font-size: 18px;
+
+        &.fa-fw::before { vertical-align: middle }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/_functions.scss b/app/javascript/styles/material-dark/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/_mixins.scss b/app/javascript/styles/material-dark/theme/_mixins.scss
new file mode 100644
index 000000000..5f573e339
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/_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-dark/theme/account.scss b/app/javascript/styles/material-dark/theme/account.scss
new file mode 100644
index 000000000..34a8a1816
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/account.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name { color: $primary-text-color }
+    .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;
+            }
+
+            &-overlay { border-radius: $avater-radius }
+        }
+    }
+
+    &__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 }
+                }
+            }
+        }
+
+        &__content { color: $secondary-text-color }
+    }
+
+    &__section-headline {
+        background: $text-tab-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $text-tab-indicator-color;
+
+            &.active {
+                color: $text-tab-indicator-active-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
+
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $text-tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $text-tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/base_config.scss b/app/javascript/styles/material-dark/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Status font size in timeline
+$status-font-size: 15px;  // mastodon default
+//$status-font-size: 16px;  // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px;  // mastodon default
+//$name-font-size: 16px;  // compatible with material design
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/basics.scss b/app/javascript/styles/material-dark/theme/basics.scss
new file mode 100644
index 000000000..4c122d1c6
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+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-dark/theme/button.scss b/app/javascript/styles/material-dark/theme/button.scss
new file mode 100644
index 000000000..1231bac98
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+        }
+    }
+
+    &.overlayed {
+        border-radius: 50%;
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+    
+        &:hover {
+            background: $media-icon-background-color;
+            color: $media-icon-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 }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-background-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/columns.scss b/app/javascript/styles/material-dark/theme/columns.scss
new file mode 100644
index 000000000..54effffd3
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/columns.scss
@@ -0,0 +1,474 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-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;
+    }
+
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
+    &.active {
+        .column-header__icon {
+            color: $top-bar-unread-icon-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        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;
+        padding: 8px 0;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            text-decoration: none;
+        }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
+    }
+
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &::before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        background: $card-background-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: $top-bar-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;
+    }
+
+    &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $text-field-background-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-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;
+        }
+    }
+}
+
+// read status in notification column
+.muted {
+    .status {
+        &__content {
+            color: $read-primary-text-color;
+    
+            p { color: $read-primary-text-color }
+    
+            a { color: $read-secondary-text-color }
+        }
+
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-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 }
+    }
+
+    &__trends {
+        background: $background-color;
+        margin-bottom: 0;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends {
+    &__header {
+        color: $section-text-color;
+        background: transparent;
+        border-bottom: 1px solid $border-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__item {
+        padding: 16px;
+        border-bottom: none;
+    
+        &__name {
+            color: $secondary-text-color;
+            font-size: 12px;
+    
+            a { color: $primary-text-color }
+        }
+    
+        &__current {
+            padding-right: 16px;
+            margin-left: 4px;
+            color: $secondary-text-color;
+        }
+    
+        &__sparkline path {
+            stroke: $primary-color;
+            fill: $primary-color;
+            fill-opacity: 0.5;
+        }
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.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: $tab-background-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $tab-background-color;
+            color: $tab-indicator-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-active-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
+    
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-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 {
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $relationship-tag-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/components.scss b/app/javascript/styles/material-dark/theme/components.scss
new file mode 100644
index 000000000..ae5bfe158
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/components.scss
@@ -0,0 +1,534 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+            position: inherit;
+        }
+
+        &__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: 16px;
+                left: unset;
+                transform: none;
+            }
+        }
+    }
+}
+
+.search-popout {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+    border-radius: 0px $bar-radius;
+    border-top: 1px solid $border-color;
+    margin-top: 0;
+    color: $tips-text-color;
+
+    h4 {
+        color: $secondary-text-color;
+    }
+
+    em {
+        color: $search-bar-text-color;
+    }
+}
+
+.search-results {
+    &__header {
+        color: $secondary-text-color;
+        background-color: $card-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: 8px 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: $text-field-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+    
+            &::placeholder { color: $tips-text-color }
+        }
+
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-background-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-background-active-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: 16px 12px 16px 0 }
+
+            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 }
+    }
+}
+
+.no-reduce-motion .spoiler-input {
+    transition-duration: .2s, .2s;
+}
+
+
+.poll {
+    &__input {
+        border: 2px solid $control-border-color;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $text-field-background-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-active-color }
+    }
+
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $poll-bar-color;
+    
+        &.leading { background: $poll-bar-leading-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-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 {
+    box-shadow: none;
+    border: 1px solid $border-color;
+    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 }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/control.scss b/app/javascript/styles/material-dark/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+    width: 36px;
+    height: 16px;
+    border-radius: 15px;
+
+    &-track {
+        background-color: $toggle-track-color;
+        margin: 4px;
+        width: 36px;
+        height: 16px;
+
+        &-check { visibility: hidden }
+        &-x { visibility: hidden }
+    }
+
+    &-thumb {
+        @include shadow-1dp;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        background-color: $toggle-thumb-color;
+    }
+
+    &--checked {
+        .react-toggle{
+            &-track { background-color: $toggle-track-active-color }
+
+            &-thumb {
+                background-color: $toggle-thumb-active-color;
+                left: 22px;
+            }
+        }
+
+        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+    }
+
+    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+    padding: 8px 0;
+
+    &__input {
+        border: 2px solid $border-color;
+
+        &.checked {
+            border-color: $icon-button-active-color;
+            background: $icon-button-active-color;
+            padding: 3px;
+            background-clip: content-box;
+        }
+    }
+}
+
+.compose-form__sensitive-button .checkbox {
+    border: 2px solid $border-color;
+    border-radius: 2px;
+
+    &.active {
+        border-color: $primary-color;
+        background: $primary-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/emoji-picker.scss b/app/javascript/styles/material-dark/theme/emoji-picker.scss
new file mode 100644
index 000000000..70e22752d
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-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: $menu-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-active-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: $search-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-dark/theme/icons.scss b/app/javascript/styles/material-dark/theme/icons.scss
new file mode 100644
index 000000000..1367647ec
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+    &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub }  // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle }  // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+    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-dark/theme/material-icons.scss b/app/javascript/styles/material-dark/theme/material-icons.scss
new file mode 100644
index 000000000..747856253
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/material-icons.scss
@@ -0,0 +1,159 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.fa {
+    &.fa-bars,
+    &.fa-navicon,
+    &.fa-reorder,
+    &.fa-globe,
+    &.fa-cog,
+    &.fa-cogs,
+    &.fa-gears,
+    &.fa-sign-out,
+    &.fa-search,
+    &.fa-times,
+    &.fa-times-circle,
+    &.fa-close,
+    &.fa-remove,
+    &.fa-chevron-down,
+    &.fa-ellipsis-v,
+    &.fa-paperclip,
+    &.fa-tasks,
+    &.fa-plus,
+    &.fa-unlock,
+    &.fa-lock,
+    &.fa-envelope,
+    &.fa-home,
+    &.fa-bullhorn,
+    &.fa-sliders,
+    &.fa-chevron-left,
+    &.fa-chevron-right,
+    &.fa-reply,
+    &.fa-reply-all,
+    &.fa-share-alt,
+    &.fa-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.fa-eraser,
+    &.fa-users,
+    &.fa-file-text,
+    &.fa-user-plus,
+    &.fa-address-book,
+    &.fa-address-book-o,
+    &.fa-list,
+    &.fa-list-ul,
+    &.fa-eye,
+    &.fa-eye-slash,
+    &.fa-pencil,
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check,
+    &.fa-quote-right {
+        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-icon }
+    &.fa-reply-all::before { content: "reply_all" }
+    &.fa-share-alt::before { content: "share" }
+    &.fa-star::before { content: $favorite-icon }
+    &.fa-bookmark::before { content: "bookmark" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
+    &.fa-bell::before { content: "notifications" }
+    &.fa-eraser::before { content: "clear_all" }
+    &.fa-users::before { content: "people" }
+    &.fa-file-text::before { content: "web" }
+    &.fa-user-plus::before { content: "person_add" }
+    &.fa-address-book::before { content: "explore" }
+    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before { content: "list" }
+    &.fa-list-ul::before { content: "list" }
+    &.fa-eye::before { content: "visibility" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "delete" }
+    &.fa-check::before { content: "check" }
+    &.fa-quote-right::before { content: "format_quote" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark::before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+    height: 18px;
+    width: 18px;
+    transition: none;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/media.scss b/app/javascript/styles/material-dark/theme/media.scss
new file mode 100644
index 000000000..9d0203828
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/media.scss
@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
+
+.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 }
+    }
+}
+
+.media-modal {
+    &__nav {
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
+    }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/modal.scss b/app/javascript/styles/material-dark/theme/modal.scss
new file mode 100644
index 000000000..2748c8723
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/modal.scss
@@ -0,0 +1,102 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 300px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.actions-modal {
+    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;
+            color: $ui-text-color;
+        }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-background-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
+}
+
+.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;
+    }
+
+    &__comment {
+        border-right: none;
+
+        .setting-text-label { color: $ui-text-color }
+    }
+}
+
+.embed-modal .embed-modal__container {
+    padding: 0 24px 24px 24px;
+
+    .hint {
+        margin-bottom: 16px;
+        color: $secondary-text-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/responsive.scss b/app/javascript/styles/material-dark/theme/responsive.scss
new file mode 100644
index 000000000..9ae304041
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/responsive.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+
+        span {
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    .column { margin: 0 !important }
+    .search__input { padding: 16px 46px }
+
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/statuses.scss b/app/javascript/styles/material-dark/theme/statuses.scss
new file mode 100644
index 000000000..eedf77c2a
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: $name-font-size;
+        padding-right: 4px;
+    }
+
+    &__relative-time { color: $info-text-color }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__avatar {
+        left: 12px;
+        top: 12px;
+    }
+
+    &__content {
+        font-size: $status-font-size;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .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;
+        }
+    }
+
+    &__prepend {
+        color: $secondary-text-color;
+        margin-left: 64px;
+
+        .status__display-name strong { color: $secondary-text-color }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.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 }
+
+    &__actions {
+        &>div {
+            background: $media-icon-background-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        background: transparent;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+    background: $card-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 }
+    }
+}
+
+// search user trends
+.display-name {
+    &__html { color: $primary-text-color }
+    &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/theme.scss b/app/javascript/styles/material-dark/theme/theme.scss
new file mode 100644
index 000000000..f92276549
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-dark/theme/variables.scss b/app/javascript/styles/material-dark/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/material-dark/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light.scss b/app/javascript/styles/material-light.scss
new file mode 100644
index 000000000..9818f14f5
--- /dev/null
+++ b/app/javascript/styles/material-light.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'material-light/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/black.scss b/app/javascript/styles/material-light/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/material-light/color/black.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$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: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-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: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/mastodon-dark.scss b/app/javascript/styles/material-light/color/mastodon-dark.scss
new file mode 100644
index 000000000..c3c168316
--- /dev/null
+++ b/app/javascript/styles/material-light/color/mastodon-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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: #313543;
+$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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/mastodon-light.scss b/app/javascript/styles/material-light/color/mastodon-light.scss
new file mode 100644
index 000000000..54d894fec
--- /dev/null
+++ b/app/javascript/styles/material-light/color/mastodon-light.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/plus-classic.scss b/app/javascript/styles/material-light/color/plus-classic.scss
new file mode 100644
index 000000000..60c8370a2
--- /dev/null
+++ b/app/javascript/styles/material-light/color/plus-classic.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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(#000000, 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: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/v1-dark.scss b/app/javascript/styles/material-light/color/v1-dark.scss
new file mode 100644
index 000000000..77cef824f
--- /dev/null
+++ b/app/javascript/styles/material-light/color/v1-dark.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$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: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: #1565C0;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/v1-light.scss b/app/javascript/styles/material-light/color/v1-light.scss
new file mode 100644
index 000000000..64f8d5842
--- /dev/null
+++ b/app/javascript/styles/material-light/color/v1-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/v2-dark.scss b/app/javascript/styles/material-light/color/v2-dark.scss
new file mode 100644
index 000000000..8c575bce5
--- /dev/null
+++ b/app/javascript/styles/material-light/color/v2-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/color/v2-light.scss b/app/javascript/styles/material-light/color/v2-light.scss
new file mode 100644
index 000000000..20336e96d
--- /dev/null
+++ b/app/javascript/styles/material-light/color/v2-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/custom_color.scss b/app/javascript/styles/material-light/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-light/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/custom_config.scss b/app/javascript/styles/material-light/custom_config.scss
new file mode 100644
index 000000000..43b6488b6
--- /dev/null
+++ b/app/javascript/styles/material-light/custom_config.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your settings below
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/custom_layout.scss b/app/javascript/styles/material-light/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/material-light/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/icon_config.scss b/app/javascript/styles/material-light/icon_config.scss
new file mode 100644
index 000000000..610c7e308
--- /dev/null
+++ b/app/javascript/styles/material-light/icon_config.scss
@@ -0,0 +1,26 @@
+// Favorite icon settings
+$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
+//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
+
+$favorite-icon-color: #ffd600;  // Star
+//$favorite-icon-color: #ff4081;  // Heart
+//$favorite-icon-color: #db4437;  // +1
+//$favorite-icon-color: #ffffff;  // inverted +1
+
+
+// Reply icon settings
+$reply-icon: "reply";
+//$reply-icon: "comment";  // blooming
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@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
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/layout/material-v1.scss b/app/javascript/styles/material-light/layout/material-v1.scss
new file mode 100644
index 000000000..825deaf8c
--- /dev/null
+++ b/app/javascript/styles/material-light/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// Button radius settings
+$button-radius: 2px;
+
+
+// Card radius settings
+$card-radius: 2px;
+
+
+// Dialog radius settings
+$dialog-radius: 2px;
+
+
+// Menu radius settings
+$menu-radius: 2px;
+
+
+// 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-light/layout/material-v2.scss b/app/javascript/styles/material-light/layout/material-v2.scss
new file mode 100644
index 000000000..853d82b15
--- /dev/null
+++ b/app/javascript/styles/material-light/layout/material-v2.scss
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@import '../theme/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 }
+}
+
+
+// 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-light/loader.scss b/app/javascript/styles/material-light/loader.scss
new file mode 100644
index 000000000..e962aa921
--- /dev/null
+++ b/app/javascript/styles/material-light/loader.scss
@@ -0,0 +1,7 @@
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/plugins/cards.scss b/app/javascript/styles/material-light/plugins/cards.scss
new file mode 100644
index 000000000..c134cbeeb
--- /dev/null
+++ b/app/javascript/styles/material-light/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+
+    > .scrollable { background: $background-color }
+}
+
+.status {
+    border-bottom: 0;
+    border-radius: $card-radius;
+    background: $card-background-color;
+
+    &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+    border-radius: $card-radius;
+    background: $card-background-color;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/plugins/dense.scss b/app/javascript/styles/material-light/plugins/dense.scss
new file mode 100644
index 000000000..b3ba40812
--- /dev/null
+++ b/app/javascript/styles/material-light/plugins/dense.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+    &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+    &__buttons { height: 48px }
+
+    &__button {
+        margin: 8px;
+        padding: 10px 8px;
+
+        .fa { vertical-align: text-top }
+    }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+    padding: 12px 16px;
+
+    p { margin-bottom: 12px }
+}
+
+.compose-form {
+    .compose-form__publish { padding-top: 8px }
+}
+
+.status {
+    padding: 8px 8px 8px 66px;
+
+    &__expand { width: 66px }
+
+    &__info { padding-right: 0 }
+
+    &__avatar {
+        left: 8px;
+        top: 10px;
+    }
+
+    &__content { padding-top: 2px }
+}
+
+.detailed-status {
+    padding: 14px;
+
+    &__meta { margin-top: 14px }
+
+    &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/plugins/plus.scss b/app/javascript/styles/material-light/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/material-light/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+    background: #eeeeee;
+    width: 28px !important;
+    height: 28px !important;
+
+    .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+    left: -34px;
+
+    .star-icon {
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        vertical-align: baseline;
+        font-size: 18px;
+
+        &.fa-fw::before { vertical-align: middle }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/_functions.scss b/app/javascript/styles/material-light/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/_mixins.scss b/app/javascript/styles/material-light/theme/_mixins.scss
new file mode 100644
index 000000000..5f573e339
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/_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-light/theme/account.scss b/app/javascript/styles/material-light/theme/account.scss
new file mode 100644
index 000000000..34a8a1816
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/account.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name { color: $primary-text-color }
+    .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;
+            }
+
+            &-overlay { border-radius: $avater-radius }
+        }
+    }
+
+    &__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 }
+                }
+            }
+        }
+
+        &__content { color: $secondary-text-color }
+    }
+
+    &__section-headline {
+        background: $text-tab-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $text-tab-indicator-color;
+
+            &.active {
+                color: $text-tab-indicator-active-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
+
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $text-tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $text-tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/base_config.scss b/app/javascript/styles/material-light/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Status font size in timeline
+$status-font-size: 15px;  // mastodon default
+//$status-font-size: 16px;  // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px;  // mastodon default
+//$name-font-size: 16px;  // compatible with material design
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/basics.scss b/app/javascript/styles/material-light/theme/basics.scss
new file mode 100644
index 000000000..4c122d1c6
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+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-light/theme/button.scss b/app/javascript/styles/material-light/theme/button.scss
new file mode 100644
index 000000000..1231bac98
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+        }
+    }
+
+    &.overlayed {
+        border-radius: 50%;
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+    
+        &:hover {
+            background: $media-icon-background-color;
+            color: $media-icon-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 }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-background-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/columns.scss b/app/javascript/styles/material-light/theme/columns.scss
new file mode 100644
index 000000000..54effffd3
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/columns.scss
@@ -0,0 +1,474 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-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;
+    }
+
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
+    &.active {
+        .column-header__icon {
+            color: $top-bar-unread-icon-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        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;
+        padding: 8px 0;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            text-decoration: none;
+        }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
+    }
+
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &::before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        background: $card-background-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: $top-bar-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;
+    }
+
+    &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $text-field-background-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-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;
+        }
+    }
+}
+
+// read status in notification column
+.muted {
+    .status {
+        &__content {
+            color: $read-primary-text-color;
+    
+            p { color: $read-primary-text-color }
+    
+            a { color: $read-secondary-text-color }
+        }
+
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-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 }
+    }
+
+    &__trends {
+        background: $background-color;
+        margin-bottom: 0;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends {
+    &__header {
+        color: $section-text-color;
+        background: transparent;
+        border-bottom: 1px solid $border-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__item {
+        padding: 16px;
+        border-bottom: none;
+    
+        &__name {
+            color: $secondary-text-color;
+            font-size: 12px;
+    
+            a { color: $primary-text-color }
+        }
+    
+        &__current {
+            padding-right: 16px;
+            margin-left: 4px;
+            color: $secondary-text-color;
+        }
+    
+        &__sparkline path {
+            stroke: $primary-color;
+            fill: $primary-color;
+            fill-opacity: 0.5;
+        }
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.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: $tab-background-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $tab-background-color;
+            color: $tab-indicator-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-active-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
+    
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-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 {
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $relationship-tag-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/components.scss b/app/javascript/styles/material-light/theme/components.scss
new file mode 100644
index 000000000..ae5bfe158
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/components.scss
@@ -0,0 +1,534 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+            position: inherit;
+        }
+
+        &__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: 16px;
+                left: unset;
+                transform: none;
+            }
+        }
+    }
+}
+
+.search-popout {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+    border-radius: 0px $bar-radius;
+    border-top: 1px solid $border-color;
+    margin-top: 0;
+    color: $tips-text-color;
+
+    h4 {
+        color: $secondary-text-color;
+    }
+
+    em {
+        color: $search-bar-text-color;
+    }
+}
+
+.search-results {
+    &__header {
+        color: $secondary-text-color;
+        background-color: $card-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: 8px 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: $text-field-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+    
+            &::placeholder { color: $tips-text-color }
+        }
+
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-background-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-background-active-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: 16px 12px 16px 0 }
+
+            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 }
+    }
+}
+
+.no-reduce-motion .spoiler-input {
+    transition-duration: .2s, .2s;
+}
+
+
+.poll {
+    &__input {
+        border: 2px solid $control-border-color;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $text-field-background-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-active-color }
+    }
+
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $poll-bar-color;
+    
+        &.leading { background: $poll-bar-leading-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-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 {
+    box-shadow: none;
+    border: 1px solid $border-color;
+    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 }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/control.scss b/app/javascript/styles/material-light/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+    width: 36px;
+    height: 16px;
+    border-radius: 15px;
+
+    &-track {
+        background-color: $toggle-track-color;
+        margin: 4px;
+        width: 36px;
+        height: 16px;
+
+        &-check { visibility: hidden }
+        &-x { visibility: hidden }
+    }
+
+    &-thumb {
+        @include shadow-1dp;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        background-color: $toggle-thumb-color;
+    }
+
+    &--checked {
+        .react-toggle{
+            &-track { background-color: $toggle-track-active-color }
+
+            &-thumb {
+                background-color: $toggle-thumb-active-color;
+                left: 22px;
+            }
+        }
+
+        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+    }
+
+    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+    padding: 8px 0;
+
+    &__input {
+        border: 2px solid $border-color;
+
+        &.checked {
+            border-color: $icon-button-active-color;
+            background: $icon-button-active-color;
+            padding: 3px;
+            background-clip: content-box;
+        }
+    }
+}
+
+.compose-form__sensitive-button .checkbox {
+    border: 2px solid $border-color;
+    border-radius: 2px;
+
+    &.active {
+        border-color: $primary-color;
+        background: $primary-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/emoji-picker.scss b/app/javascript/styles/material-light/theme/emoji-picker.scss
new file mode 100644
index 000000000..70e22752d
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-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: $menu-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-active-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: $search-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-light/theme/icons.scss b/app/javascript/styles/material-light/theme/icons.scss
new file mode 100644
index 000000000..1367647ec
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+    &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub }  // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle }  // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+    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-light/theme/material-icons.scss b/app/javascript/styles/material-light/theme/material-icons.scss
new file mode 100644
index 000000000..747856253
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/material-icons.scss
@@ -0,0 +1,159 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.fa {
+    &.fa-bars,
+    &.fa-navicon,
+    &.fa-reorder,
+    &.fa-globe,
+    &.fa-cog,
+    &.fa-cogs,
+    &.fa-gears,
+    &.fa-sign-out,
+    &.fa-search,
+    &.fa-times,
+    &.fa-times-circle,
+    &.fa-close,
+    &.fa-remove,
+    &.fa-chevron-down,
+    &.fa-ellipsis-v,
+    &.fa-paperclip,
+    &.fa-tasks,
+    &.fa-plus,
+    &.fa-unlock,
+    &.fa-lock,
+    &.fa-envelope,
+    &.fa-home,
+    &.fa-bullhorn,
+    &.fa-sliders,
+    &.fa-chevron-left,
+    &.fa-chevron-right,
+    &.fa-reply,
+    &.fa-reply-all,
+    &.fa-share-alt,
+    &.fa-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.fa-eraser,
+    &.fa-users,
+    &.fa-file-text,
+    &.fa-user-plus,
+    &.fa-address-book,
+    &.fa-address-book-o,
+    &.fa-list,
+    &.fa-list-ul,
+    &.fa-eye,
+    &.fa-eye-slash,
+    &.fa-pencil,
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check,
+    &.fa-quote-right {
+        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-icon }
+    &.fa-reply-all::before { content: "reply_all" }
+    &.fa-share-alt::before { content: "share" }
+    &.fa-star::before { content: $favorite-icon }
+    &.fa-bookmark::before { content: "bookmark" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
+    &.fa-bell::before { content: "notifications" }
+    &.fa-eraser::before { content: "clear_all" }
+    &.fa-users::before { content: "people" }
+    &.fa-file-text::before { content: "web" }
+    &.fa-user-plus::before { content: "person_add" }
+    &.fa-address-book::before { content: "explore" }
+    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before { content: "list" }
+    &.fa-list-ul::before { content: "list" }
+    &.fa-eye::before { content: "visibility" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "delete" }
+    &.fa-check::before { content: "check" }
+    &.fa-quote-right::before { content: "format_quote" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark::before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+    height: 18px;
+    width: 18px;
+    transition: none;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/media.scss b/app/javascript/styles/material-light/theme/media.scss
new file mode 100644
index 000000000..9d0203828
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/media.scss
@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
+
+.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 }
+    }
+}
+
+.media-modal {
+    &__nav {
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
+    }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/modal.scss b/app/javascript/styles/material-light/theme/modal.scss
new file mode 100644
index 000000000..2748c8723
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/modal.scss
@@ -0,0 +1,102 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 300px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.actions-modal {
+    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;
+            color: $ui-text-color;
+        }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-background-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
+}
+
+.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;
+    }
+
+    &__comment {
+        border-right: none;
+
+        .setting-text-label { color: $ui-text-color }
+    }
+}
+
+.embed-modal .embed-modal__container {
+    padding: 0 24px 24px 24px;
+
+    .hint {
+        margin-bottom: 16px;
+        color: $secondary-text-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/responsive.scss b/app/javascript/styles/material-light/theme/responsive.scss
new file mode 100644
index 000000000..9ae304041
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/responsive.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+
+        span {
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    .column { margin: 0 !important }
+    .search__input { padding: 16px 46px }
+
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/statuses.scss b/app/javascript/styles/material-light/theme/statuses.scss
new file mode 100644
index 000000000..eedf77c2a
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: $name-font-size;
+        padding-right: 4px;
+    }
+
+    &__relative-time { color: $info-text-color }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__avatar {
+        left: 12px;
+        top: 12px;
+    }
+
+    &__content {
+        font-size: $status-font-size;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .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;
+        }
+    }
+
+    &__prepend {
+        color: $secondary-text-color;
+        margin-left: 64px;
+
+        .status__display-name strong { color: $secondary-text-color }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.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 }
+
+    &__actions {
+        &>div {
+            background: $media-icon-background-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        background: transparent;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+    background: $card-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 }
+    }
+}
+
+// search user trends
+.display-name {
+    &__html { color: $primary-text-color }
+    &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/theme.scss b/app/javascript/styles/material-light/theme/theme.scss
new file mode 100644
index 000000000..f92276549
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/material-light/theme/variables.scss b/app/javascript/styles/material-light/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/material-light/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/plus.scss b/app/javascript/styles/plus.scss
new file mode 100644
index 000000000..9cbccaa5f
--- /dev/null
+++ b/app/javascript/styles/plus.scss
@@ -0,0 +1,2 @@
+@import 'application';
+@import 'plus/loader';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/black.scss b/app/javascript/styles/plus/color/black.scss
new file mode 100644
index 000000000..b299981b0
--- /dev/null
+++ b/app/javascript/styles/plus/color/black.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #000000;
+$menu-background-color: #121212;
+$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: #121212;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #000000;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #1e1e1e;
+$contained-chip-hover-color: lighten($contained-chip-color, 6%);
+$contained-chip-selected-color: lighten($contained-chip-color, 12%);
+$outlined-chip-color: #121212;
+$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
+$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #1e1e1e;
+$border-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: #1e1e1e;
+$search-bar-color: lighten($top-bar-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #121212;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/mastodon-dark.scss b/app/javascript/styles/plus/color/mastodon-dark.scss
new file mode 100644
index 000000000..c3c168316
--- /dev/null
+++ b/app/javascript/styles/plus/color/mastodon-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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: #313543;
+$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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#42485a, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #9baec8;
+$icon-hover-color: lighten($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($primary-color, 18%);
+
+// Border color
+$border-color: #393f4f;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: #1f232b;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/mastodon-light.scss b/app/javascript/styles/plus/color/mastodon-light.scss
new file mode 100644
index 000000000..54d894fec
--- /dev/null
+++ b/app/javascript/styles/plus/color/mastodon-light.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #282c37;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: $primary-color;
+$toggle-track-active-color: lighten($primary-color, 26%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: #282c37;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: #e6ebf0;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $tab-indicator-color;
+$text-tab-indicator-active-color: $tab-indicator-active-color;
+$text-tab-background-color: $tab-background-color;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/plus-classic.scss b/app/javascript/styles/plus/color/plus-classic.scss
new file mode 100644
index 000000000..60c8370a2
--- /dev/null
+++ b/app/javascript/styles/plus/color/plus-classic.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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(#000000, 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: #db4437;
+$search-bar-color: darken($background-color, 6%);
+$search-bar-focus-color: $background-color;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v1-dark.scss b/app/javascript/styles/plus/color/v1-dark.scss
new file mode 100644
index 000000000..77cef824f
--- /dev/null
+++ b/app/javascript/styles/plus/color/v1-dark.scss
@@ -0,0 +1,134 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// Background-color
+$background-color: #303030;
+$menu-background-color: #424242;
+$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: #424242;
+$card-background-hover-color: lighten($card-background-color, 6%);
+$card-background-inactive-color: lighten($card-background-color, 10%);
+$list-background-color: #424242;
+$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%);
+$text-field-background-color: $card-background-color;
+$verified-background-color: darken($verified-color, 20%);
+
+// Chip color
+$contained-chip-color: #2e2e2e;
+$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: #1565C0;
+$search-bar-color: lighten($background-color, 6%);
+$search-bar-focus-color: #ffffff;
+
+// Tab color
+$tab-indicator-color: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #424242;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v1-light.scss b/app/javascript/styles/plus/color/v1-light.scss
new file mode 100644
index 000000000..64f8d5842
--- /dev/null
+++ b/app/javascript/styles/plus/color/v1-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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%);
+$top-bar-unread-icon-color: darken($primary-color, 30%);
+$media-icon-color: transparentize(#ffffff, 0.4);
+$media-icon-hover-color: transparentize(#ffffff, 0.2);
+$media-icon-background-color: transparentize(#000000, 0.5);
+$media-icon-background-hover-color: transparentize(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $top-bar-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
+$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v2-dark.scss b/app/javascript/styles/plus/color/v2-dark.scss
new file mode 100644
index 000000000..8c575bce5
--- /dev/null
+++ b/app/javascript/styles/plus/color/v2-dark.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#2e2e2e, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #e2e2e3;
+$icon-hover-color: 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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
+$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
+$floating-action-button-icon-color: #ffffff;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #2e2e2e;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #1e1e1e;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/color/v2-light.scss b/app/javascript/styles/plus/color/v2-light.scss
new file mode 100644
index 000000000..20336e96d
--- /dev/null
+++ b/app/javascript/styles/plus/color/v2-light.scss
@@ -0,0 +1,135 @@
+@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;
+$contained-button-text-color: #ffffff;
+
+// 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%);
+$text-field-background-color: $card-background-color;
+$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%);
+
+// Relationship tag color
+$relationship-tag-color: transparentize(#e0e0e0, 0.2);
+
+// Badge color
+$badge-color: $primary-color;
+//$badge-color: $secondary-color;
+
+// Icon color
+$icon-color: #757575;
+$icon-hover-color: darken($icon-color, 30%);
+$icon-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;
+$top-bar-unread-icon-color: $secondary-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(#000000, 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: $primary-color;
+
+// Toggle color
+$toggle-thumb-color: #ffffff;
+$toggle-track-color: darken($toggle-thumb-color, 18%);
+$toggle-thumb-active-color: #1a73e8;
+$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
+
+// Border color
+$border-color: #dadce0;
+$border-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: $top-bar-icon-color;
+$tab-indicator-active-color: $top-bar-icon-color;
+$tab-background-color: $top-bar-color;
+$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
+$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
+$text-tab-indicator-color: $secondary-text-color;
+$text-tab-indicator-active-color: $ui-text-color;
+$text-tab-background-color: #ffffff;
+$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
+$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
+
+// Media indicator color
+$media-page-indicator-color: #9e9e9e;
+$media-page-indicator-active-color: #e6e6e6;
+
+// Poll chart color
+$poll-bar-leading-color: $primary-color;
+$poll-bar-color: lighten($poll-bar-leading-color, 30%);
+
+// Contents color in read status
+$read-primary-text-color: transparentize($primary-text-color, 0.3);
+$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
+$read-ui-text-color: transparentize($ui-text-color, 0.3);
+$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
+$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
\ No newline at end of file
diff --git a/app/javascript/styles/plus/custom_color.scss b/app/javascript/styles/plus/custom_color.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/plus/custom_color.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/plus/custom_config.scss b/app/javascript/styles/plus/custom_config.scss
new file mode 100644
index 000000000..cd403efed
--- /dev/null
+++ b/app/javascript/styles/plus/custom_config.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+
+// Add your settings below
+@import 'color/plus-classic';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/custom_layout.scss b/app/javascript/styles/plus/custom_layout.scss
new file mode 100644
index 000000000..b4ac46881
--- /dev/null
+++ b/app/javascript/styles/plus/custom_layout.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+// Add your customization below
\ No newline at end of file
diff --git a/app/javascript/styles/plus/icon_config.scss b/app/javascript/styles/plus/icon_config.scss
new file mode 100644
index 000000000..e39986220
--- /dev/null
+++ b/app/javascript/styles/plus/icon_config.scss
@@ -0,0 +1,26 @@
+// Favorite icon settings
+//$favorite-icon: "star"; $favorite-icon-border: "star_border";  // Star
+//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border";  // Heart
+$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one";  // +1
+
+//$favorite-icon-color: #ffd600;  // Star
+//$favorite-icon-color: #ff4081;  // Heart
+//$favorite-icon-color: #db4437;  // +1
+$favorite-icon-color: #ffffff;  // inverted +1
+
+
+// Reply icon settings
+//$reply-icon: "reply";
+$reply-icon: "comment";  // blooming
+
+
+// Material Design Icon settings
+// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
+@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
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/layout/material-v1.scss b/app/javascript/styles/plus/layout/material-v1.scss
new file mode 100644
index 000000000..825deaf8c
--- /dev/null
+++ b/app/javascript/styles/plus/layout/material-v1.scss
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import '../theme/mixins';
+
+
+// Navigation bar radius
+$nav-bar-radius: 2px;
+
+
+// Search bar radius
+$search-bar-radius: 2px;
+
+
+// Bar radius settings
+$bar-radius: 0;
+
+
+// Button radius settings
+$button-radius: 2px;
+
+
+// Card radius settings
+$card-radius: 2px;
+
+
+// Dialog radius settings
+$dialog-radius: 2px;
+
+
+// Menu radius settings
+$menu-radius: 2px;
+
+
+// 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/plus/layout/material-v2.scss b/app/javascript/styles/plus/layout/material-v2.scss
new file mode 100644
index 000000000..853d82b15
--- /dev/null
+++ b/app/javascript/styles/plus/layout/material-v2.scss
@@ -0,0 +1,60 @@
+@charset "UTF-8";
+@import '../theme/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 }
+}
+
+
+// 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/plus/loader.scss b/app/javascript/styles/plus/loader.scss
new file mode 100644
index 000000000..e962aa921
--- /dev/null
+++ b/app/javascript/styles/plus/loader.scss
@@ -0,0 +1,7 @@
+@import 'theme/theme';
+@import 'theme/material-icons';
+
+// Plugins
+//@import 'plugins/cards';
+//@import 'plugins/dense';
+//@import 'plugins/plus';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/cards.scss b/app/javascript/styles/plus/plugins/cards.scss
new file mode 100644
index 000000000..c134cbeeb
--- /dev/null
+++ b/app/javascript/styles/plus/plugins/cards.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import '../theme/mixins';
+
+
+.column {
+    box-shadow: none !important;
+    margin: 2px 0 !important;
+    padding: 8px !important;
+
+    > .scrollable { background: $background-color }
+}
+
+.status {
+    border-bottom: 0;
+    border-radius: $card-radius;
+    background: $card-background-color;
+
+    &__prepend { padding: 8px 8px 2px 0 }
+}
+
+.account { border-bottom: 0 !important }
+
+.status__wrapper.status__wrapper,
+.notification.notification {
+    @include shadow-1dp;
+    margin: 8px 2px;
+    border-radius: $card-radius;
+    background: $card-background-color;
+}
+
+.notification .status__wrapper.status__wrapper { box-shadow: none !important }
+
+.notification__filter-bar {
+    @include non-overflow-shadow-4dp;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/dense.scss b/app/javascript/styles/plus/plugins/dense.scss
new file mode 100644
index 000000000..b3ba40812
--- /dev/null
+++ b/app/javascript/styles/plus/plugins/dense.scss
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.drawer {
+    &__tab { margin: 8px auto 8px }
+}
+
+.column { margin: 10px 5px }
+
+.column-header {
+    &__buttons { height: 48px }
+
+    &__button {
+        margin: 8px;
+        padding: 10px 8px;
+
+        .fa { vertical-align: text-top }
+    }
+}
+
+.column-subheading { padding: 8px 16px }
+
+.column-link { padding: 12px 16px }
+
+.notification__filter-bar button { padding: 12px 0 }
+
+.getting-started__footer {
+    padding: 12px 16px;
+
+    p { margin-bottom: 12px }
+}
+
+.compose-form {
+    .compose-form__publish { padding-top: 8px }
+}
+
+.status {
+    padding: 8px 8px 8px 66px;
+
+    &__expand { width: 66px }
+
+    &__info { padding-right: 0 }
+
+    &__avatar {
+        left: 8px;
+        top: 10px;
+    }
+
+    &__content { padding-top: 2px }
+}
+
+.detailed-status {
+    padding: 14px;
+
+    &__meta { margin-top: 14px }
+
+    &__action-bar { padding: 10px 0 }
+}
+
+.reply-indicator { padding: 8px }
+
+.button.button--block { margin: 6px 0 }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/plugins/plus.scss b/app/javascript/styles/plus/plugins/plus.scss
new file mode 100644
index 000000000..5b220631b
--- /dev/null
+++ b/app/javascript/styles/plus/plugins/plus.scss
@@ -0,0 +1,33 @@
+@charset "UTF-8";
+@import '../theme/base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.status__action-bar-button {
+    background: #eeeeee;
+    width: 28px !important;
+    height: 28px !important;
+
+    .fa { vertical-align: bottom }
+}
+
+// favorite icon
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
+
+.notification__favourite-icon-wrapper {
+    left: -34px;
+
+    .star-icon {
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        vertical-align: baseline;
+        font-size: 18px;
+
+        &.fa-fw::before { vertical-align: middle }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/_functions.scss b/app/javascript/styles/plus/theme/_functions.scss
new file mode 100644
index 000000000..0374231ed
--- /dev/null
+++ b/app/javascript/styles/plus/theme/_functions.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@use "sass:string";
+
+
+// convert hex color code to svg styled ascii color code
+@function svg-color ($color) {
+    @return '%23' + string.slice(inspect($color), 2, 7);
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/_mixins.scss b/app/javascript/styles/plus/theme/_mixins.scss
new file mode 100644
index 000000000..5f573e339
--- /dev/null
+++ b/app/javascript/styles/plus/theme/_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/plus/theme/account.scss b/app/javascript/styles/plus/theme/account.scss
new file mode 100644
index 000000000..34a8a1816
--- /dev/null
+++ b/app/javascript/styles/plus/theme/account.scss
@@ -0,0 +1,153 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.account {
+    border-bottom: 1px solid $border-color;
+
+    .account__display-name { color: $primary-text-color }
+    .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;
+            }
+
+            &-overlay { border-radius: $avater-radius }
+        }
+    }
+
+    &__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 }
+                }
+            }
+        }
+
+        &__content { color: $secondary-text-color }
+    }
+
+    &__section-headline {
+        background: $text-tab-background-color;
+        border-bottom: 1px solid $border-color;
+
+        a {
+            padding: 16px 0;
+            color: $text-tab-indicator-color;
+
+            &.active {
+                color: $text-tab-indicator-active-color;
+                border-bottom: 4px solid $text-tab-indicator-active-color;
+
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $text-tab-indicator-background-focus-color }
+            }
+
+            &:hover { background: $text-tab-indicator-background-hover-color }
+        }
+    }
+}
+
+.account-role {
+    padding: 4px 8px;
+    border-radius: 17px;
+    color: $ui-text-color;
+    background-color: $contained-chip-color;
+}
+
+.accounts-table__count {
+    color: $ui-text-color;
+
+    small { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/base_config.scss b/app/javascript/styles/plus/theme/base_config.scss
new file mode 100644
index 000000000..73ff009e1
--- /dev/null
+++ b/app/javascript/styles/plus/theme/base_config.scss
@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+
+// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
+
+
+// Color scheme
+@import '../color/v1-light';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'color/v2-light';
+
+
+// Layout profile
+@import '../layout/material-v1';
+// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
+// @import 'layout/material-v2';
+
+
+// Search bar hover settings
+// You can enable/disable search bar floating.
+/*.search__input:hover {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+}*/
+
+
+// Status font size in timeline
+$status-font-size: 15px;  // mastodon default
+//$status-font-size: 16px;  // compatible with material design
+
+
+// Name font size in timeline status
+$name-font-size: 15px;  // mastodon default
+//$name-font-size: 16px;  // compatible with material design
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/basics.scss b/app/javascript/styles/plus/theme/basics.scss
new file mode 100644
index 000000000..4c122d1c6
--- /dev/null
+++ b/app/javascript/styles/plus/theme/basics.scss
@@ -0,0 +1,26 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+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/plus/theme/button.scss b/app/javascript/styles/plus/theme/button.scss
new file mode 100644
index 000000000..1231bac98
--- /dev/null
+++ b/app/javascript/styles/plus/theme/button.scss
@@ -0,0 +1,97 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+        }
+    }
+
+    &.overlayed {
+        border-radius: 50%;
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+    
+        &:hover {
+            background: $media-icon-background-color;
+            color: $media-icon-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 }
+}
+
+.spoiler-button__overlay__label {
+    background: $media-icon-background-color;
+    border-radius: $button-radius;
+    color: $media-icon-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/columns.scss b/app/javascript/styles/plus/theme/columns.scss
new file mode 100644
index 000000000..54effffd3
--- /dev/null
+++ b/app/javascript/styles/plus/theme/columns.scss
@@ -0,0 +1,474 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.column {
+    @include shadow-1dp;
+    padding: 0;
+    margin: 10px 8px;
+    border-radius: $card-radius;
+
+    &>.scrollable { background: $list-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;
+    }
+
+    &>.column-header__back-button { color: $top-bar-icon-color }
+
+    &.active {
+        .column-header__icon {
+            color: $top-bar-unread-icon-color;
+            text-shadow: none;
+        }
+    }
+
+    &__icon {
+        margin-right: 16px;
+        color: $top-bar-icon-color;
+        font-size: 20px;
+    }
+
+    &__buttons { height: 56px }
+
+    &__button {
+        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;
+        padding: 8px 0;
+
+        &:hover {
+            color: $icon-button-hover-color;
+            text-decoration: none;
+        }
+
+        .fa { font-size: 20px }
+
+        span { vertical-align: middle }
+    }
+
+    &__setting-arrows {
+        font-size: 16px;
+        border-bottom: 8px;
+
+        .column-header__setting-btn {
+            padding: 8px;
+            border-radius: 50%;
+
+            &:last-child { padding-right: 8px }
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        border-radius: $bar-radius;
+
+        .announcements { border-top: 1px solid $border-color }
+
+        &.active {
+            @include shadow-4dp;
+
+            &::before { background: transparent }
+        }
+    }
+
+    &__collapsible {
+        color: $ui-text-color;
+        background: $card-background-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: $top-bar-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;
+    }
+
+    &__row .text-btn { margin-bottom: 0 }
+}
+
+.column-back-button {
+    @include shadow-4dp;
+    background: $top-bar-color;
+    color: $top-bar-icon-color;
+    padding: 16px;
+
+    span { visibility: hidden }  // hide "back" string
+}
+
+.column-inline-form {
+    padding: 16px 0 16px 16px;
+    background: $card-background-color;
+
+    .icon-button { margin: 0 16px }
+}
+
+.setting-text {
+    color: $primary-text-color;
+    background: $text-field-background-color;
+    border-radius: $bar-radius;
+
+    &::placeholder { color: $tips-text-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;
+        }
+    }
+}
+
+// read status in notification column
+.muted {
+    .status {
+        &__content {
+            color: $read-primary-text-color;
+    
+            p { color: $read-primary-text-color }
+    
+            a { color: $read-secondary-text-color }
+        }
+
+        &__display-name strong { color: $read-primary-text-color }
+    }
+
+    .poll {
+        color: $read-primary-text-color;
+
+        &__chart {
+            background: $read-poll-bar-color;
+    
+            &.leading { background: $read-poll-bar-leading-color }
+        }
+
+        &__footer,
+        &__link { color: $read-ui-text-color }
+    }
+}
+
+.load-gap { border-bottom: 1px solid $border-color }
+
+.load-more {
+    color: $icon-color;
+    padding: 16px;
+
+    &:hover { background: $menu-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 }
+    }
+
+    &__trends {
+        background: $background-color;
+        margin-bottom: 0;
+
+        h4 {
+            color: $section-text-color;
+            padding: 12px 16px;
+            border-top: 1px solid $border-color;
+            border-bottom: none;
+        }
+    }
+}
+
+.trends {
+    &__header {
+        color: $section-text-color;
+        background: transparent;
+        border-bottom: 1px solid $border-color;
+        padding: 16px;
+
+        .fa { margin-right: 8px }
+    }
+
+    &__item {
+        padding: 16px;
+        border-bottom: none;
+    
+        &__name {
+            color: $secondary-text-color;
+            font-size: 12px;
+    
+            a { color: $primary-text-color }
+        }
+    
+        &__current {
+            padding-right: 16px;
+            margin-left: 4px;
+            color: $secondary-text-color;
+        }
+    
+        &__sparkline path {
+            stroke: $primary-color;
+            fill: $primary-color;
+            fill-opacity: 0.5;
+        }
+    }
+}
+
+.setting-toggle {
+    &__label {
+        color: $ui-text-color;
+        margin: 8px 8px 8px 14px;
+    }
+}
+
+.announcements {
+    background: $card-background-color;
+    padding: 0;
+
+    &__container { color: $primary-text-color }
+
+    &__item {
+        padding: 16px;
+        font-size: 16px;
+
+        &__unread { background: $badge-color }
+    }
+
+    &__pagination {
+        color: $ui-text-color;
+        padding: 8px 16px;
+        bottom: 8px;
+
+        .icon-button {
+            font-size: 20px !important;
+            width: 20px !important;
+            height: 20px !important;
+            margin: 0 8px;
+        }
+    }
+}
+
+.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
+
+.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: $tab-background-color;
+        border-bottom: 1px solid $border-color;
+        z-index: 1;
+    
+        button {
+            background: $tab-background-color;
+            color: $tab-indicator-color;
+            font-size: 16px;
+
+            span { font-size: 14px }
+    
+            &.active {
+                color: $tab-indicator-active-color;
+                border-bottom: 4px solid $tab-indicator-active-color;
+    
+                &::before,
+                &:after { border: none }
+
+                &:focus { background: $tab-indicator-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 {
+    .icon-button.disabled { color: $disabled-icon-color }
+}
+
+.relationship-tag {
+    color: $ui-text-color;
+    background-color: $relationship-tag-color;
+    font-size: 12px;
+    border-radius: 17px;
+    padding: 4px 8px;
+    opacity: 1;
+}
+
+.attachment-list__list a { color: $secondary-text-color }
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/components.scss b/app/javascript/styles/plus/theme/components.scss
new file mode 100644
index 000000000..ae5bfe158
--- /dev/null
+++ b/app/javascript/styles/plus/theme/components.scss
@@ -0,0 +1,534 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@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;
+            position: inherit;
+        }
+
+        &__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: 16px;
+                left: unset;
+                transform: none;
+            }
+        }
+    }
+}
+
+.search-popout {
+    @include shadow-2dp;
+    background: $search-bar-focus-color;
+    border-radius: 0px $bar-radius;
+    border-top: 1px solid $border-color;
+    margin-top: 0;
+    color: $tips-text-color;
+
+    h4 {
+        color: $secondary-text-color;
+    }
+
+    em {
+        color: $search-bar-text-color;
+    }
+}
+
+.search-results {
+    &__header {
+        color: $secondary-text-color;
+        background-color: $card-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: 8px 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: $text-field-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+    
+            &::placeholder { color: $tips-text-color }
+        }
+
+        &__suggestions {
+            @include shadow-1dp;
+            background: $menu-background-color;
+            color: $ui-text-color;
+            border-radius: $card-radius;
+            font-size: 16px;
+            padding: 8px 0;
+
+            &__item {
+                padding: 8px;
+                border-radius: 0;
+
+                &:hover { background: $menu-background-hover-color }
+
+                &.selected,
+                &:focus,
+                &:active { background: $menu-background-active-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: 16px 12px 16px 0 }
+
+            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 }
+    }
+}
+
+.no-reduce-motion .spoiler-input {
+    transition-duration: .2s, .2s;
+}
+
+
+.poll {
+    &__input {
+        border: 2px solid $control-border-color;
+        width: 20px;
+        height: 20px;
+        flex: 0 0 20px;
+        margin: 8px;
+
+        &.checkbox { border-radius: 2px }
+
+        &:focus,
+        &:hover { border: 2px solid $control-border-color }
+    }
+
+    &__text input[type=text] {
+        color: $ui-text-color;
+        background: $text-field-background-color;
+        border: 1px solid $border-color;
+        padding: 8px 12px;
+    
+        &:focus { border-color: $border-active-color }
+    }
+
+    &__option input[type=text] {
+        color: $primary-text-color;
+        background: $text-field-background-color;
+        border: none;
+        border-radius: 2px;
+        padding: 8px 16px;
+    }
+
+    &__chart {
+        border-radius: 0;
+        background: $poll-bar-color;
+    
+        &.leading { background: $poll-bar-leading-color }
+    }
+
+    &__footer {
+        padding-top: 8px;
+        padding-bottom: 0;
+        color: $ui-text-color;
+    }
+
+    &__link { color: $ui-text-color }
+}
+
+.privacy-dropdown {
+    &.active .privacy-dropdown__value.active {
+        background: $icon-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 {
+    box-shadow: none;
+    border: 1px solid $border-color;
+    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 }
+}
+
+.attachment-list {
+    &__list a { color: $secondary-text-color }
+
+    &.compact .fa { color: $icon-color }
+}
+
+.block-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.load-more {
+    color: $ui-text-color;
+
+    &:hover { background: transparent }
+}
+
+.autosuggest-hashtag {
+    &__name { color: $menu-text-color }
+}
+
+.filter-form {
+    background: $background-color;
+    color: $ui-text-color;
+
+    &__column { padding: 8px 16px }
+}
+
+.directory {
+    &__card {
+        @include shadow-1dp;
+        margin: 8px 4px;
+        border-radius: $card-radius;
+
+        &__img { border-radius: $card-radius $card-radius 0 0 }
+
+        &__bar {
+            background: $card-background-color;
+            padding: 8px 16px;
+
+            .display-name {
+                margin-left: 16px;
+
+                span { color: $secondary-text-color }
+            }
+        }
+
+        &__extra {
+            background: $card-background-color;
+            border-radius: 0 0 $card-radius $card-radius;
+
+            .account__header__content {
+                padding: 8px 16px;
+                border-bottom: 1px solid $border-color;
+            }
+
+            .accounts-table__count { padding: 16px 0 }
+        }
+    }
+}
+
+.mute-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $card-radius;
+
+    &__container { padding: 24px }
+
+    &__explanation { margin-top: 16px }
+
+    &__action-bar {
+        background: $card-background-color;
+        padding: 8px;
+        justify-content: flex-end;
+    }
+
+    &__cancel-button {
+        box-shadow: none !important;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background-color: $text-button-hover-color;
+        }
+
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+
+    .setting-toggle {
+        margin-top: 16px;
+        margin-bottom: 16px;
+
+        &__label {
+            color: $ui-text-color;
+            margin: 0 0 0 12px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/control.scss b/app/javascript/styles/plus/theme/control.scss
new file mode 100644
index 000000000..a205a4cb7
--- /dev/null
+++ b/app/javascript/styles/plus/theme/control.scss
@@ -0,0 +1,71 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.react-toggle {
+    width: 36px;
+    height: 16px;
+    border-radius: 15px;
+
+    &-track {
+        background-color: $toggle-track-color;
+        margin: 4px;
+        width: 36px;
+        height: 16px;
+
+        &-check { visibility: hidden }
+        &-x { visibility: hidden }
+    }
+
+    &-thumb {
+        @include shadow-1dp;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        background-color: $toggle-thumb-color;
+    }
+
+    &--checked {
+        .react-toggle{
+            &-track { background-color: $toggle-track-active-color }
+
+            &-thumb {
+                background-color: $toggle-thumb-active-color;
+                left: 22px;
+            }
+        }
+
+        &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
+
+    }
+
+    &:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
+}
+
+.radio-button {
+    padding: 8px 0;
+
+    &__input {
+        border: 2px solid $border-color;
+
+        &.checked {
+            border-color: $icon-button-active-color;
+            background: $icon-button-active-color;
+            padding: 3px;
+            background-clip: content-box;
+        }
+    }
+}
+
+.compose-form__sensitive-button .checkbox {
+    border: 2px solid $border-color;
+    border-radius: 2px;
+
+    &.active {
+        border-color: $primary-color;
+        background: $primary-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/emoji-picker.scss b/app/javascript/styles/plus/theme/emoji-picker.scss
new file mode 100644
index 000000000..70e22752d
--- /dev/null
+++ b/app/javascript/styles/plus/theme/emoji-picker.scss
@@ -0,0 +1,92 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+.emoji-picker-dropdown {
+    &__menu {
+        @include shadow-8dp;
+        background: $menu-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: $menu-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-active-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: $search-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/plus/theme/icons.scss b/app/javascript/styles/plus/theme/icons.scss
new file mode 100644
index 000000000..1367647ec
--- /dev/null
+++ b/app/javascript/styles/plus/theme/icons.scss
@@ -0,0 +1,44 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.fa.fa-users.column-link,
+.fa.fa-globe.column-link,
+.fa.fa-address-book.column-link,
+.fa.fa-bullhorn.column-link,
+.fa.fa-envelope.column-link,
+.fa.fa-bookmark.column-link,
+.fa.fa-star.column-link,
+.fa.fa-list-ul.column-link {
+    &__icon.fa-fw { color: $icon-color }
+}
+
+
+.fa { vertical-align: sub }  // adjust material icon font baseline to other font
+
+.fa.fa-times,
+.fa.fa-eraser,
+.fa.fa-plus { vertical-align: middle }  // adjustment exception
+
+.fa.fa-check { vertical-align: initial }
+
+.fa.fa-lock { text-transform: none }
+
+.fa-fw { width: 16px }
+
+// icon in tab settings
+.fa.fa-chevron-left.column-back-button__icon.fa-fw,
+.text-btn.column-header__setting-btn .fa.fa-eraser {
+    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/plus/theme/material-icons.scss b/app/javascript/styles/plus/theme/material-icons.scss
new file mode 100644
index 000000000..747856253
--- /dev/null
+++ b/app/javascript/styles/plus/theme/material-icons.scss
@@ -0,0 +1,159 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config', '../icon_config';
+@import '../custom_color', '../custom_layout';
+@import 'functions';
+
+
+.fa {
+    &.fa-bars,
+    &.fa-navicon,
+    &.fa-reorder,
+    &.fa-globe,
+    &.fa-cog,
+    &.fa-cogs,
+    &.fa-gears,
+    &.fa-sign-out,
+    &.fa-search,
+    &.fa-times,
+    &.fa-times-circle,
+    &.fa-close,
+    &.fa-remove,
+    &.fa-chevron-down,
+    &.fa-ellipsis-v,
+    &.fa-paperclip,
+    &.fa-tasks,
+    &.fa-plus,
+    &.fa-unlock,
+    &.fa-lock,
+    &.fa-envelope,
+    &.fa-home,
+    &.fa-bullhorn,
+    &.fa-sliders,
+    &.fa-chevron-left,
+    &.fa-chevron-right,
+    &.fa-reply,
+    &.fa-reply-all,
+    &.fa-share-alt,
+    &.fa-star,
+    &.fa-bookmark,
+    &.fa-ellipsis-h,
+    &.fa-bell,
+    &.fa-eraser,
+    &.fa-users,
+    &.fa-file-text,
+    &.fa-user-plus,
+    &.fa-address-book,
+    &.fa-address-book-o,
+    &.fa-list,
+    &.fa-list-ul,
+    &.fa-eye,
+    &.fa-eye-slash,
+    &.fa-pencil,
+    &.fa-trash,
+    &.fa-play,
+    &.fa-external-link,
+    &.fa-retweet,
+    &.fa-link,
+    &.fa-pause,
+    &.fa-volume-up,
+    &.fa-volume-off,
+    &.fa-expand,
+    &.fa-download,
+    &.fa-arrows-alt,
+    &.fa-compress,
+    &.fa-user-times,
+    &.fa-check,
+    &.fa-quote-right {
+        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-icon }
+    &.fa-reply-all::before { content: "reply_all" }
+    &.fa-share-alt::before { content: "share" }
+    &.fa-star::before { content: $favorite-icon }
+    &.fa-bookmark::before { content: "bookmark" }
+    &.fa-ellipsis-h::before { content: "more_horiz" }
+    &.fa-bell::before { content: "notifications" }
+    &.fa-eraser::before { content: "clear_all" }
+    &.fa-users::before { content: "people" }
+    &.fa-file-text::before { content: "web" }
+    &.fa-user-plus::before { content: "person_add" }
+    &.fa-address-book::before { content: "explore" }
+    &.fa-address-book-o::before { content: "explore" }
+    &.fa-list::before { content: "list" }
+    &.fa-list-ul::before { content: "list" }
+    &.fa-eye::before { content: "visibility" }
+    &.fa-eye-slash::before { content : "visibility_off" }
+    &.fa-pencil::before { content: "create" }
+    &.fa-trash::before { content: "delete" }
+    &.fa-play::before { content: "play_arrow" }
+    &.fa-external-link::before { content: "open_in_new" }
+    &.fa-retweet::before { content: "repeat" }
+    &.fa-link::before { content: "link" }
+    &.fa-pause::before { content: "pause" }
+    &.fa-volume-up::before { content: "volume_up" }
+    &.fa-volume-off::before { content: "volume_off" }
+    &.fa-expand::before { content: "web_asset" }
+    &.fa-download::before { content: "file_download" }
+    &.fa-arrows-alt::before { content: "fullscreen" }
+    &.fa-compress::before { content: "fullscreen_exit" }
+    &.fa-user-times::before { content: "delete" }
+    &.fa-check::before { content: "check" }
+    &.fa-quote-right::before { content: "format_quote" }
+}
+
+// bookmark icon
+.status__action-bar-button.icon-button,
+.bookmark-icon.icon-button {
+    .fa.fa-bookmark::before { content: "bookmark_border" }
+    &.active .fa.fa-bookmark::before { content: "bookmark" }
+}
+
+// favorite icon
+.status__action-bar-button.star-icon.icon-button,
+.star-icon.icon-button {
+    .fa.fa-star::before { content: $favorite-icon-border }
+
+    &.active,
+    &.active.activate {
+        .fa.fa-star::before { content: $favorite-icon }
+    }
+}
+
+// favorite icon color
+.star-icon.active,
+.star-icon.icon-button.active.active,
+.notification__favourite-icon-wrapper .star-icon,
+.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
+
+// boost icon
+.no-reduce-motion button.icon-button i.fa-retweet {
+    height: 18px;
+    width: 18px;
+    transition: none;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
+}
+
+// dropdown icon
+.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/media.scss b/app/javascript/styles/plus/theme/media.scss
new file mode 100644
index 000000000..9d0203828
--- /dev/null
+++ b/app/javascript/styles/plus/theme/media.scss
@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.media-gallery {
+    border-radius: 0;
+
+    &__item { border-radius: 0 }
+}
+
+.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 }
+    }
+}
+
+.media-modal {
+    &__nav {
+        background: $media-icon-background-color;
+        color: $media-icon-color;
+        height: 48px;
+        width: 48px;
+        margin: auto 16px;
+        padding: 8px;
+        border-radius: 50%;
+    
+        .fa { width: 32px }
+    }
+
+    &__button {
+        background-color: $media-page-indicator-color;
+
+        &--active { background-color: $media-page-indicator-active-color }
+    }
+}
+
+.video-player {
+    &__controls {
+        background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
+        padding: 0 12px;
+    }
+
+    &__seek {
+        &::before {
+            background: rgba(255,255,255,.2);
+            border-radius: 0;
+        }
+
+        &__buffer {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__progress {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__volume {
+        &::before {
+            background: rgba(255,255,255,.4);
+            border-radius: 0;
+        }
+
+        &__current {
+            background: $primary-color;
+            border-radius: 0;
+        }
+
+        &__handle {
+            transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
+            background-color: $primary-color;
+            box-shadow: none;
+        }
+    }
+
+    &__time-current { margin-left: 68px }
+
+    &__buttons button { font-size: 20px }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/modal.scss b/app/javascript/styles/plus/theme/modal.scss
new file mode 100644
index 000000000..2748c8723
--- /dev/null
+++ b/app/javascript/styles/plus/theme/modal.scss
@@ -0,0 +1,102 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.confirmation-modal {
+    background: $card-background-color;
+    color: $ui-text-color;
+    border-radius: $dialog-radius;
+    width: 300px;
+
+    &__container {
+        text-align: left;
+        padding: 24px;
+    }
+
+    &__action-bar {
+        justify-content: flex-end;
+        background: $card-background-color;
+        padding: 8px;
+    }
+
+    &__secondary-button {
+        box-shadow: none !important;
+        color: $text-button-color;
+        background: transparent;
+        margin: 0 8px;
+
+        &:hover {
+            color: $text-button-color;
+            background: $text-button-hover-color;
+        }
+        
+        &:focus,
+        &:active {
+            color: $text-button-color;
+            background-color: $text-button-focus-color;
+        }
+    }
+}
+
+.actions-modal {
+    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;
+            color: $ui-text-color;
+        }
+    }
+
+    .dropdown-menu__separator { border-bottom-color: $border-color }
+
+    .status {
+        background: $card-background-color;
+        border-bottom-color: $border-color;
+        padding-top: 12px;
+        padding-bottom: 12px;
+
+        &__avatar {
+            left: 12px;
+            top: 12px;
+        }
+    }
+}
+
+.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;
+    }
+
+    &__comment {
+        border-right: none;
+
+        .setting-text-label { color: $ui-text-color }
+    }
+}
+
+.embed-modal .embed-modal__container {
+    padding: 0 24px 24px 24px;
+
+    .hint {
+        margin-bottom: 16px;
+        color: $secondary-text-color;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/responsive.scss b/app/javascript/styles/plus/theme/responsive.scss
new file mode 100644
index 000000000..9ae304041
--- /dev/null
+++ b/app/javascript/styles/plus/theme/responsive.scss
@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.tabs-bar {
+    background: $top-bar-color;
+
+    &__link {
+        padding: 16px 16px 12px 16px;
+        color: $top-bar-icon-color;
+        border-bottom: 4px solid transparent;
+
+        &.active {
+            border-bottom: 4px solid $tab-indicator-active-color;
+            color: $tab-indicator-active-color;
+        }
+
+        .fa { font-size: 20px }
+
+        span {
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
+    }
+
+    &__wrapper {
+        @include shadow-4dp;
+        background: transparent;
+    }
+}
+
+#tabs-bar__portal { overflow-y: hidden }
+
+.floating-action-button {
+    @include shadow-6dp;
+    background: $floating-action-button-color;
+    color: $floating-action-button-icon-color;
+    font-size: 24px;
+
+    &:hover { background: $floating-action-button-hover-color }
+
+    &:active,
+    &:focus { background: $floating-action-button-active-color }
+}
+
+.columns-area--mobile {
+    .column { margin: 0 !important }
+    .search__input { padding: 16px 46px }
+
+    .search__icon {
+        .fa {
+            top: 16px;
+            left: 16px;
+        }
+
+        .fa-times-circle.active { left: unset }
+    }
+}
+
+// middle size screen
+@media screen and (min-width: 415px) {
+    .tabs-bar {
+        margin-bottom: 0;
+
+        &__wrapper {
+            padding-top: 0;
+
+            .tabs-bar { margin-bottom: 0 }
+        }
+    }
+
+    .columns-area__panels__main {
+        @include shadow-1dp;
+        padding: 0;
+    }
+}
+
+@media screen and (min-width: 631px) {
+    .tabs-bar__link {
+        &:hover {
+            background: $tab-indicator-background-hover-color;
+            border-bottom-color: $tab-background-color;
+        }
+
+        &:active,
+        &:focus {
+            background: $tab-indicator-background-focus-color;
+            border-bottom-color: $tab-background-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/statuses.scss b/app/javascript/styles/plus/theme/statuses.scss
new file mode 100644
index 000000000..eedf77c2a
--- /dev/null
+++ b/app/javascript/styles/plus/theme/statuses.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+@import 'mixins';
+
+
+.status {
+    padding: 12px 12px 12px 70px;
+    border-bottom: 1px solid $border-color;
+
+    &__expand { width: 70px }
+
+    &__info {
+        font-size: $name-font-size;
+        padding-right: 4px;
+    }
+
+    &__relative-time { color: $info-text-color }
+
+    &__display-name {
+        color: $secondary-text-color;
+
+        strong { color: $primary-text-color }
+    }
+
+    &__avatar {
+        left: 12px;
+        top: 12px;
+    }
+
+    &__content {
+        font-size: $status-font-size;
+        padding-top: 4px;
+        color: $primary-text-color;
+
+        a {
+            color: $link-text-color;
+
+            &.unhandled-link { color: $link-text-color }
+        }
+
+        .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;
+        }
+    }
+
+    &__prepend {
+        color: $secondary-text-color;
+        margin-left: 64px;
+
+        .status__display-name strong { color: $secondary-text-color }
+    }
+
+    &.status-direct:not(.read) {
+        background: transparent;
+        border-bottom-color: $border-color;
+    }
+}
+
+.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 }
+
+    &__actions {
+        &>div {
+            background: $media-icon-background-color;
+            border-radius: $button-radius;
+        }
+
+        button,
+        a {
+            color: $media-icon-color;
+            font-size: 20px;
+        }
+
+        a { bottom: auto }
+    }
+
+    &.compact {
+        border-color: $border-color;
+        outline: none;
+        background: transparent;
+        
+        .status-card {
+            &__content { padding: 12px }
+            &__image { flex: 0 0 64px }
+        }
+
+        &:hover { background-color: transparent !important }
+    }
+
+    &:hover { background-color: $card-background-color }
+}
+
+// Detailed status in mobile
+.status.light {
+    .status {
+        &__display-name { color: $primary-text-color }
+        &__relative-time { color: $info-text-color }
+        &__content { color: $primary-text-color }
+    }
+
+    .display-name { color: $secondary-text-color }
+    .display-name strong { color: $primary-text-color }
+}
+
+.detailed-status {
+    background: $card-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 }
+    }
+}
+
+// search user trends
+.display-name {
+    &__html { color: $primary-text-color }
+    &__account { color: $secondary-text-color }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/theme.scss b/app/javascript/styles/plus/theme/theme.scss
new file mode 100644
index 000000000..f92276549
--- /dev/null
+++ b/app/javascript/styles/plus/theme/theme.scss
@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+
+@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
\ No newline at end of file
diff --git a/app/javascript/styles/plus/theme/variables.scss b/app/javascript/styles/plus/theme/variables.scss
new file mode 100644
index 000000000..0b948881b
--- /dev/null
+++ b/app/javascript/styles/plus/theme/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+@import 'base_config';
+@import '../custom_config';
+@import '../custom_color', '../custom_layout';
+
+
+.link-button { color: $link-text-color }
\ No newline at end of file
diff --git a/app/lib/formatter.rb b/app/lib/formatter.rb
index e6f5d7a63..073004d5e 100644
--- a/app/lib/formatter.rb
+++ b/app/lib/formatter.rb
@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require 'singleton'
+require_relative './formatter_markdown'
 require_relative './sanitize_config'
 
 class Formatter
@@ -35,12 +36,21 @@ class Formatter
     linkable_accounts << status.account
 
     html = raw_content
+
+    mdFormatter = Formatter_Markdown.new(html)
+    html = mdFormatter.formatted
+
     html = "RT @#{prepend_reblog} #{html}" if prepend_reblog
     html = encode_and_link_urls(html, linkable_accounts)
     html = encode_custom_emojis(html, status.emojis, options[:autoplay]) if options[:custom_emojify]
     html = simple_format(html, {}, sanitize: false)
     html = html.delete("\n")
 
+    mdLinkDecoder = MDLinkDecoder.new(html)
+    html = mdLinkDecoder.decode
+
+    html.gsub!(/(&amp;)/){"&"}
+
     html.html_safe # rubocop:disable Rails/OutputSafety
   end
 
@@ -112,13 +122,18 @@ class Formatter
   def encode_and_link_urls(html, accounts = nil, options = {})
     entities = utf8_friendly_extractor(html, extract_url_without_protocol: false)
 
+    mdExtractor = MDExtractor.new(html)
+    entities.concat(mdExtractor.extractEntities)
+
     if accounts.is_a?(Hash)
       options  = accounts
       accounts = nil
     end
 
     rewrite(html.dup, entities) do |entity|
-      if entity[:url]
+      if entity[:markdown]
+        html[entity[:indices][0]...entity[:indices][1]]
+      elsif entity[:url]
         link_to_url(entity, options)
       elsif entity[:hashtag]
         link_to_hashtag(entity)
diff --git a/app/lib/formatter_markdown.rb b/app/lib/formatter_markdown.rb
new file mode 100644
index 000000000..13399069a
--- /dev/null
+++ b/app/lib/formatter_markdown.rb
@@ -0,0 +1,367 @@
+require 'uri'
+require 'redcarpet'
+require 'redcarpet/render_strip'
+
+class Formatter_Markdown
+    def initialize(html)
+        @html = html.dup
+    end
+
+    def formatted
+        mdRenderer = CustomMDRenderer.new(
+            strikethrough: true,
+            hard_wrap: true,
+            autolink: false,
+            superscript:false,
+            fenced_link: true,
+            fenced_image: true,
+            no_intra_emphasis: true,
+            no_links: true,
+            no_styles: true,
+            no_images: true,
+            filter_html: true,
+            escape_html: true,
+            safe_links_only: true,
+            with_toc_data: true,
+            xhtml: false,
+            prettify: true,
+            link_attributes: true
+        )
+
+        md = Redcarpet::Markdown.new(
+            mdRenderer,
+            strikethrough: true,
+            hard_wrap: true,
+            superscript:false,
+            autolink: false,
+            space_after_headers: true,
+            no_intra_emphasis: true,
+            no_links: true,
+            no_styles: true,
+            no_images: true,
+            filter_html: true,
+            escape_html: true,
+            safe_links_only: true,
+            with_toc_data: true,
+            xhtml: false,
+            prettify: true,
+            link_attributes: true
+        )
+        s = @html
+        s.gsub!(/\n[\n]+/) {"\n　\n"}# 改行周りの問題を修正
+        s.gsub!(/`[ ]+`/) {"｀ ｀"}# code内が半角スペースのみだとHTMLが壊れるのでそれの回避
+
+        renderedMD = md.render(s)
+
+        result = renderedMD
+        result.gsub!(/(<\w+)([^>]*>)/) { "#{$1} data-md='true' #{$2}" }# ToDo data-md="true" を認識して他鯖の人にmarkdownの使用を伝える機能の実装
+        result.gsub!(/(https?:\/\/[^<>"\[\] 　]+)/){"#{$1} "}#URLの後ろにスペースをねじ込む奴 mastodonのURL認識がゆるいのをmarkdownで対処
+
+        result
+
+    end
+
+    class CustomMDRenderer < Redcarpet::Render::HTML
+
+        #基本的な実装の流れ
+        #URLの削除(mastodonの機能上URLとして認識されると十中八九HTMLが壊れるので)
+        #markdownコンテンツ内でのmarkdownコンテンツの禁止(意図しないHTMLタグの生成によってHTMLの不正出力を防ぐ目的)
+        #最後にHTMLに出力される際にHTML的にヤバイ子たちのエスケープ
+
+        def paragraph(text)
+            %(#{text.strip})
+        end
+
+        def linebreak()
+            %(<br>)
+        end
+
+        def block_quote(quote)
+            urlRemoved = "#{remove_url(quote)}"
+            escapedContents = "#{blockquote_markdown_escape(urlRemoved)}"
+            %(<blockquote>#{escapedContents.strip}</blockquote>)
+        end
+
+        def header(text, header_level)
+            urlRemoved = "#{remove_url(text)}"
+            mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+            %(<h#{header_level}>#{encode(mdContentsRemoved)}</h#{header_level}>\n)
+        end
+
+        def block_code(code, language)
+            %(<br>#{code.strip})
+        end
+
+        def codespan(code)
+            urlRemoved = "#{remove_url(code)}"
+            escapedCode = "#{escape_bbcode(urlRemoved)}"
+            encoded = "#{encode(escapedCode)}"
+            %(<code>#{code_contents(encoded)}</code>)
+        end
+
+        def list(contents, list_type)
+            if list_type == :unordered
+                %(<ul class='md-contents'>#{contents.strip}</ul>)
+            elsif list_type == :ordered
+                %(<ol class='md-contents'>#{contents.strip}</ol>)
+            else
+                %(<#{list_type} class='md-contents'>#{contents.strip}</#{list_type}>)
+            end
+        end
+
+        def list_item(text, list_type)
+            urlRemoved = "#{remove_url(text)}"
+            mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+            %(<li class='md-contents'>#{encode(mdContentsRemoved)}</li>)
+        end
+
+        def emphasis(text)
+            urlRemoved = "#{remove_url(text)}"
+            mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+            %(<sup>#{encode(mdContentsRemoved)}</sup>)
+        end
+
+        def double_emphasis(text)
+            urlRemoved = "#{remove_url(text)}"
+            mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+            %(<sub>#{encode(mdContentsRemoved)}</sub>)
+        end
+
+        def triple_emphasis(text)
+            urlRemoved = "#{remove_url(text)}"
+            mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+            %(<small>#{encode(mdContentsRemoved)}</small>)
+        end
+
+        def strikethrough(text)
+            urlRemoved = "#{remove_url(text)}"
+            mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+            %(<s>#{encode(mdContentsRemoved)}</s>)
+        end
+
+        def superscript(text)
+            urlRemoved = "#{remove_url(text)}"
+            mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+            %(<sup>#{encode(mdContentsRemoved)}</sup>)
+        end
+
+        def underline(text)
+            urlRemoved = "#{remove_url(text)}"
+            mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+            %(<u>#{encode(mdContentsRemoved)}</u>)
+        end
+
+        def highlight(text)
+            urlRemoved = "#{remove_url(text)}"
+            mdContentsRemoved = "#{markdown_escape(urlRemoved)}"
+            %(<mark>#{encode(mdContentsRemoved)}</mark>)
+        end
+
+        #オートリンクはmastodonとの相性が悪いので基本的には使わない
+
+        def autolink(link, link_type)
+            %(<a herf="#{link}">リンク</a>)
+        end
+
+        #https以外の物がURLとして記入された時にTextをHTML的に考えて安全に表示するように変更
+
+        def image(link, title, alt_text)
+
+            if alt_text =~ /[<>"\[\] 　]+/
+                alt_text = "設定なし"
+            end
+
+            imgcheck = "#{link}"
+            if imgcheck !~ /\Ahttps:\/\/[^<>"\[\] 　]+\z/
+                %(#{encode(alt_text)})
+            else
+                %(<span class="img_FTL">画像が添付されています。</span><img src="#{URI.encode_www_form_component(link)}">)
+            end
+        end
+
+        def link(link, title, content)
+
+            if content =~ /([<>"\[\] 　]+|https?:\/\/|#|@)/
+                content = "リンク"
+            elsif content !~ /.+/
+                content = "リンク"
+            end
+
+            linkcheck = "#{link}"
+            if linkcheck !~ /\Ahttps:\/\/[^<>"\[\] 　]+\z/
+                %(#{encode(content)})
+            else
+                %(<a href="#{URI.encode_www_form_component(link)}">#{encode(content)}</a>)
+            end
+        end
+
+        #ここから下はいろいろエスケープするための奴
+
+        #HTML的に考えてよろしくない子たちをエスケープする奴
+        def encode(html)
+            HTMLEntities.new.encode(html)
+        end
+
+        #markdownコンテンツないでURLが生成されるのを防ぐためのエスケープする奴
+        def remove_url(string)
+            url = string.gsub(/https?:\/\//){ "URL:" }
+            reply = url.gsub(/@/){ "＠" }
+            hashTag = reply.gsub(/#/){ "＃" }
+        end
+
+        #前々から要望があったcode内でBBCodeを無効化するための奴
+        def escape_bbcode(string)
+            string.gsub(/\[/){ "&#091;" }
+        end
+
+        #markdownの中でmarkdownを展開させないためのエスケープする奴
+
+        #blockquote以外は下のが使える
+        def markdown_escape(string)
+            string.gsub(/<[^>]+>/) { "" }
+        end
+
+        #blockquoteコンテンツ内でblockquoteタグだけを許可するためのエスケープ
+        def blockquote_markdown_escape(string)
+            string.gsub(/<([\/]?a[^>]*|[\/]?img[^>]*|[\/]?code[^>]*|[\/]?h[1-6][^>]*|[\/]?sup[^>]*|[\/]?sub[^>]*|[\/]?small[^>]*|[\/]?ul[^>]*|[\/]?ol[^>]*|[\/]?li[^>]*|[\/]?hr[^>]*|[\/]?s[^>]*|[\/]?u[^>]*|[\/]?mark[^>]*)>/) { "" }
+        end
+
+        #code内の一部を色分けするための変更
+        def code_contents(string)
+            simple = string.gsub(/(true|error|false|failed|def|puts|end|fn|let|mut|use|String|println!)/ ,
+                "true" => "<span class='positive'>#{:true}</span>",
+                "error" => "<span class='negative'>#{:error}</span>",
+                "false" => "<span class='negative'>#{:false}</span>",
+                "failed" => "<span class='negative'>#{:failed}</span>",
+                "def" => "<span class='ruby-func'>#{:def}</span>",
+                "puts" => "<span class='ruby-func'>#{:puts}</span>",
+                "end" => "<span class='ruby-func'>#{:end}</span>",
+                "fn" => "<span class='rust-fanc'>#{:fn}</span>",
+                "let" => "<span class='rust-fanc'>#{:let}</span>",
+                "mut" => "<span class='rust-fanc'>#{:mut}</span>",
+                "use" => "<span class='rust-fanc'>#{:use}</span>",
+                "String" => "<span class='rust-macro'>#{:String}</span>",
+                "println!" => "<span class='rust-macro'>#{:println!}</span>",
+            )
+            simple.gsub(/(&quot;[a-zA-Z0-9_ ,]+&quot;)/){ "<span class='contents'>#{$1}</span>" }
+#                "" => "<span class=''>#{:}</span>",
+        end
+
+        #テストで書きなぐった奴
+        def html_escape(string)
+            string.gsub(/['&\"<>\/]/, {
+              '&' => '&amp;',
+              '<' => '&lt;',
+              '>' => '&gt;',
+              '"' => '&quot;',
+              "'" => '&#x27;',
+              "/" => '&#x2F;',
+            })
+        end
+
+    end
+
+end
+
+#URLとかいう人類には早すぎたやばい子たちを大人しくするために必要な機構
+
+class MDLinkDecoder
+    def initialize(html)
+        @html = html.dup
+    end
+
+    def decode
+        imageDecoded = @html.gsub(/<img data-md='true'\s+src="([^"]+)"([^>]*)>/) { "<a href=\"" + URI.decode_www_form_component($1) + "\"" + $2 + "><img data-md='true' src=\"" + URI.decode_www_form_component($1) + "\"" + $2 + "></a>" }
+
+        imageDecoded.gsub(/<a data-md='true'\s+href="([^"]+)"([^>]*)>/) { "<a data-md='true' href=\"" + URI.decode_www_form_component($1) + "\"" + $2 + ">" }
+    end
+end
+
+#エスケープを回避するHTMLタグの設定とかその他
+
+class MDExtractor
+    def initialize(html)
+        @html = html.dup
+    end
+
+    def extractEntities
+        [
+            extractByHTMLTagName("h1"),
+            extractByHTMLTagName("h2"),
+            extractByHTMLTagName("h3"),
+            extractByHTMLTagName("h4"),
+            extractByHTMLTagName("h5"),
+            extractByHTMLTagName("h6"),
+            extractByHTMLTagName("em"),
+            extractByHTMLTagName("sup"),
+            extractByHTMLTagName("sub"),
+            extractByHTMLTagName("small"),
+            extractByHTMLTagName("u"),
+            extractByHTMLTagName("strong"),
+            extractByHTMLTagName("ul", false, false, "li"),
+            extractByHTMLTagName("ol", false, false, "li"),
+            extractByHTMLTagName("code"),
+            extractByHTMLTagName("blockquote", false),
+            extractByHTMLTagName("hr", false, true),
+            extractByHTMLTagName("br", false, true),
+            extractByHTMLTagName("a"),
+            extractByHTMLTagName("img", false, true),
+            extractByHTMLTagName("s"),
+            extractByHTMLTagName("span")
+        ].flatten.compact
+    end
+
+    def extractByHTMLTagName(tagName, isNoNest = true, isSingle = false, itemTagName = nil)
+        entities = []
+
+        @html.to_s.scan(htmlTagPatternByCond(tagName, isNoNest, isSingle, itemTagName)) do
+            match = $~
+
+            beginPos = match.char_begin(0)
+            endPos = match.char_end(0)
+            #puts "MDExtractor extracted with:\n" + @html + "\nbeginPos: " + beginPos.to_s + ", endPos: " + endPos.to_s + ", length: " + @html.length.to_s
+
+            entity = {
+                :markdown => true,
+                :indices => [beginPos, endPos]
+            }
+
+            entities.push(entity)
+        end
+
+        entities
+    end
+
+    def htmlTagPatternByCond(tagName, isNoNest, isSingle, itemTagName)
+        if isSingle
+            htmlTagPatternSingle(tagName)
+        elsif isNoNest
+            htmlTagPatternNoNest(tagName)
+        elsif itemTagName && itemTagName.length > 0
+            htmlTagPatternOuterMostWithItem(tagName, itemTagName)
+        else
+            htmlTagPatternOuterMost(tagName)
+        end
+    end
+
+    def htmlTagPattern(tagName)
+        Regexp.compile("<#{tagName} data-md=[^>]*>(?:[^<]|<#{tagName} data-md=[^>]*>|<\\/#{tagName}>)*(?:<\\/#{tagName}>)*")
+    end
+
+    def htmlTagPatternNoNest(tagName)
+        Regexp.compile("<#{tagName} data-md=[^>]*>(?:.|\n)*?<\\/#{tagName}>")
+    end
+
+    def htmlTagPatternSingle(tagName)
+        Regexp.compile("<#{tagName} data-md=[^>]*>")
+    end
+
+    # https://stackoverflow.com/questions/546433/regular-expression-to-match-outer-brackets
+    def htmlTagPatternOuterMost(tagName)
+        Regexp.compile("<#{tagName} data-md=[^>]*>(?:[^<>]|(\\g<0>))*<\/#{tagName}>")
+    end
+
+    def htmlTagPatternOuterMostWithItem(tagName, itemTagName)
+        Regexp.compile("<#{tagName} data-md=[^>]*>(?:[^<>]|<#{itemTagName} data-md=[^>]*>|<\\/#{itemTagName}>|(\\g<0>))*<\/#{tagName}>")
+    end
+end
diff --git a/app/validators/status_length_validator.rb b/app/validators/status_length_validator.rb
index 93bae2fa8..3cae672ae 100644
--- a/app/validators/status_length_validator.rb
+++ b/app/validators/status_length_validator.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class StatusLengthValidator < ActiveModel::Validator
-  MAX_CHARS = 500
+  MAX_CHARS = 2048
 
   def validate(status)
     return unless status.local? && !status.reblog?
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 2cae0a3e3..ecc3c9e32 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1258,6 +1258,16 @@ en:
     contrast: Mastodon (High contrast)
     default: Mastodon (Dark)
     mastodon-light: Mastodon (Light)
+    mastodon-auto: Mastodon (Auto)
+    # additional theme
+    material-black: Material (Black)
+    material-dark: Material (Dark)
+    material-light: Material (Light)
+    material-auto: Material (Auto)
+    mastodon-material-dark: Mastodon Material (Dark)
+    mastodon-material-light: Mastodon Material (Light)
+    mastodon-material-auto: Mastodon Material (Auto)
+    plus: Plus
   time:
     formats:
       default: "%b %d, %Y, %H:%M"
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index fb6255546..fc5d13698 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -1237,6 +1237,16 @@ ja:
     contrast: Mastodon (ハイコントラスト)
     default: Mastodon (ダーク)
     mastodon-light: Mastodon (ライト)
+    mastodon-auto: Mastodon (自動)
+    # 追加テーマ
+    material-black: Material (黒)
+    material-dark: Material (ダーク)
+    material-light: Material (ライト)
+    material-auto: Material (自動)
+    mastodon-material-dark: Mastodon Material (ダーク)
+    mastodon-material-light: Mastodon Material (ライト)
+    mastodon-material-auto: Mastodon Material (自動)
+    plus: Plus
   time:
     formats:
       default: "%Y年%m月%d日 %H:%M"
diff --git a/config/settings.yml b/config/settings.yml
index 002473643..fc22c2813 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -29,7 +29,7 @@ defaults: &defaults
   show_application: true
   system_font_ui: false
   noindex: false
-  theme: 'default'
+  theme: 'mastodon-auto'
   aggregate_reblogs: true
   advanced_layout: false
   use_blurhash: true
diff --git a/config/themes.yml b/config/themes.yml
index 9c21c9459..ff3d800aa 100644
--- a/config/themes.yml
+++ b/config/themes.yml
@@ -1,3 +1,14 @@
 default: styles/application.scss
 contrast: styles/contrast.scss
 mastodon-light: styles/mastodon-light.scss
+mastodon-auto: styles/mastodon-auto.scss
+
+# 追加テーマ
+material-black: styles/material-black.scss
+material-dark: styles/material-dark.scss
+material-light: styles/material-light.scss
+material-auto: styles/material-auto.scss
+mastodon-material-dark: styles/mastodon-material-dark.scss
+mastodon-material-light: styles/mastodon-material-light.scss
+mastodon-material-auto: styles/mastodon-material-auto.scss
+plus: styles/plus.scss
diff --git a/public/avatars/original/missing.png b/public/avatars/original/missing.png
index 34c8e45e6..fb27b84df 100644
Binary files a/public/avatars/original/missing.png and b/public/avatars/original/missing.png differ
diff --git a/yarn.lock b/yarn.lock
index d8685a509..be8821fcd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -44,6 +44,7 @@
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.5.tgz#1b903554bc8c583ee8d25f1e8969732e6b829a69"
   integrity sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==
+
   dependencies:
     "@babel/types" "^7.10.5"
     jsesc "^2.5.1"
@@ -3431,6 +3432,11 @@ csstype@^2.5.7, csstype@^2.6.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
 
+csstype@^2.6.7:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
+  integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -4571,6 +4577,7 @@ file-loader@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
   integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+
   dependencies:
     loader-utils "^2.0.0"
     schema-utils "^2.6.5"
@@ -5982,6 +5989,24 @@ istanbul-lib-coverage@^3.0.0:
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
   integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
 
+istanbul-lib-coverage@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
+  integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
+
+istanbul-lib-instrument@^3.0.0, istanbul-lib-instrument@^3.0.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
+  integrity sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==
+  dependencies:
+    "@babel/generator" "^7.4.0"
+    "@babel/parser" "^7.4.3"
+    "@babel/template" "^7.4.0"
+    "@babel/traverse" "^7.4.3"
+    "@babel/types" "^7.4.0"
+    istanbul-lib-coverage "^2.0.5"
+    semver "^6.0.0"
+
 istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
@@ -5992,6 +6017,19 @@ istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
     istanbul-lib-coverage "^3.0.0"
     semver "^6.3.0"
 
+istanbul-lib-instrument@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.1.tgz#61f13ac2c96cfefb076fe7131156cc05907874e6"
+  integrity sha512-imIchxnodll7pvQBYOqUu88EufLCU56LMeFPZZM/fJZ1irYcYdqroaV+ACK1Ila8ls09iEYArp+nqyC6lW1Vfg==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@babel/parser" "^7.7.5"
+    "@babel/template" "^7.7.4"
+    "@babel/traverse" "^7.7.4"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    semver "^6.3.0"
+
 istanbul-lib-report@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
@@ -7009,6 +7047,11 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
+  
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
@@ -7869,6 +7912,11 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
+picomatch@^2.0.5:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
+  integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -9027,6 +9075,14 @@ regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
 regexpp@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
@@ -10601,6 +10657,11 @@ unicode-match-property-value-ecmascript@^1.2.0:
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
   integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
 
+unicode-match-property-value-ecmascript@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
+  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
+
 unicode-property-aliases-ecmascript@^1.0.4:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"