diff --git a/app/javascript/styles/fairy-floss.scss b/app/javascript/styles/fairy-floss.scss
new file mode 100644
index 000000000..6b26aeed5
--- /dev/null
+++ b/app/javascript/styles/fairy-floss.scss
@@ -0,0 +1,3 @@
+@import 'fairy-floss/variables';
+@import 'application';
+@import 'fairy-floss/diff'
diff --git a/app/javascript/styles/fairy-floss/diff.scss b/app/javascript/styles/fairy-floss/diff.scss
new file mode 100644
index 000000000..2eb4d4edf
--- /dev/null
+++ b/app/javascript/styles/fairy-floss/diff.scss
@@ -0,0 +1,519 @@
+// components.scss
+.compose-form {
+ .compose-form__modifiers {
+ .compose-form__upload {
+ &-description {
+ input {
+ &::placeholder {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+}
+
+.rich-formatting a,
+.rich-formatting p a,
+.rich-formatting li a,
+.landing-page__short-description p a,
+.status__content a,
+.reply-indicator__content a {
+ color: lighten($ui-highlight-color, 12%);
+ text-decoration: underline;
+
+ &.mention {
+ text-decoration: none;
+ }
+
+ &.mention span {
+ text-decoration: underline;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+
+ &.status__content__spoiler-link {
+ color: $secondary-text-color;
+ text-decoration: none;
+ }
+}
+
+.status__content__read-more-button {
+ text-decoration: underline;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+}
+
+.getting-started__footer a {
+ text-decoration: underline;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+}
+
+.nothing-here {
+ color: $darker-text-color;
+}
+
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
+ border-bottom: 4px solid $ui-highlight-color;
+}
+
+
+// FAIRY FLOSS CHANGES
+
+html {
+ scrollbar-color: $purple3 rgba($purple3, 0.25);
+}
+
+::-webkit-scrollbar-thumb {
+ background: $purplescrollbar;
+ border: 0 #f8f8f2;
+ border-radius: 50px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: $purplescrollbar;
+ border: 0;
+}
+
+::-webkit-scrollbar-track:hover {
+ background: darken($purple2, 6%);
+}
+
+.loading-bar
+ {
+ background-color: $mint;
+ }
+
+// text
+.status__display-name, .column-header, .column-link, .navigation-bar strong {
+ color: $purple4;
+}
+
+.ui,
+.notification__filter-bar button, .account__section-headline button, body, body.admin {
+ background: $purple1;
+}
+
+.drawer__header {
+ background: $purple3;
+
+ a {
+ &:hover, &:focus {
+ background: darken($purple3, 8%);
+ }
+ }
+}
+
+.search__input {
+ &:hover, &:focus {
+ background: $purple2;
+ color: $purple4;
+ }
+ background: $purple2;
+ color: $purple4;
+}
+
+::placeholder {
+ color: $purple4;
+}
+
+.search-popout, .search-popout h4 {
+ color: $purple1;
+ background-color: $purple4;
+}
+
+.drawer__inner, .drawer__inner__mastodon {
+ background: $purple3;
+}
+
+.compose-form .compose-form__buttons-wrapper {
+ background: lighten($purple4, 8%);
+}
+
+.text-icon-button.active {
+ color: darken($pink, 12%);
+}
+
+
+.column-header, .column-header__button, .column-header__back-button {
+ background: $purple5;
+}
+
+.notification__filter-bar button.active::after, .notification__filter-bar a.active::after, .account__section-headline button.active::after, .account__section-headline a.active::after {
+ border-color: transparent transparent $purple2;
+}
+
+.column>.scrollable {
+ background: $purple2;
+}
+
+.load-more:hover {
+ background: darken($purple2, 4%);
+}
+
+.empty-column-indicator, .error-column {
+ background: $purple2;
+}
+
+.column-link__badge, .column-subheading {
+ background: $purple2;
+}
+
+.column-link {
+ background: $purple3;
+}
+
+// link previews
+
+.status-card.compact {
+ border-color: darken($purple5, 8%);
+ background: $purple5;
+}
+
+.status-card__image {
+ background: $purple3;
+}
+
+.status-card__content {
+ background: $purple5;
+
+ &:hover, &:focus {
+ background: darken($purple5, 4%);
+ }
+}
+
+.notification__filter-bar button.active, .notification__filter-bar a.active, .account__section-headline button.active, .account__section-headline a.active, .column-header>.column-header__back-button {
+ color: $mint;
+}
+
+.react-toggle--checked .react-toggle-track, .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+ background: $pink;
+}
+
+.react-toggle-track, .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+ background: $purple2;
+}
+
+.column-header__collapsible-inner, .column-header__button.active, .column-header__button.active:hover, .column-header__button.active:focus {
+ background: $purple3;
+ color: $purpleicon;
+}
+
+.column-inline-form, .column-back-button {
+ background: $purplescrollbar;
+}
+
+.flex-spacer, .getting-started, .getting-started__wrapper {
+ background: $purple2;
+}
+
+.status {
+ border-bottom: 1px solid lighten($purple2, 8%);
+}
+
+.detailed-status, .detailed-status__action-bar {
+ background: $purplescrollbar;
+}
+
+.detailed-status__action-bar {
+ border-top: 1px solid lighten($purple3, 8%);
+ border-bottom: 1px solid lighten($purple3, 8%);
+}
+
+.focusable:focus {
+ background: $purplescrollbar;
+}
+
+.focusable {
+ &:focus {
+ outline: 0;
+ background: $purplescrollbar;
+
+ .detailed-status,
+ .detailed-status__action-bar {
+ background: lighten($purplescrollbar, 2%);
+ }
+ }
+}
+
+.icon-button.active {
+ color: $pink;
+}
+
+button.icon-button i.fa-retweet {
+ background-image: url("data:image/svg+xml;utf8,");
+}
+button.icon-button i.fa-retweet:hover {
+ background-image: url("data:image/svg+xml;utf8,");
+}
+
+.notification__favourite-icon-wrapper .star-icon, .star-icon.active, a.mention.hashtag {
+ color: $lemon;
+}
+
+.reply-indicator__content a, .status__content a {
+ color: $mint;
+}
+
+a.mention, .notification__message .fa {
+ color: $pink;
+}
+
+.poll__link {
+ color: $purple4;
+}
+
+.poll__chart {
+ color: lighten($coral, 4%);
+}
+
+.poll__chart.leading {
+ color: $coral;
+}
+
+.emoji-mart-bar:first-child {
+ background: $purple4;
+}
+
+.emoji-mart-anchor-selected {
+ color: $purple2;
+ &:hover, &:focus {
+ color: $purple1;
+ }
+}
+
+.emoji-mart-anchor-bar {
+ background: $purple1;
+}
+
+// profile in deck view
+
+.account__header__bar {
+ background: $purple5;
+}
+
+.account__header__image {
+ background: $purple1;
+}
+
+.notification__filter-bar, .account__section-headline {
+ background: $purple1;
+}
+
+.dropdown-menu, .dropdown-menu__item a {
+ background: $purple4;
+}
+
+.dropdown-menu__item a {
+ &:hover, &:focus {
+ background: $purple2;
+ }
+}
+
+.dropdown-menu__separator {
+ border-bottom: 1px solid darken($purple4, 4%);
+}
+
+.button.logo-button.button--destructive:active, .button.logo-button.button--destructive:focus, .button.logo-button.button--destructive:hover {
+ background: $pink;
+}
+
+// public profiles
+
+.public-layout .header {
+ background: $purple3;
+}
+
+.public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover {
+ background: darken($purple3, 4%);
+}
+
+.public-layout .public-account-header__bar .avatar img {
+ background: $purple2;
+ border: 4px solid $purple2;
+}
+
+.public-layout .header .nav-button {
+ background: darken($purple3, 4%);
+ &:hover, &:focus {
+ background: darken($purple3, 8%);
+ }
+}
+
+.public-layout .public-account-header__bar:before {
+ background: $purplescrollbar;
+}
+
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
+ border-bottom: 4px solid $lemon;
+}
+
+.public-layout .public-account-bio {
+ background: $purple3;
+}
+
+.hero-widget__text {
+ background: $purple2;
+}
+
+.activity-stream .entry {
+ background: $purple2;
+}
+
+.simple_form .hint a {
+ color: $mint;
+}
+
+.oauth-prompt strong, .follow-prompt strong {
+ color: $purple4;
+}
+
+.simple_form input[type=text]:active, .simple_form input[type=text]:focus, .simple_form input[type=number]:active, .simple_form input[type=number]:focus, .simple_form input[type=email]:active, .simple_form input[type=email]:focus, .simple_form input[type=password]:active, .simple_form input[type=password]:focus, .simple_form textarea:active, .simple_form textarea:focus {
+ border-color: $mint;
+}
+
+.nothing-here {
+ background: $purple2;
+}
+
+
+// admin zone
+
+.admin-wrapper .content h2 {
+ color: $purple4;
+}
+
+.admin-wrapper .sidebar-wrapper {
+ background: $purple2;
+}
+
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
+ background: $purpleborder;
+ &:hover, &:focus {
+ background: lighten($purpleborder, 8%);
+ }
+}
+
+.admin-wrapper .sidebar ul ul {
+ background: $purple1;
+}
+
+.admin-wrapper .sidebar ul a:hover, .admin-wrapper .sidebar ul a:focus {
+ background: $purpleborder;
+}
+
+.admin-wrapper .content .muted-hint a {
+ color: $mint;
+}
+
+.card__bar {
+ background: $purplescrollbar;
+}
+
+.simple_form input[type=text], .simple_form input[type=number], .simple_form input[type=email], .simple_form input[type=password], .simple_form textarea {
+ background: darken($purple1, 6%);
+}
+
+.simple_form select {
+ background: darken($purple1, 6%) url("data:image/svg+xml;utf8,") no-repeat right 8px center/auto 16px
+}
+
+.table th, .table td {
+ background: darken($purple2, 6%);
+}
+
+.table > thead > tr > th {
+ color: $lemon;
+}
+
+.table > tbody > tr:nth-child(odd) > td, .table > tbody > tr:nth-child(odd) > th {
+ background: $purple3;
+}
+
+// directory
+
+.accounts-table tbody td {
+ background: $purple3;
+}
+
+.page-header {
+ background: $purpleborder;
+
+ h1 {
+ color: $purple4;
+ }
+}
+
+.box-widget, .contact-widget, .landing-page__information.contact-widget {
+ background: $purple2;
+}
+
+.notice-widget a {
+ color: $mint;
+}
+
+.directory__tag a {
+ background: $purple2;
+ &:hover, &:focus {
+ background: lighten($purple2, 4%);
+ }
+}
+
+// about/more
+
+.landing-page__call-to-action {
+ background: $purple3;
+}
+
+.rich-formatting h3, .rich-formatting h4, .rich-formatting h2, .rich-formatting h1 {
+ color: lighten($purpleicon, 8%);
+}
+
+.landing-page__information strong {
+ color: lighten($purpleicon, 10%);
+}
+
+// about
+
+.simple_form .input.boolean label a {
+ color: $mint;
+}
+
+::-webkit-input-placeholder { /* Edge */
+ color: $purpleicon;
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+ color: $purpleicon;
+}
+
+::placeholder {
+ color: $purpleicon;
+}
+
+.landing .hero-widget__footer {
+ background: $purple3;
+}
+
+.status.status-direct:not(.read), .account {
+ border-bottom: 1px solid lighten($purple2, 8%);
+}
diff --git a/app/javascript/styles/fairy-floss/variables.scss b/app/javascript/styles/fairy-floss/variables.scss
new file mode 100644
index 000000000..6a714f3ff
--- /dev/null
+++ b/app/javascript/styles/fairy-floss/variables.scss
@@ -0,0 +1,70 @@
+// FAIRY FLOSS VARIABLES
+
+// Purples
+$purple1: #2e2b3b;
+$purple2: #504b68;
+$purple3: #5f5676;
+$purple4: #c8c4d4;
+$purple5: #474059;
+$purpleicon: #ada6bf;
+$purpleborder: #5f5676;
+$purplescrollbar: #5a5475;
+$mint: #c2ffdf;
+$pink: #ffb8d1;
+$lemon: #fff683;
+$coral: #ff857f;
+
+// 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
+
+// Values from the classic Mastodon UI
+$classic-base-color: $purple1; // Midnight Express
+$classic-primary-color: $purple4; // Echo Blue
+$classic-secondary-color: #d9e1e8; // Pattens Blue
+$classic-highlight-color: #ff857f; // 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: $purpleicon !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $purpleicon !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;
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 8bda718a2..cabc9100c 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1018,6 +1018,7 @@ en:
default: Mastodon (Dark)
mastodon-light: Mastodon (Light)
macaron: Macaron (Pastel light)
+ fairy-floss: Fairy Floss (Pastel dark)
time:
formats:
default: "%b %d, %Y, %H:%M"
diff --git a/config/themes.yml b/config/themes.yml
index 79aabe4a6..620bc7f99 100644
--- a/config/themes.yml
+++ b/config/themes.yml
@@ -2,3 +2,4 @@ default: styles/application.scss
contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss
macaron: styles/macaron.scss
+fairy-floss: styles/fairy-floss.scss