style: themes

app/javascript/styles/bird-ui-dark.scss

@@ -1,3 +1,4 @@
+@import 'mastodon/variables';
 @import 'application';
 @import 'bird-ui/layout-single-column.scss';
-@import 'bird-ui/layout-multiple-columns.scss';
+@import 'bird-ui/layout-multiple-columns.scss';

app/javascript/styles/bird-ui-light.scss

@@ -1,5 +1,5 @@
 @import 'mastodon-light/variables';
-@import 'application';
 @import 'mastodon-light/diff';
+@import 'application';
 @import 'bird-ui/layout-single-column.scss';
-@import 'bird-ui/layout-multiple-columns.scss';
+@import 'bird-ui/layout-multiple-columns.scss';

app/javascript/styles/bird-ui/layout-multiple-columns.scss

@@ -3,6 +3,13 @@
 
 /* CSS variables */
 :root {
+
+  --bg-image : url('../images/theme/bg_dark.png');
+  --logo: url('../images/theme/wordmark_dark.png');
+  --m-logo: url('../images/theme/m_logo_dark.png');
+  --color-column: rgba(0, 0, 0, 0.4);
+  --color-columns: #1e202850;
+
   /* Brand colors */
   --color-brand-twitter: #1d9bf0;
   --color-brand-twitter-bg: #15202b;
@@ -10,8 +17,8 @@
   --color-brand-twitter-mud: #273340;
   --color-brand-twitter-dark: #232543;
   --color-brand-twitter-threaded-line: #425364;
-  --color-brand-mastodon: #595aff;
+  --color-brand-mastodon: #27a4b8;
-  --color-brand-mastodon-links: #8c8dff;
+  --color-brand-mastodon-links: #81c5cf;
   --color-brand-mastodon-bg: #1e2028;
   --color-brand-mastodon-dim: #717c9b;
   --color-brand-mastodon-mud: #272c40;
@@ -27,9 +34,11 @@
   --color-fg: #fff;
   --color-border: #38384d;
   --color-dim: var(--color-brand-mastodon-dim);
-  --color-accent: var(--color-brand-mastodon-links);
+
-  --color-accent-dark: var(--color-brand-mastodon);
+  --color-accent:  #81c5cf;
-  --color-accent-dark-50: #595aff80;
+  --color-accent-dark: #27a4b8;
+  --color-accent-dark-50: #27a4b880;
+
   --color-green: #00ba7c;
   --color-red: #f91880;
   --color-red-75: #f91880bf;
@@ -62,6 +71,9 @@
   /* In the original UI this color is lighten($ui-base-color, 12%) */
   --color-outer-space: #42485a;
 
+  /* In the original UI this color is lighten($ui-base-color, 12%) */
+  --color-outer-space: #42485a;
+
   /* Font related */
   --font-size: 15px;
   --font-size-smaller: 13px;

app/javascript/styles/bird-ui/layout-single-column.scss

@@ -4,14 +4,21 @@
 /* CSS variables */
 :root {
   /* Brand colors */
+  --bg-image: url('../images/theme/bg_dark.png');
+  --logo: url('../images/theme/wordmark_dark.png');
+  --m-logo: url('../images/theme/m_logo_dark.png');
+  --color-column: rgba(0, 0, 0, 0.4);
+
   --color-brand-twitter: #1d9bf0;
   --color-brand-twitter-bg: #15202b;
   --color-brand-twitter-dim: #8b98a5;
   --color-brand-twitter-mud: #273340;
   --color-brand-twitter-dark: #232543;
   --color-brand-twitter-threaded-line: #425364;
-  --color-brand-mastodon: #6364ff;
+
-  --color-brand-mastodon-links: #858afa;
+  --color-brand-mastodon: #27a4b8;
+  --color-brand-mastodon-links: #81c5cf;
+
   --color-brand-mastodon-bg: #1e2028;
   --color-brand-mastodon-dim: #717c9b;
   --color-brand-mastodon-mud: rgb(39 44 64 / .5);
@@ -19,6 +26,8 @@
   --color-brand-mastodon-threaded-line: #434264;
   --color-brand-mastodon-text-light: #8493a7;
 
+
+
   /* Colors */
   /* Note: Remember to search for the DIM hex
      and replace it inside the SVG icons if you decide to change it */
@@ -27,9 +36,11 @@
   --color-fg: #fff;
   --color-border: #38384d;
   --color-dim: var(--color-brand-mastodon-dim);
-  --color-accent: var(--color-brand-mastodon-links);
+
-  --color-accent-dark: var(--color-brand-mastodon);
+  --color-accent:  #81c5cf;
-  --color-accent-dark-50: #595aff80;
+  --color-accent-dark: #27a4b8;
+  --color-accent-dark-50: #27a4b880;
+
   --color-green: #00ba7c;
   --color-red: #f91880;
   --color-red-75: #f91880bf;

app/javascript/styles/modern-contrast.scss

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

app/javascript/styles/modern-dark.scss

@@ -0,0 +1,8 @@
+@import 'mastodon/variables';
+@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 'mastodon-light/variables';
+@import 'application';
+@import 'modern/style';
+@import 'mastodon-light/diff';
+
+.layout-multiple-columns .column {
+	flex-grow: 1;
+	max-width: 500px;
+}

config/locales/ko.yml

@@ -1743,6 +1743,9 @@ ko:
     mastodon-dark: 마스토돈 (어두움)
     bird-ui-light: 파란새풍 테마 (밝음)
     bird-ui-dark: 파란새풍 테마 (어두움)
+    modern-light: 모던 테마 (밝음)
+    modern-dark: 모던 테마 (어두움)
+    modern-contrast: 모던 테마 (고대비)
     system: 자동 선택 (시스템 테마 이용)
   time:
     formats:

config/themes.yml

@@ -5,4 +5,7 @@ bird-ui-light: styles/bird-ui-light.scss
 bird-ui-dark: styles/bird-ui-dark.scss
 mastodon-light: styles/mastodon-light.scss
 mastodon-dark: styles/application.scss
-contrast: styles/contrast.scss
+contrast: styles/contrast.scss
+modern-dark: styles/modern-dark.scss
+modern-light: styles/modern-light.scss
+modern-contrast: styles/modern-contrast.scss