diff --git a/app/javascript/styles/chinwag.scss b/app/javascript/styles/chinwag.scss
new file mode 100644
index 000000000..2184383a7
--- /dev/null
+++ b/app/javascript/styles/chinwag.scss
@@ -0,0 +1,24 @@
+@import 'mastodon/mixins';
+@import 'chinwag/variables';
+@import 'fonts/roboto';
+@import 'fonts/roboto-mono';
+@import 'fonts/montserrat';
+
+@import 'mastodon/reset';
+@import 'mastodon/basics';
+@import 'mastodon/containers';
+@import 'mastodon/lists';
+@import 'mastodon/footer';
+@import 'mastodon/compact_header';
+@import 'mastodon/landing_strip';
+@import 'mastodon/forms';
+@import 'mastodon/accounts';
+@import 'mastodon/stream_entries';
+@import 'mastodon/components';
+@import 'mastodon/emoji_picker';
+@import 'mastodon/about';
+@import 'mastodon/tables';
+@import 'mastodon/admin';
+@import 'mastodon/rtl';
+
+@import 'chinwag/overrides';
diff --git a/app/javascript/styles/chinwag/overrides.scss b/app/javascript/styles/chinwag/overrides.scss
new file mode 100644
index 000000000..10b378133
--- /dev/null
+++ b/app/javascript/styles/chinwag/overrides.scss
@@ -0,0 +1,152 @@
+@import 'variables';
+
+// Text-icons status buttons
+.status,
+.status.status-direct {
+ .icon-button {
+ color: $status-buttons-base-color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $status-buttons-active-color;
+ }
+
+ &.disabled {
+ color: $status-buttons-disabled-color;
+ }
+ }
+}
+
+.icon-button.overlayed {
+ background: rgba($white, .6);
+
+ &:hover {
+ background: rgba($white, .6);
+ }
+}
+
+// Boost button
+@function hex-color($color) {
+ @if type-of($color) == 'color' {
+ $color: str-slice(ie-hex-str($color), 4);
+ }
+ @return '%23' + unquote($color)
+}
+
+button.icon-button i.fa-retweet {
+ background-image: url("data:image/svg+xml;utf8,");
+
+ &:hover {
+ background-image: url("data:image/svg+xml;utf8,");
+ }
+}
+
+button.icon-button.disabled i.fa-retweet {
+ background-image: url("data:image/svg+xml;utf8,");
+
+ &:hover {
+ background-image: url("data:image/svg+xml;utf8,");
+ }
+}
+
+// Spoilers button
+.status__content,
+.reply-indicator__content, {
+ .status__content__spoiler-link {
+ background-color: lighten($classic-secondary-color, 10%);
+ color: $black;
+
+ &:focus,
+ &:hover,
+ &:active {
+ background-color: lighten($classic-highlight-color, 10%);
+ }
+
+ &:disabled {
+ background-color: rgba($classic-secondary-color, .4);
+ color: rgba($black, .4);
+ }
+ }
+}
+
+// Toot input
+.drawer__inner {
+ background: darken($classic-base-color, 15%) url('//static.chinwag.org/images/bar-sidebar.jpg') no-repeat bottom center / cover;
+
+ > .mastodon {
+ background: url('//static.chinwag.org/images/chinwag-logo-circle-m.png') no-repeat center bottom / contain;
+ flex: 1;
+ }
+}
+
+.compose-form .autosuggest-textarea__textarea,
+.compose-form .spoiler-input__input {
+ color: $black;
+}
+
+.compose-form__buttons {
+ background: rgba($white, 0.3);
+
+ .icon-button.inverted,
+ .text-icon-button {
+ color: $status-buttons-base-color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $status-buttons-active-color;
+ }
+
+ &.disabled {
+ color: $status-buttons-disabled-color;
+ }
+ }
+}
+
+.compose-form__warning {
+ background: $classic-base-color;
+}
+
+.reply-indicator {
+ background: $classic-base-color;
+ color: $black;
+
+ * {
+ color: inherit;
+ }
+}
+
+.privacy-dropdown__option,
+.privacy-dropdown__option__content strong {
+ color: $classic-primary-color;
+}
+
+.media-spoiler {
+ color: $classic-primary-color;
+ background: lighten($classic-base-color, 15%);
+
+ &:hover {
+ color: $classic-highlight-color;
+ }
+}
+
+.button {
+ background-color: lighten($classic-secondary-color, 10%);
+ color: $black;
+
+ &:focus,
+ &:hover,
+ &:active {
+ background-color: lighten($classic-highlight-color, 10%);
+ }
+
+ &:disabled {
+ background-color: rgba($classic-secondary-color, .4);
+ color: rgba($black, .4);
+ }
+}
+
+.upload-progress__tracker {
+ background: $classic-primary-color;
+}
diff --git a/app/javascript/styles/chinwag/variables.scss b/app/javascript/styles/chinwag/variables.scss
new file mode 100644
index 000000000..38fe54582
--- /dev/null
+++ b/app/javascript/styles/chinwag/variables.scss
@@ -0,0 +1,42 @@
+// Commonly used web colors
+$black: #000; // Black
+$white: #fff; // White
+$success-green: #79bd9a; // Padua
+$error-red: #df405a; // Cerise
+$warning-red: #ff5050; // Sunset Orange
+$gold-star: #ca8f04; // Dark Goldenrod
+
+// Values from the classic Mastodon UI
+$classic-base-color: #949494; //#282c37; // Midnight Express
+$classic-primary-color: #282c37; //9baec8; // Echo Blue
+$classic-secondary-color: #204c03; //d9e1e8; // Pattens Blue
+$classic-highlight-color: #397313; // 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;
+$primary-text-color: $black !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: darken($ui-base-color, 36%) !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; // Vibrant
+
+// Buttons colors
+$status-buttons-base-color: $ui-primary-color;
+$status-buttons-active-color: $classic-highlight-color;
+$status-buttons-disabled-color: rgba($status-buttons-base-color, .4);
+
+// Spoilers - Show More button
+$status-spoilers-background: $classic-primary-color;
+$status-spoilers-text: $white;
+$status-spoilers-active-background: $classic-highlight-color;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
diff --git a/app/javascript/styles/chinwag_light.scss b/app/javascript/styles/chinwag_light.scss
new file mode 100644
index 000000000..52bb20570
--- /dev/null
+++ b/app/javascript/styles/chinwag_light.scss
@@ -0,0 +1,24 @@
+@import 'mastodon/mixins';
+@import 'chinwag_light/variables';
+@import 'fonts/roboto';
+@import 'fonts/roboto-mono';
+@import 'fonts/montserrat';
+
+@import 'mastodon/reset';
+@import 'mastodon/basics';
+@import 'mastodon/containers';
+@import 'mastodon/lists';
+@import 'mastodon/footer';
+@import 'mastodon/compact_header';
+@import 'mastodon/landing_strip';
+@import 'mastodon/forms';
+@import 'mastodon/accounts';
+@import 'mastodon/stream_entries';
+@import 'mastodon/components';
+@import 'mastodon/emoji_picker';
+@import 'mastodon/about';
+@import 'mastodon/tables';
+@import 'mastodon/admin';
+@import 'mastodon/rtl';
+
+@import 'chinwag_light/overrides';
diff --git a/app/javascript/styles/chinwag_light/overrides.scss b/app/javascript/styles/chinwag_light/overrides.scss
new file mode 100644
index 000000000..7300f23d6
--- /dev/null
+++ b/app/javascript/styles/chinwag_light/overrides.scss
@@ -0,0 +1,147 @@
+@import 'variables';
+
+// Text-icons status buttons
+.status,
+.status.status-direct {
+ .icon-button {
+ color: $status-buttons-base-color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $status-buttons-active-color;
+ }
+
+ &.disabled {
+ color: $status-buttons-disabled-color;
+ }
+ }
+}
+
+.icon-button.overlayed {
+ background: rgba($white, .6);
+
+ &:hover {
+ background: rgba($white, .6);
+ }
+}
+
+// Boost button
+@function hex-color($color) {
+ @if type-of($color) == 'color' {
+ $color: str-slice(ie-hex-str($color), 4);
+ }
+ @return '%23' + unquote($color)
+}
+
+button.icon-button i.fa-retweet {
+ background-image: url("data:image/svg+xml;utf8,");
+
+ &:hover {
+ background-image: url("data:image/svg+xml;utf8,");
+ }
+}
+
+button.icon-button.disabled i.fa-retweet {
+ background-image: url("data:image/svg+xml;utf8,");
+
+ &:hover {
+ background-image: url("data:image/svg+xml;utf8,");
+ }
+}
+
+// Spoilers button
+.status__content,
+.reply-indicator__content, {
+ .status__content__spoiler-link {
+ background-color: lighten($classic-secondary-color, 10%);
+ color: $black;
+
+ &:focus,
+ &:hover,
+ &:active {
+ background-color: lighten($classic-highlight-color, 10%);
+ }
+
+ &:disabled {
+ background-color: rgba($classic-secondary-color, .4);
+ color: rgba($black, .4);
+ }
+ }
+}
+
+// Toot input
+.drawer__inner {
+ background: darken($classic-base-color, 15%);
+}
+
+.autosuggest-textarea__textarea,
+.spoiler-input__input {
+ color: $black;
+}
+
+.compose-form__buttons {
+ background: rgba($white, 0.3);
+
+ .icon-button.inverted,
+ .text-icon-button {
+ color: $status-buttons-base-color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $status-buttons-active-color;
+ }
+
+ &.disabled {
+ color: $status-buttons-disabled-color;
+ }
+ }
+}
+
+.compose-form__warning {
+ background: $classic-base-color;
+}
+
+.reply-indicator {
+ background: $classic-base-color;
+ color: $black;
+
+ * {
+ color: inherit;
+ }
+}
+
+.privacy-dropdown__option,
+.privacy-dropdown__option__content strong {
+ color: $classic-primary-color;
+}
+
+.media-spoiler {
+ color: $classic-primary-color;
+ background: lighten($classic-base-color, 15%);
+
+ &:hover {
+ color: $classic-highlight-color;
+ }
+}
+
+.button {
+ background-color: lighten($classic-secondary-color, 10%);
+ color: $black;
+
+ &:focus,
+ &:hover,
+ &:active {
+ background-color: lighten($classic-highlight-color, 10%);
+ }
+
+ &:disabled {
+ background-color: rgba($classic-secondary-color, .4);
+ color: rgba($black, .4);
+ }
+}
+
+.upload-progress__tracker {
+ background: $classic-primary-color;
+}
diff --git a/app/javascript/styles/chinwag_light/variables.scss b/app/javascript/styles/chinwag_light/variables.scss
new file mode 100644
index 000000000..ad58c9395
--- /dev/null
+++ b/app/javascript/styles/chinwag_light/variables.scss
@@ -0,0 +1,42 @@
+// Commonly used web colors
+$black: #000; // Black
+$white: #fff; // White
+$success-green: #79bd9a; // Padua
+$error-red: #df405a; // Cerise
+$warning-red: #ff5050; // Sunset Orange
+$gold-star: #ca8f04; // Dark Goldenrod
+
+// Values from the classic Mastodon UI
+$classic-base-color: #9c9c9c; //#282c37; // Midnight Express
+$classic-primary-color: #282c37; //9baec8; // Echo Blue
+$classic-secondary-color: #204c03; //d9e1e8; // Pattens Blue
+$classic-highlight-color: #397313; // 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;
+$primary-text-color: $black !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: darken($ui-base-color, 36%) !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; // Vibrant
+
+// Buttons colors
+$status-buttons-base-color: $ui-primary-color;
+$status-buttons-active-color: $classic-highlight-color;
+$status-buttons-disabled-color: rgba($status-buttons-base-color, .4);
+
+// Spoilers - Show More button
+$status-spoilers-background: $classic-primary-color;
+$status-spoilers-text: $white;
+$status-spoilers-active-background: $classic-highlight-color;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
diff --git a/app/javascript/styles/mastodon_light.scss b/app/javascript/styles/mastodon_light.scss
new file mode 100644
index 000000000..a08b13c70
--- /dev/null
+++ b/app/javascript/styles/mastodon_light.scss
@@ -0,0 +1,24 @@
+@import 'mastodon/mixins';
+@import 'mastodon_light/variables';
+@import 'fonts/roboto';
+@import 'fonts/roboto-mono';
+@import 'fonts/montserrat';
+
+@import 'mastodon/reset';
+@import 'mastodon/basics';
+@import 'mastodon/containers';
+@import 'mastodon/lists';
+@import 'mastodon/footer';
+@import 'mastodon/compact_header';
+@import 'mastodon/landing_strip';
+@import 'mastodon/forms';
+@import 'mastodon/accounts';
+@import 'mastodon/stream_entries';
+@import 'mastodon/components';
+@import 'mastodon/emoji_picker';
+@import 'mastodon/about';
+@import 'mastodon/tables';
+@import 'mastodon/admin';
+@import 'mastodon/rtl';
+
+@import 'mastodon_light/overrides';
diff --git a/app/javascript/styles/mastodon_light/overrides.scss b/app/javascript/styles/mastodon_light/overrides.scss
new file mode 100644
index 000000000..243451d62
--- /dev/null
+++ b/app/javascript/styles/mastodon_light/overrides.scss
@@ -0,0 +1,161 @@
+@import 'variables';
+
+// Text-icons status buttons
+.status,
+.status.status-direct {
+ .icon-button {
+ color: $status-buttons-base-color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $status-buttons-active-color;
+ }
+
+ &.disabled {
+ color: $status-buttons-disabled-color;
+ }
+ }
+}
+
+.icon-button.overlayed {
+ background: rgba($white, .6);
+
+ &:hover {
+ background: rgba($white, .6);
+ }
+}
+
+// Boost button
+@function hex-color($color) {
+ @if type-of($color) == 'color' {
+ $color: str-slice(ie-hex-str($color), 4);
+ }
+ @return '%23' + unquote($color)
+}
+
+button.icon-button i.fa-retweet {
+ background-image: url("data:image/svg+xml;utf8,");
+
+ &:hover {
+ background-image: url("data:image/svg+xml;utf8,");
+ }
+}
+
+button.icon-button.disabled i.fa-retweet {
+ background-image: url("data:image/svg+xml;utf8,");
+
+ &:hover {
+ background-image: url("data:image/svg+xml;utf8,");
+ }
+}
+
+// Spoilers button
+.status__content,
+.reply-indicator__content, {
+ .status__content__spoiler-link {
+ background-color: lighten($classic-secondary-color, 10%);
+ color: $black;
+
+ &:focus,
+ &:hover,
+ &:active {
+ background-color: lighten($classic-highlight-color, 10%);
+ }
+
+ &:disabled {
+ background-color: rgba($classic-secondary-color, .4);
+ color: rgba($black, .4);
+ }
+ }
+}
+
+// Toot input
+.drawer__inner {
+ background: darken($classic-base-color, 15%);
+}
+
+.drawer__inner__mastodon {
+ background: darken($classic-base-color, 15%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto;
+}
+
+.compose-form .autosuggest-textarea__textarea,
+.compose-form .spoiler-input__input {
+ color: $black;
+}
+
+.compose-form__buttons {
+ background: rgba($white, 0.3);
+
+ .icon-button.inverted,
+ .text-icon-button {
+ color: $status-buttons-base-color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $status-buttons-active-color;
+ }
+
+ &.disabled {
+ color: $status-buttons-disabled-color;
+ }
+ }
+}
+
+.compose-form__warning {
+ background: $classic-base-color;
+}
+
+.reply-indicator {
+ background: $classic-base-color;
+ color: $black;
+
+ * {
+ color: inherit;
+ }
+}
+
+.privacy-dropdown__option,
+.privacy-dropdown__option__content strong {
+ color: $classic-primary-color;
+}
+
+.media-spoiler {
+ color: $classic-primary-color;
+ background: lighten($classic-base-color, 15%);
+
+ &:hover {
+ color: $classic-highlight-color;
+ }
+}
+
+.button {
+ background-color: lighten($classic-secondary-color, 10%);
+ color: $black;
+
+ &:focus,
+ &:hover,
+ &:active {
+ background-color: lighten($classic-highlight-color, 10%);
+ }
+
+ &:disabled {
+ background-color: rgba($classic-secondary-color, .4);
+ color: rgba($black, .4);
+ }
+}
+
+.upload-progress__tracker {
+ background: $classic-primary-color;
+}
+
+.activity-stream .status.light .display-name span {
+ color: $ui-highlight-color;
+}
+
+.activity-stream-tabs a.active,
+.activity-stream .status.light .status__content,
+.activity-stream .status.light .display-name strong {
+ color: $black;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mastodon_light/variables.scss b/app/javascript/styles/mastodon_light/variables.scss
new file mode 100644
index 000000000..4a9947d1d
--- /dev/null
+++ b/app/javascript/styles/mastodon_light/variables.scss
@@ -0,0 +1,42 @@
+// Commonly used web colors
+$black: #000; // Black
+$white: #fff; // White
+$success-green: #79bd9a; // Padua
+$error-red: #df405a; // Cerise
+$warning-red: #ff5050; // Sunset Orange
+$gold-star: #ca8f04; // Dark Goldenrod
+
+// Values from the classic Mastodon UI
+$classic-base-color: #d9e1e8; //#282c37; // Midnight Express
+$classic-primary-color: #282c37; //9baec8; // Echo Blue
+$classic-secondary-color: #1368a5; //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;
+$primary-text-color: $black !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: darken($ui-base-color, 36%) !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; // Vibrant
+
+// Buttons colors
+$status-buttons-base-color: $ui-primary-color;
+$status-buttons-active-color: $classic-highlight-color;
+$status-buttons-disabled-color: rgba($status-buttons-base-color, .4);
+
+// Spoilers - Show More button
+$status-spoilers-background: $classic-primary-color;
+$status-spoilers-text: $white;
+$status-spoilers-active-background: $classic-highlight-color;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;