Add modern theme

app/javascript/styles/modern-dark.scss

@@ -0,0 +1,8 @@
+@import 'modern/dark';
+@import 'application';
+@import 'modern/style';
+
+.layout-multiple-columns .column {
+	flex-grow: 1;
+	max-width: 500px;
+}

app/javascript/styles/modern-light.scss

@@ -0,0 +1,9 @@
+@import 'modern/light';
+@import 'application';
+@import 'modern/style';
+@import 'mastodon-light/diff';
+
+.layout-multiple-columns .column {
+	flex-grow: 1;
+	max-width: 500px;
+}

app/javascript/styles/modern/dark.scss

@@ -0,0 +1,56 @@
+// Commonly used web colors
+$black: #000000;            // Black
+$white: #ffffff;            // White
+$success-green: #79bd9a !default;    // Padua
+$error-red: #df405a !default;        // Cerise
+$warning-red: #ff5050 !default;      // Sunset Orange
+$gold-star: #ca8f04 !default;        // Dark Goldenrod
+
+$red-bookmark: $warning-red;
+
+// Values from the classic Mastodon UI
+$classic-base-color: #282c37;         // Midnight Express
+$classic-primary-color: #9baec8;      // Echo Blue
+$classic-secondary-color: #d9e1e8;    // Pattens Blue
+$classic-highlight-color: #e7b01c;    // Summer Sky
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default;            // Lighter
+$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 415px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;

app/javascript/styles/modern/light.scss

@@ -0,0 +1,41 @@
+// Dependent colors
+$black: #000000;
+$white: #ffffff;
+
+$classic-base-color: #282c37;
+$classic-primary-color: #9baec8;
+$classic-secondary-color: #d9e1e8;
+$classic-highlight-color: #e7b01c;
+
+// Differences
+$success-green: lighten(#3c754d, 8%);
+
+$base-overlay-background: $white !default;
+$valid-value-color: $success-green !default;
+
+$ui-base-color: $classic-secondary-color !default;
+$ui-base-lighter-color: #b0c0cf;
+$ui-primary-color: #9bcbed;
+$ui-secondary-color: $classic-base-color !default;
+$ui-highlight-color: #e7b01c;
+
+$primary-text-color: $black !default;
+$darker-text-color: $classic-base-color !default;
+$dark-text-color: #444b5d;
+$action-button-color: #606984;
+
+$inverted-text-color: $black !default;
+$lighter-text-color: $classic-base-color !default;
+$light-text-color: #444b5d;
+
+//Newly added colors
+$account-background-color: $white !default;
+
+//Invert darkened and lightened colors
+@function darken($color, $amount) {
+  @return hsl(hue($color), saturation($color), lightness($color) + $amount);
+}
+
+@function lighten($color, $amount) {
+  @return hsl(hue($color), saturation($color), lightness($color) - $amount);
+}

config/locales/en.yml

@@ -1579,6 +1579,8 @@ en:
     missing-contrast: Mastodon-missing (High contrast)
     missing-light: Mastodon-missing (Light)
     mobile-small: Mobile Small / Mastodon (Dark)
+    modern-dark: Modern Dark
+    modern-light: Modern Light
   thread_mark:
     ancestor: Has reference
     both: Has reference and reply

config/locales/ja.yml

@@ -1482,6 +1482,8 @@ ja:
     missing-contrast: Mastodon-missing (ハイコントラスト)
     missing-light: Mastodon-missing (ライト)
     mobile-small: Mobile 小 / Mastodon (ダーク)
+    modern-dark: モダン（ダーク）
+    modern-light: モダン（ライト）
   thread_mark:
     ancestor: 参照あり
     both: 参照・返信あり

config/themes.yml

@@ -13,3 +13,5 @@ mastodon-material-v2-dark: styles/mastodon-material-v2-dark.scss
 mastodon-material-mastodon-light: styles/mastodon-material-mastodon-light.scss
 mastodon-material-mastodon-dark: styles/mastodon-material-mastodon-dark.scss
 mastodon-material-google-plus: styles/mastodon-material-google-plus.scss
+modern-dark: styles/modern-dark.scss
+modern-light: styles/modern-light.scss