Skip to content

Commit

Permalink
feat: restore the classic blue theme
Browse files Browse the repository at this point in the history
  • Loading branch information
mashirozx committed Jul 6, 2022
1 parent 5f28795 commit 7f1e698
Show file tree
Hide file tree
Showing 5 changed files with 131 additions and 6 deletions.
59 changes: 59 additions & 0 deletions app/javascript/styles/dark-blue.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// 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: #2b90d9; // 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;

@import 'application';
@import 'contrast/diff';
59 changes: 59 additions & 0 deletions app/javascript/styles/light-blue.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// 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: #2b90d9; // 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;

@import 'application';
@import 'contrast/diff';
6 changes: 4 additions & 2 deletions config/locales/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -1665,8 +1665,9 @@ en:
title: "%{instance} Terms of Service and Privacy Policy"
themes:
bilibili-light: Bilibili
contrast: Mastodon (Dark-Blue)
contrast: Mastodon (High contrast)
cybre-light: Cybre Light
dark-blue: Mastodon (Dark-Blue)
dark-cyan: Mastodon (Dark-Cyan)
dark-green: Mastodon (Dark-Green)
dark-orange: Mastodon (Dark-Orange)
Expand All @@ -1676,6 +1677,7 @@ en:
dark-yellow: Mastodon (Dark-Yellow)
default: Mastodon (Default)
forest: Forest
light-blue: Mastodon (Light-Blue)
light-cyan: Mastodon (Light-Cyan)
light-green: Mastodon (Light-Green)
light-orange: Mastodon (Light-Orange)
Expand All @@ -1684,7 +1686,7 @@ en:
light-red: Mastodon (Light-Red)
light-yellow: Mastodon (Light-Yellow)
luxury: Luxury
mastodon-light: Mastodon (Light-Blue)
mastodon-light: Mastodon (Light)
new-year: New Year
nga: NGA Style
sakura: Sakura
Expand Down
8 changes: 5 additions & 3 deletions config/locales/zh-CN.yml
Original file line number Diff line number Diff line change
Expand Up @@ -1607,17 +1607,19 @@ zh-CN:
title: "%{instance} 使用条款和隐私权政策"
themes:
bilibili-light: 哔哩哔哩(゜-゜)つロ干杯~
contrast: Mastodon(深色主题-群青
contrast: Mastodon(高对比度
cybre-light: 老夫的少女心
dark-blue: Mastodon (深色主题-群青)
dark-cyan: Mastodon(深色主题-錆浅葱)
dark-green: Mastodon(深色主题-若竹)
dark-orange: Mastodon(深色主题-赤橙)
dark-pink: Mastodon(深色主题-桜色)
dark-purple: Mastodon(深色主题-桔梗)
dark-red: Mastodon(深色主题-红绯)
dark-yellow: Mastodon(深色主题-向日葵)
default: Mastodon(默认
default: Mastodon(暗色主题
forest: 小森林
light-blue: Mastodon (浅色主题-群青)
light-cyan: Mastodon(浅色主题-錆浅葱)
light-green: Mastodon(浅色主题-若竹)
light-orange: Mastodon(浅色主题-赤橙)
Expand All @@ -1626,7 +1628,7 @@ zh-CN:
light-red: Mastodon(浅色主题-红绯)
light-yellow: Mastodon(浅色主题-向日葵)
luxury: 奢华
mastodon-light: Mastodon(浅色主题-群青
mastodon-light: Mastodon(亮色主题
new-year: 新年
nga: NGA风格
sakura: 樱花
Expand Down
5 changes: 4 additions & 1 deletion config/themes.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
default: styles/application.scss
contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss
dark-blue: styles/dark-blue.scss
light-blue: styles/light-blue.scss
dark-purple: styles/dark-purple.scss
light-purple: styles/light-purple.scss
dark-red: styles/dark-red.scss
Expand All @@ -21,11 +23,11 @@ transparent-aurora: styles/transparent-aurora.scss
witches-town: styles/witches-town.scss
sleeping-town: styles/sleeping-town.scss
forest: styles/forest.scss
# strawberry: styles/strawberry.scss
new-year: styles/new-year.scss
nga: styles/nga.scss
RaRuRe: styles/rarure.scss
beebear: styles/beebear.scss
# deprecated
# hellowland: styles/hellowland.scss
##cybre-light: styles/cybre-light.scss
# sakura: styles/sakura.scss
Expand All @@ -41,3 +43,4 @@ beebear: styles/beebear.scss
# purple-haze: styles/purple-haze.scss
# geodude: styles/geodude.scss
# royal-tenenbaums: styles/royal-tenenbaums.scss
# strawberry: styles/strawberry.scss

0 comments on commit 7f1e698

Please sign in to comment.