From ea969000a5ffba0a0196b88c87e6e49b12ab6bfb Mon Sep 17 00:00:00 2001 From: Sylvhem Date: Mon, 21 May 2018 13:40:31 +0200 Subject: [PATCH] Add a light theme (#7027) * Add a light theme to Mastodon This add a second default theme to Mastodon. This new theme is supposed to be a light version of the dark original one. * Update locales Update the English and French locales. * Change capitalization of hexadecimal triplets Change capitalization of hexadecimal color codes to match Code Climate's recomandation. * Add variable Add a new variable to use instead of hardcoding a color. Change made to match Code Climate's recomandation. * Use Mastodon branding palette Replace the colors previously used by the ones found in Mastodon branding palette. The resulting theme is lighter than the previous version. * Make the overlay background white Make the overly background used on on sensitive medias white instead of black * Change the color used on the envelop icon Change the color used on the envelop icon for a darker one. The same color is now used on both the envelop icon and the padlock icon. * Add contrast Add contrast to various places inside the main interface and the profile pages. * Change the text color used in the compose form Change the text color used in the compose form for a darker one. * Make the code easier to read Add some blank lines to make the code easier to parse for a human eye. * Change columns' background default colors Change columns' background default colors, making the composition column the darker one. * Change the color of the log in button Change the log in button's text color to make it more readable. * Fix the color of the boost buttons on the landing page The disabled boost buttons on the landing page are now of the same color that the other disabled buttons. * Change the colors used in the dropdown menu Make the dropdown menu light instead of dark. --- app/javascript/styles/mastodon-light.scss | 227 ++++++++++++++++++++++ config/locales/en.yml | 1 + config/locales/fr.yml | 1 + config/themes.yml | 1 + 4 files changed, 230 insertions(+) create mode 100644 app/javascript/styles/mastodon-light.scss diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss new file mode 100644 index 0000000000..ce9452ff13 --- /dev/null +++ b/app/javascript/styles/mastodon-light.scss @@ -0,0 +1,227 @@ +// Set variables +$ui-base-color: #d9e1e8; +$ui-base-lighter-color: darken($ui-base-color, 57%); +$ui-highlight-color: #2b90d9; +$ui-primary-color: darken($ui-highlight-color, 28%); +$ui-secondary-color: #282c37; + +$primary-text-color: black; +$base-overlay-background: $ui-base-color; + +$login-button-color: white; +$account-background-color: white; + +// Import defaults +@import 'application'; + +// Change the color of the log in button +.button { + &.button-alternative-2 { + color: $login-button-color; + } +} + +// Change columns' default background colors +.column { + > .scrollable { + background: lighten($ui-base-color, 13%); + } +} + +.drawer__inner { + background: $ui-base-color; +} + +.drawer__inner__mastodon { + background: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; +} + +// Change the default appearance of the content warning button +.status__content, +.reply-indicator__content { + + .status__content__spoiler-link { + + background: darken($ui-base-color, 30%); + + &:hover { + background: darken($ui-base-color, 35%); + text-decoration: none; + } + + } + +} + +// Change the default appearance of the action buttons +.icon-button { + + &:hover, + &:active, + &:focus { + color: darken($ui-base-color, 40%); + transition: color 200ms ease-out; + } + + &.disabled { + color: darken($ui-base-color, 30%); + } + +} + +.status { + &.status-direct { + .icon-button.disabled { + color: darken($ui-base-color, 30%); + } + } +} + +button.icon-button i.fa-retweet { + &:hover { + background-image: url("data:image/svg+xml;utf8,"); + } +} + +button.icon-button.disabled i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); +} + +// Change the colors used in the dropdown menu +.dropdown-menu { + background: $ui-base-color; +} + +.dropdown-menu__arrow { + + &.left { + border-left-color: $ui-base-color; + } + + &.top { + border-top-color: $ui-base-color; + } + + &.bottom { + border-bottom-color: $ui-base-color; + } + + &.right { + border-right-color: $ui-base-color; + } + +} + +.dropdown-menu__item { + a { + background: $ui-base-color; + color: $ui-secondary-color; + } +} + +// Change the default color of several parts of the compose form +.compose-form { + + .compose-form__warning { + color: lighten($ui-secondary-color, 65%); + } + + strong { + color: lighten($ui-secondary-color, 65%); + } + + .autosuggest-textarea__textarea, + .spoiler-input__input { + + color: darken($ui-base-color, 80%); + + &::placeholder { + color: darken($ui-base-color, 70%); + } + + } + + .compose-form__buttons-wrapper { + background: darken($ui-base-color, 10%); + } + + .privacy-dropdown__option { + color: $ui-primary-color; + } + + .privacy-dropdown__option__content { + + strong { + color: $ui-primary-color; + } + + } + +} + +// Change the default color used for the text in an empty column or on the error column +.empty-column-indicator, +.error-column { + color: darken($ui-base-color, 60%); +} + +// Change the default colors used on some parts of the profile pages +.activity-stream-tabs { + + background: $account-background-color; + + a { + &.active { + color: $ui-primary-color; + } + } + +} + +.activity-stream { + + .entry { + background: $account-background-color; + } + + .status.light { + + .status__content { + color: $primary-text-color; + } + + .display-name { + strong { + color: $primary-text-color; + } + } + + } + +} + +.accounts-grid { + .account-grid-card { + + .controls { + .icon-button { + color: $ui-secondary-color; + } + } + + .name { + a { + color: $primary-text-color; + } + } + + .username { + color: $ui-secondary-color; + } + + .account__header__content { + color: $primary-text-color; + } + + } +} diff --git a/config/locales/en.yml b/config/locales/en.yml index b9429dbee5..65b5b1e0b0 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -777,6 +777,7 @@ en: themes: contrast: High contrast default: Mastodon + mastodon-light: Mastodon (light) time: formats: default: "%b %d, %Y, %H:%M" diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 753fd6bd78..cd323b602d 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -700,6 +700,7 @@ fr: themes: contrast: Contraste élevé default: Mastodon + mastodon-light: Mastodon (clair) time: formats: default: "%d %b %Y, %H:%M" diff --git a/config/themes.yml b/config/themes.yml index f0bb1e6f72..9c21c9459f 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -1,2 +1,3 @@ default: styles/application.scss contrast: styles/contrast.scss +mastodon-light: styles/mastodon-light.scss