diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss
new file mode 100644
index 000000000..ce9452ff1
--- /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 b9429dbee..65b5b1e0b 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 753fd6bd7..cd323b602 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 f0bb1e6f7..9c21c9459 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