diff --git a/app/javascript/skins/vanilla/mastodon-light/common.scss b/app/javascript/skins/vanilla/mastodon-light/common.scss
new file mode 100644
index 00000000000..e1a3ea2c6ef
--- /dev/null
+++ b/app/javascript/skins/vanilla/mastodon-light/common.scss
@@ -0,0 +1 @@
+@import 'styles/mastodon-light';
diff --git a/app/javascript/skins/vanilla/mastodon-light/names.yml b/app/javascript/skins/vanilla/mastodon-light/names.yml
new file mode 100644
index 00000000000..bb14ad2e0c5
--- /dev/null
+++ b/app/javascript/skins/vanilla/mastodon-light/names.yml
@@ -0,0 +1,4 @@
+en:
+ skins:
+ vanilla:
+ mastodon-light: Mastodon (light)
diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.scss
new file mode 100644
index 00000000000..6a22a78226c
--- /dev/null
+++ b/app/javascript/styles/mastodon-light.scss
@@ -0,0 +1,228 @@
+// 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;
+ }
+
+ }
+}
+