Move to new colors, switch incoming/outgoing colors

2018-09-25 17:26:06 -07:00
parent cd60bdd08a
commit 10c53bddb0
22 changed files with 1116 additions and 1233 deletions
--- a/js/background.js
+++ b/js/background.js
@@ -768,7 +768,6 @@
    if (firstRun === true && deviceId !== '1') {
      const hasThemeSetting = Boolean(storage.get('theme-setting'));
      if (!hasThemeSetting && textsecure.storage.get('userAgent') === 'OWI') {
        storage.put('theme-setting', 'ios');
        onChangeTheme();
      }
      const syncRequest = new textsecure.SyncRequest(
@@ -961,6 +960,7 @@
    const updates = {
      name: details.name,
      members: details.members,
      color: details.color,
      type: 'group',
    };
--- a/js/models/conversations.js
+++ b/js/models/conversations.js
@@ -37,19 +37,15 @@
  const COLORS = [
    'red',
    'deep_orange',
    'brown',
    'pink',
    'purple',
    'deep_purple',
    'indigo',
    'blue',
    'light_blue',
    'cyan',
    'teal',
    'green',
    'light_green',
    'orange',
    'deep_orange',
    'amber',
    'blue_grey',
  ];
--- a/js/models/messages.js
+++ b/js/models/messages.js
@@ -394,7 +394,6 @@
      const contact = this.findAndFormatContact(phoneNumber);
      const contactModel = this.findContact(phoneNumber);
      const authorColor = contactModel ? contactModel.getColor() : null;
      const authorAvatar = contactModel ? contactModel.getAvatar() : null;
      const authorAvatarPath = authorAvatar ? authorAvatar.url : null;
@@ -407,6 +406,7 @@
      const conversation = this.getConversation();
      const isGroup = conversation && !conversation.isPrivate();
      const conversationColor = conversation && conversation.getColor();
      const attachments = this.get('attachments');
      const firstAttachment = attachments && attachments[0];
@@ -421,7 +421,7 @@
        authorName: contact.name,
        authorProfileName: contact.profileName,
        authorPhoneNumber: contact.phoneNumber,
-        authorColor,
+        conversationColor,
        conversationType: isGroup ? 'group' : 'direct',
        attachment: this.getPropsForAttachment(firstAttachment),
        quote: this.getPropsForQuote(),
@@ -536,7 +536,6 @@
      const authorPhoneNumber = author;
      const authorProfileName = contact ? contact.getProfileName() : null;
      const authorName = contact ? contact.getName() : null;
      const authorColor = contact ? contact.getColor() : 'grey';
      const isFromMe = contact ? contact.id === this.OUR_NUMBER : false;
      const onClick = () => {
        this.trigger('scroll-to-message', {
@@ -557,7 +556,6 @@
        authorPhoneNumber,
        authorProfileName,
        authorName,
        authorColor,
        onClick,
        referencedMessageNotFound,
      };
--- a/js/views/app_view.js
+++ b/js/views/app_view.js
@@ -21,18 +21,11 @@
      openInbox: 'openInbox',
    },
    applyTheme() {
      const iOS = storage.get('userAgent') === 'OWI';
      const theme = storage.get('theme-setting') || 'light';
      this.$el
        .removeClass('light-theme')
        .removeClass('dark-theme')
        .addClass(`${theme}-theme`);
      if (iOS) {
        this.$el.addClass('ios-theme');
      } else {
        this.$el.removeClass('ios-theme');
      }
    },
    applyHideMenu() {
      const hideMenuBar = storage.get('hide-menu-bar', false);
--- a/js/views/identicon_svg_view.js
+++ b/js/views/identicon_svg_view.js
@@ -42,20 +42,17 @@
  });
  const COLORS = {
-    red: '#EF5350',
+    red: '#cc163d',
-    pink: '#EC407A',
+    deep_orange: '#c73800',
-    purple: '#AB47BC',
+    brown: '#746c53',
-    deep_purple: '#7E57C2',
+    pink: '#a23474',
-    indigo: '#5C6BC0',
+    purple: '#862caf',
-    blue: '#2196F3',
+    indigo: '#5951c8',
-    light_blue: '#03A9F4',
+    blue: '#336ba3',
-    cyan: '#00BCD4',
+    teal: '#067589',
-    teal: '#009688',
+    green: '#3b7845',
-    green: '#4CAF50',
+    light_green: '#895d66',
-    light_green: '#7CB342',
+    blue_grey: '#607d8b',
-    orange: '#FF9800',
+    grey: '#6b6b78',
    deep_orange: '#FF5722',
    amber: '#FFB300',
    blue_grey: '#607D8B',
  };
 })();
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -19,14 +19,14 @@
 }
 .gutter {
-  background-color: $color-black-008-no-tranparency;
+  background-color: $color-gray-02;
  ::-webkit-scrollbar-track {
-    background: $color-black-008-no-tranparency;
+    background: $color-gray-02;
  }
  ::-webkit-scrollbar-thumb {
-    border: 2px solid $color-black-008-no-tranparency;
+    border: 2px solid $color-gray-02;
  }
  float: left;
--- a/stylesheets/_ios.scss
+++ b/stylesheets/_ios.scss
@@ -1,440 +0,0 @@
 // When paired with an iOS device, this stylesheet will apply
 .ios-theme {
  // _modules
  .module-message__container--outgoing {
    background-color: $color-signal-blue;
    color: $color-white;
  }
  .module-message__container--incoming {
    background-color: $color-light-10;
    color: $color-light-90;
  }
  .module-message__container--incoming-grey {
    background-color: $color-light-10;
  }
  .module-message__container--incoming-blue {
    background-color: $color-light-10;
  }
  .module-message__container--incoming-cyan {
    background-color: $color-light-10;
  }
  .module-message__container--incoming-deep_orange {
    background-color: $color-light-10;
  }
  .module-message__container--incoming-green {
    background-color: $color-light-10;
  }
  .module-message__container--incoming-indigo {
    background-color: $color-light-10;
  }
  .module-message__container--incoming-pink {
    background-color: $color-light-10;
  }
  .module-message__container--incoming-purple {
    background-color: $color-light-10;
  }
  .module-message__container--incoming-red {
    background-color: $color-light-10;
  }
  .module-message__container--incoming-teal {
    background-color: $color-light-10;
  }
  .module-message__author {
    color: $color-light-90;
  }
  .module-message__text {
    color: $color-white;
    font-size: 14px;
    a {
      text-decoration: underline;
      color: $color-white;
    }
  }
  .module-message__text--incoming {
    color: $color-light-90;
    a {
      text-decoration: underline;
      color: $color-light-90;
    }
  }
  .module-message__metadata__date {
    color: $color-white-07;
  }
  .module-message__metadata__date--incoming {
    color: $color-light-45;
  }
  .module-message__metadata__date--with-image-no-caption {
    color: $color-white;
  }
  .module-message__metadata__status-icon--sending {
    @include color-svg('../images/sending.svg', $color-white);
  }
  .module-message__metadata__status-icon--sent {
    @include color-svg('../images/check-circle-outline.svg', $color-white-07);
  }
  .module-message__metadata__status-icon--delivered {
    @include color-svg('../images/double-check.svg', $color-white-07);
  }
  .module-message__metadata__status-icon--read {
    @include color-svg('../images/read.svg', $color-white-07);
  }
  .module-message__metadata__status-icon--with-image-no-caption {
    background-color: $color-white;
  }
  .module-message__broken-image {
    color: $color-white;
  }
  .module-message__broken-image--incoming {
    color: $color-light-90;
  }
  .module-message__broken-video-screenshot {
    color: $color-white;
  }
  .module-message__broken-video-screenshot--incoming {
    color: $color-light-90;
  }
  .module-message__generic-attachment__file-name {
    color: $color-white;
  }
  .module-message__generic-attachment__file-name--incoming {
    color: $color-light-90;
  }
  .module-message__generic-attachment__file-size {
    color: $color-white;
  }
  .module-message__generic-attachment__file-size--incoming {
    color: $color-light-90;
  }
  .module-expire-timer {
    background-color: $color-white-07;
  }
  .module-expire-timer--incoming {
    background-color: $color-light-45;
  }
  .module-quote--incoming {
    background-color: $color-signal-blue-025;
    border-left-color: $color-signal-blue;
  }
  .module-quote--outgoing-you {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote--outgoing-grey {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote--outgoing-blue {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote--outgoing-cyan {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote--outgoing-deep_orange {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote--outgoing-green {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote--outgoing-indigo {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote--outgoing-pink {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote--outgoing-purple {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote--outgoing-red {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote--outgoing-teal {
    border-left-color: $color-white;
    background-color: $color-white-06;
  }
  .module-quote__primary__author--grey {
    color: $color-light-90;
  }
  .module-quote__primary__author--blue {
    color: $color-light-90;
  }
  .module-quote__primary__author--cyan {
    color: $color-light-90;
  }
  .module-quote__primary__author--deep_orange {
    color: $color-light-90;
  }
  .module-quote__primary__author--green {
    color: $color-light-90;
  }
  .module-quote__primary__author--indigo {
    color: $color-light-90;
  }
  .module-quote__primary__author--pink {
    color: $color-light-90;
  }
  .module-quote__primary__author--purple {
    color: $color-light-90;
  }
  .module-quote__primary__author--red {
    color: $color-light-90;
  }
  .module-quote__primary__author--teal {
    color: $color-light-90;
  }
  .module-quote__reference-warning--incoming {
    background-color: $color-signal-blue-mix;
  }
  // When you're composing a new quote
  .bottom-bar {
    .module-quote {
      background-color: $color-signal-blue-025;
      border-left-color: $color-signal-blue;
    }
  }
  .module-embedded-contact__contact-name {
    color: $color-white;
  }
  .module-embedded-contact__contact-method {
    color: $color-white-07;
  }
  .module-embedded-contact__contact-name--incoming {
    color: $color-light-90;
  }
  .module-embedded-contact__contact-method--incoming {
    color: $color-light-60;
  }
  &.dark-theme {
    // _modules
    .module-message__container--incoming {
      background-color: $color-dark-70;
      color: $color-white;
    }
    .module-message__container--incoming-grey {
      background-color: $color-dark-70;
    }
    .module-message__container--incoming-blue {
      background-color: $color-dark-70;
    }
    .module-message__container--incoming-cyan {
      background-color: $color-dark-70;
    }
    .module-message__container--incoming-deep_orange {
      background-color: $color-dark-70;
    }
    .module-message__container--incoming-green {
      background-color: $color-dark-70;
    }
    .module-message__container--incoming-indigo {
      background-color: $color-dark-70;
    }
    .module-message__container--incoming-pink {
      background-color: $color-dark-70;
    }
    .module-message__container--incoming-purple {
      background-color: $color-dark-70;
    }
    .module-message__container--incoming-red {
      background-color: $color-dark-70;
    }
    .module-message__container--incoming-teal {
      background-color: $color-dark-70;
    }
    .module-message__author {
      color: $color-white;
    }
    .module-message__text--incoming {
      color: $color-white;
      a {
        text-decoration: underline;
        color: $color-white;
      }
    }
    .module-message__metadata__date--incoming {
      color: $color-white-07;
    }
    .module-message__broken-image--incoming {
      color: $color-white;
    }
    .module-message__broken-video-screenshot--incoming {
      color: $color-white;
    }
    .module-message__generic-attachment__file-name--incoming {
      color: $color-white;
    }
    .module-message__generic-attachment__file-size--incoming {
      color: $color-white;
    }
    .module-expire-timer--incoming {
      background-color: $color-white-07;
    }
    .module-quote__primary__author {
      color: $color-light-90;
    }
    .module-quote__primary__author--grey {
      color: $color-light-90;
    }
    .module-quote__primary__author--blue {
      color: $color-light-90;
    }
    .module-quote__primary__author--cyan {
      color: $color-light-90;
    }
    .module-quote__primary__author--deep_orange {
      color: $color-light-90;
    }
    .module-quote__primary__author--green {
      color: $color-light-90;
    }
    .module-quote__primary__author--indigo {
      color: $color-light-90;
    }
    .module-quote__primary__author--pink {
      color: $color-light-90;
    }
    .module-quote__primary__author--purple {
      color: $color-light-90;
    }
    .module-quote__primary__author--red {
      color: $color-light-90;
    }
    .module-quote__primary__author--teal {
      color: $color-light-90;
    }
    .module-quote__primary__text {
      color: $color-light-90;
      a {
        color: $color-light-90;
      }
    }
    .module-quote__primary__type-label {
      color: $color-light-90;
    }
    .module-quote__primary__type-label--incoming {
      color: $color-white;
    }
    .module-quote__primary__author--incoming {
      color: $color-white;
    }
    .module-quote__primary__text--incoming {
      color: $color-white;
      a {
        color: $color-white;
      }
    }
    .module-quote__generic-file__text {
      color: $color-light-90;
    }
    .module-quote__generic-file__text--incoming {
      color: $color-white;
    }
    .module-quote__reference-warning {
      background-color: $color-white-04;
    }
    .module-quote__reference-warning--incoming {
      background-color: $color-signal-blue-050;
    }
    .module-quote__reference-warning__text {
      color: $color-light-90;
    }
    .module-quote__reference-warning__text--incoming {
      color: $color-white;
    }
    .module-quote__reference-warning__icon {
      @include color-svg('../images/broken-link.svg', $color-light-60);
    }
    .module-quote__reference-warning__icon--incoming {
      @include color-svg('../images/broken-link.svg', $color-white-085);
    }
    // When you're composing a new quote
    .bottom-bar {
      .module-quote__primary__author {
        color: $color-white;
      }
      .module-quote__primary__type-label {
        color: $color-white;
      }
      .module-quote__generic-file__text {
        color: $color-white;
      }
      .module-quote__primary__text {
        color: $color-white;
        a {
          color: $color-white;
        }
      }
    }
    .module-embedded-contact__contact-name--incoming {
      color: $color-white;
    }
    .module-embedded-contact__contact-method--incoming {
      color: $color-white-07;
    }
  }
 }
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -156,45 +156,48 @@
  padding-bottom: 10px;
 }
-.module-message__container--outgoing {
+.module-message__container--incoming {
  background-color: $color-light-10;
 }
 // In case the color gets messed up
-.module-message__container--incoming {
+.module-message__container--outgoing {
  background-color: $color-conversation-grey;
 }
-.module-message__container--incoming-grey {
+.module-message__container--outgoing-red {
  background-color: $color-conversation-grey;
 }
 .module-message__container--incoming-blue {
  background-color: $color-conversation-blue;
 }
 .module-message__container--incoming-cyan {
  background-color: $color-conversation-cyan;
 }
 .module-message__container--incoming-deep_orange {
  background-color: $color-conversation-deep_orange;
 }
 .module-message__container--incoming-green {
  background-color: $color-conversation-green;
 }
 .module-message__container--incoming-indigo {
  background-color: $color-conversation-indigo;
 }
 .module-message__container--incoming-pink {
  background-color: $color-conversation-pink;
 }
 .module-message__container--incoming-purple {
  background-color: $color-conversation-purple;
 }
 .module-message__container--incoming-red {
  background-color: $color-conversation-red;
 }
-.module-message__container--incoming-teal {
+.module-message__container--outgoing-deep_orange {
  background-color: $color-conversation-deep_orange;
 }
 .module-message__container--outgoing-brown {
  background-color: $color-conversation-brown;
 }
 .module-message__container--outgoing-pink {
  background-color: $color-conversation-pink;
 }
 .module-message__container--outgoing-purple {
  background-color: $color-conversation-purple;
 }
 .module-message__container--outgoing-indigo {
  background-color: $color-conversation-indigo;
 }
 .module-message__container--outgoing-blue {
  background-color: $color-conversation-blue;
 }
 .module-message__container--outgoing-teal {
  background-color: $color-conversation-teal;
 }
 .module-message__container--outgoing-green {
  background-color: $color-conversation-green;
 }
 .module-message__container--outgoing-light_green {
  background-color: $color-conversation-light_green;
 }
 .module-message__container--outgoing-blue_grey {
  background-color: $color-conversation-blue_grey;
 }
 .module-message__attachment-container {
  // Entirely to ensure that images are centered if they aren't full width of bubble
@@ -233,7 +236,7 @@
  left: 0;
  right: 0;
  border-radius: 16px;
-  box-shadow: inset 0px 0px 0px 1px $color-black-02;
+  box-shadow: inset 0px 0px 0px 1px $color-black-015;
 }
 .module-message__img-border-overlay--with-content-below {
@@ -383,7 +386,7 @@
 }
 .module-message__generic-attachment__file-name {
-  color: $color-light-90;
+  color: $color-white;
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
@@ -396,11 +399,11 @@
 }
 .module-message__generic-attachment__file-name--incoming {
-  color: $color-white;
+  color: $color-light-90;
 }
 .module-message__generic-attachment__file-size {
-  color: $color-light-90;
+  color: $color-white;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.3px;
@@ -408,11 +411,11 @@
 }
 .module-message__generic-attachment__file-size--incoming {
-  color: $color-white;
+  color: $color-light-90;
 }
 .module-message__author {
-  color: $color-white;
+  color: $color-light-90;
  font-size: 13px;
  font-weight: 300;
  line-height: 18px;
@@ -428,7 +431,7 @@
 }
 .module-message__text {
-  color: $color-light-90;
+  color: $color-white;
  font-size: 14px;
  line-height: 18px;
  text-align: start;
@@ -440,15 +443,15 @@
  a {
    text-decoration: underline;
-    color: $color-light-90;
+    color: $color-white;
  }
 }
 .module-message__text--incoming {
-  color: $color-white;
+  color: $color-light-90;
  a {
    text-decoration: underline;
-    color: $color-white;
+    color: $color-light-90;
  }
 }
@@ -480,11 +483,11 @@
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-white-08;
  text-transform: uppercase;
 }
 .module-message__metadata__date--incoming {
-  color: $color-white-07;
+  color: $color-light-60;
 }
 .module-message__metadata__date--with-image-no-caption {
  color: $color-white;
@@ -515,14 +518,14 @@
 }
 .module-message__metadata__status-icon--sent {
-  @include color-svg('../images/check-circle-outline.svg', $color-light-35);
+  @include color-svg('../images/check-circle-outline.svg', $color-white-08);
 }
 .module-message__metadata__status-icon--delivered {
-  @include color-svg('../images/double-check.svg', $color-light-35);
+  @include color-svg('../images/double-check.svg', $color-white-08);
  width: 18px;
 }
 .module-message__metadata__status-icon--read {
-  @include color-svg('../images/read.svg', $color-light-35);
+  @include color-svg('../images/read.svg', $color-white-08);
  width: 18px;
 }
@@ -579,25 +582,19 @@
  flex-direction: row;
  align-items: center;
  text-align: center;
 }
-.module-message__author-default-avatar--grey {
+  // Default, in case we have no color
  background-color: $color-conversation-grey;
 }
-.module-message__author-default-avatar--blue {
+
-  background-color: $color-conversation-blue;
+.module-message__author-default-avatar--red {
-}
+  background-color: $color-conversation-red;
 .module-message__author-default-avatar--cyan {
  background-color: $color-conversation-cyan;
 }
 .module-message__author-default-avatar--deep_orange {
  background-color: $color-conversation-deep_orange;
 }
-.module-message__author-default-avatar--green {
+.module-message__author-default-avatar--brown {
-  background-color: $color-conversation-green;
+  background-color: $color-conversation-brown;
 }
 .module-message__author-default-avatar--indigo {
  background-color: $color-conversation-indigo;
 }
 .module-message__author-default-avatar--pink {
  background-color: $color-conversation-pink;
@@ -605,12 +602,24 @@
 .module-message__author-default-avatar--purple {
  background-color: $color-conversation-purple;
 }
-.module-message__author-default-avatar--red {
+.module-message__author-default-avatar--indigo {
-  background-color: $color-conversation-red;
+  background-color: $color-conversation-indigo;
 }
 .module-message__author-default-avatar--blue {
  background-color: $color-conversation-blue;
 }
 .module-message__author-default-avatar--teal {
  background-color: $color-conversation-teal;
 }
 .module-message__author-default-avatar--green {
  background-color: $color-conversation-green;
 }
 .module-message__author-default-avatar--light_green {
  background-color: $color-conversation-light_green;
 }
 .module-message__author-default-avatar--blue_grey {
  background-color: $color-conversation-blue_grey;
 }
 .module-message__author-default-avatar__label {
  width: 100%;
@@ -722,53 +731,90 @@
 }
 .module-quote--incoming {
-  background-color: $color-white-075;
+  border-left-color: $color-conversation-grey;
-  border-left-color: $color-white;
+  background-color: $color-conversation-grey-tint;
 }
 .module-quote--incoming-red {
  border-left-color: $color-conversation-red;
  background-color: $color-conversation-red-tint;
 }
 .module-quote--incoming-deep_orange {
  border-left-color: $color-conversation-deep_orange;
  background-color: $color-conversation-deep_orange-tint;
 }
 .module-quote--incoming-brown {
  border-left-color: $color-conversation-brown;
  background-color: $color-conversation-brown-tint;
 }
 .module-quote--incoming-pink {
  border-left-color: $color-conversation-pink;
  background-color: $color-conversation-pink-tint;
 }
 .module-quote--incoming-purple {
  border-left-color: $color-conversation-purple;
  background-color: $color-conversation-purple-tint;
 }
 .module-quote--incoming-indigo {
  border-left-color: $color-conversation-indigo;
  background-color: $color-conversation-indigo-tint;
 }
 .module-quote--incoming-blue {
  border-left-color: $color-conversation-blue;
  background-color: $color-conversation-blue-tint;
 }
 .module-quote--incoming-teal {
  border-left-color: $color-conversation-teal;
  background-color: $color-conversation-teal-tint;
 }
 .module-quote--incoming-green {
  border-left-color: $color-conversation-green;
  background-color: $color-conversation-green-tint;
 }
 .module-quote--incoming-light_green {
  border-left-color: $color-conversation-light_green;
  background-color: $color-conversation-light_green-tint;
 }
 .module-quote--incoming-blue_grey {
  border-left-color: $color-conversation-blue_grey;
  background-color: $color-conversation-blue_grey-tint;
 }
-.module-quote--outgoing-you {
+.module-quote--outgoing {
-  border-left-color: $color-light-35;
+  border-left-color: $color-white;
-  background-color: $color-light-02;
+  background-color: $color-conversation-grey-tint;
 }
 .module-quote--outgoing-grey {
  border-left-color: $color-conversation-grey;
  background-color: rgba($color-conversation-grey, 0.25);
 }
 .module-quote--outgoing-blue {
  border-left-color: $color-conversation-blue;
  background-color: rgba($color-conversation-blue, 0.25);
 }
 .module-quote--outgoing-cyan {
  border-left-color: $color-conversation-cyan;
  background-color: rgba($color-conversation-cyan, 0.25);
 }
 .module-quote--outgoing-deep_orange {
  border-left-color: $color-conversation-deep_orange;
  background-color: rgba($color-conversation-deep_orange, 0.25);
 }
 .module-quote--outgoing-green {
  border-left-color: $color-conversation-green;
  background-color: rgba($color-conversation-green, 0.25);
 }
 .module-quote--outgoing-indigo {
  border-left-color: $color-conversation-indigo;
  background-color: rgba($color-conversation-indigo, 0.25);
 }
 .module-quote--outgoing-pink {
  border-left-color: $color-conversation-pink;
  background-color: rgba($color-conversation-pink, 0.25);
 }
 .module-quote--outgoing-purple {
  border-left-color: $color-conversation-purple;
  background-color: rgba($color-conversation-purple, 0.25);
 }
 .module-quote--outgoing-red {
-  border-left-color: $color-conversation-red;
+  background-color: $color-conversation-red-tint;
-  background-color: rgba($color-conversation-red, 0.25);
+}
 .module-quote--outgoing-deep_orange {
  background-color: $color-conversation-deep_orange-tint;
 }
 .module-quote--outgoing-brown {
  background-color: $color-conversation-brown-tint;
 }
 .module-quote--outgoing-pink {
  background-color: $color-conversation-pink-tint;
 }
 .module-quote--outgoing-purple {
  background-color: $color-conversation-purple-tint;
 }
 .module-quote--outgoing-indigo {
  background-color: $color-conversation-indigo-tint;
 }
 .module-quote--outgoing-blue {
  background-color: $color-conversation-blue-tint;
 }
 .module-quote--outgoing-teal {
-  border-left-color: $color-conversation-teal;
+  background-color: $color-conversation-teal-tint;
-  background-color: rgba($color-conversation-teal, 0.25);
+}
 .module-quote--outgoing-green {
  background-color: $color-conversation-green-tint;
 }
 .module-quote--outgoing-light_green {
  background-color: $color-conversation-light_green-tint;
 }
 .module-quote--outgoing-blue_grey {
  background-color: $color-conversation-blue_grey-tint;
 }
 .module-quote__primary {
@@ -792,37 +838,6 @@
  text-overflow: ellipsis;
 }
 .module-quote__primary__author--grey {
  color: $color-conversation-grey;
 }
 .module-quote__primary__author--blue {
  color: $color-conversation-blue;
 }
 .module-quote__primary__author--cyan {
  color: $color-conversation-cyan;
 }
 .module-quote__primary__author--deep_orange {
  color: $color-conversation-deep_orange;
 }
 .module-quote__primary__author--green {
  color: $color-conversation-green;
 }
 .module-quote__primary__author--indigo {
  color: $color-conversation-indigo;
 }
 .module-quote__primary__author--pink {
  color: $color-conversation-pink;
 }
 .module-quote__primary__author--purple {
  color: $color-conversation-purple;
 }
 .module-quote__primary__author--red {
  color: $color-conversation-red;
 }
 .module-quote__primary__author--teal {
  color: $color-conversation-teal;
 }
 .module-quote__primary__profile-name {
  font-style: italic;
 }
@@ -1053,7 +1068,7 @@
  line-height: 18px;
  font-weight: 300;
  margin-top: 6px;
-  color: $color-light-90;
+  color: $color-white;
  max-width: 100%;
  white-space: nowrap;
@@ -1062,7 +1077,7 @@
 }
 .module-embedded-contact__contact-name--incoming {
-  color: $color-white;
+  color: $color-light-90;
 }
 .module-embedded-contact__contact-method {
@@ -1070,7 +1085,7 @@
  line-height: 16px;
  letter-spacing: 0.3px;
  margin-top: 3px;
-  color: $color-light-60;
+  color: $color-white-07;
  max-width: 100%;
  white-space: nowrap;
@@ -1079,7 +1094,7 @@
 }
 .module-embedded-contact__contact-method--incoming {
-  color: $color-white-07;
+  color: $color-light-60;
 }
 // Module: Contact Detail
@@ -1374,23 +1389,14 @@
  background-color: $color-conversation-grey;
 }
-.module-contact-list-item__avatar-default--grey {
+.module-contact-list-item__avatar-default--red {
-  background-color: $color-conversation-grey;
+  background-color: $color-conversation-red;
 }
 .module-contact-list-item__avatar-default--blue {
  background-color: $color-conversation-blue;
 }
 .module-contact-list-item__avatar-default--cyan {
  background-color: $color-conversation-cyan;
 }
 .module-contact-list-item__avatar-default--deep_orange {
  background-color: $color-conversation-deep_orange;
 }
-.module-contact-list-item__avatar-default--green {
+.module-contact-list-item__avatar-default--brown {
-  background-color: $color-conversation-green;
+  background-color: $color-conversation-brown;
 }
 .module-contact-list-item__avatar-default--indigo {
  background-color: $color-conversation-indigo;
 }
 .module-contact-list-item__avatar-default--pink {
  background-color: $color-conversation-pink;
@@ -1398,12 +1404,24 @@
 .module-contact-list-item__avatar-default--purple {
  background-color: $color-conversation-purple;
 }
-.module-contact-list-item__avatar-default--red {
+.module-contact-list-item__avatar-default--indigo {
-  background-color: $color-conversation-red;
+  background-color: $color-conversation-indigo;
 }
 .module-contact-list-item__avatar-default--blue {
  background-color: $color-conversation-blue;
 }
 .module-contact-list-item__avatar-default--teal {
  background-color: $color-conversation-teal;
 }
 .module-contact-list-item__avatar-default--green {
  background-color: $color-conversation-green;
 }
 .module-contact-list-item__avatar-default--light_green {
  background-color: $color-conversation-light_green;
 }
 .module-contact-list-item__avatar-default--blue_grey {
  background-color: $color-conversation-blue_grey;
 }
 .module-contact-list-item__avatar-default__label {
  width: 100%;
@@ -1504,20 +1522,14 @@
  text-align: center;
 }
-.module-conversation-header___default-avatar--blue {
+.module-conversation-header___default-avatar--red {
-  background-color: $color-conversation-blue;
+  background-color: $color-conversation-red;
 }
 .module-conversation-header___default-avatar--cyan {
  background-color: $color-conversation-cyan;
 }
 .module-conversation-header___default-avatar--deep_orange {
  background-color: $color-conversation-deep_orange;
 }
-.module-conversation-header___default-avatar--green {
+.module-conversation-header___default-avatar--brown {
-  background-color: $color-conversation-green;
+  background-color: $color-conversation-brown;
 }
 .module-conversation-header___default-avatar--indigo {
  background-color: $color-conversation-indigo;
 }
 .module-conversation-header___default-avatar--pink {
  background-color: $color-conversation-pink;
@@ -1525,12 +1537,24 @@
 .module-conversation-header___default-avatar--purple {
  background-color: $color-conversation-purple;
 }
-.module-conversation-header___default-avatar--red {
+.module-conversation-header___default-avatar--indigo {
-  background-color: $color-conversation-red;
+  background-color: $color-conversation-indigo;
 }
 .module-conversation-header___default-avatar--blue {
  background-color: $color-conversation-blue;
 }
 .module-conversation-header___default-avatar--teal {
  background-color: $color-conversation-teal;
 }
 .module-conversation-header___default-avatar--green {
  background-color: $color-conversation-green;
 }
 .module-conversation-header___default-avatar--light_green {
  background-color: $color-conversation-light_green;
 }
 .module-conversation-header___default-avatar--blue_grey {
  background-color: $color-conversation-blue_grey;
 }
 .module-conversation-header__title {
  margin-left: 8px;
@@ -1666,20 +1690,14 @@
  text-align: center;
 }
-.module-message-detail__contact__default-avatar--blue {
+.module-message-detail__contact__default-avatar--red {
-  background-color: $color-conversation-blue;
+  background-color: $color-conversation-red;
 }
 .module-message-detail__contact__default-avatar--cyan {
  background-color: $color-conversation-cyan;
 }
 .module-message-detail__contact__default-avatar--deep_orange {
  background-color: $color-conversation-deep_orange;
 }
-.module-message-detail__contact__default-avatar--green {
+.module-message-detail__contact__default-avatar--brown {
-  background-color: $color-conversation-green;
+  background-color: $color-conversation-brown;
 }
 .module-message-detail__contact__default-avatar--indigo {
  background-color: $color-conversation-indigo;
 }
 .module-message-detail__contact__default-avatar--pink {
  background-color: $color-conversation-pink;
@@ -1687,12 +1705,24 @@
 .module-message-detail__contact__default-avatar--purple {
  background-color: $color-conversation-purple;
 }
-.module-message-detail__contact__default-avatar--red {
+.module-message-detail__contact__default-avatar--indigo {
-  background-color: $color-conversation-red;
+  background-color: $color-conversation-indigo;
 }
 .module-message-detail__contact__default-avatar--blue {
  background-color: $color-conversation-blue;
 }
 .module-message-detail__contact__default-avatar--teal {
  background-color: $color-conversation-teal;
 }
 .module-message-detail__contact__default-avatar--green {
  background-color: $color-conversation-green;
 }
 .module-message-detail__contact__default-avatar--light_green {
  background-color: $color-conversation-light_green;
 }
 .module-message-detail__contact__default-avatar--blue_grey {
  background-color: $color-conversation-blue_grey;
 }
 .module-message-detail__contact__text {
  margin-left: 10px;
@@ -1968,7 +1998,7 @@
  cursor: pointer;
  &:hover {
-    background-color: $color-black-016-no-tranparency;
+    background-color: $color-gray-05;
  }
 }
@@ -1978,7 +2008,7 @@
 }
 .module-conversation-list-item--is-selected {
-  background-color: $color-black-016-no-tranparency;
+  background-color: $color-gray-05;
 }
 .module-conversation-list-item__avatar {
@@ -2000,20 +2030,14 @@
  background-color: $color-conversation-grey;
 }
-.module-conversation-list-item__default-avatar--blue {
+.module-conversation-list-item__default-avatar--red {
-  background-color: $color-conversation-blue;
+  background-color: $color-conversation-red;
 }
 .module-conversation-list-item__default-avatar--cyan {
  background-color: $color-conversation-cyan;
 }
 .module-conversation-list-item__default-avatar--deep_orange {
  background-color: $color-conversation-deep_orange;
 }
-.module-conversation-list-item__default-avatar--green {
+.module-conversation-list-item__default-avatar--brown {
-  background-color: $color-conversation-green;
+  background-color: $color-conversation-brown;
 }
 .module-conversation-list-item__default-avatar--indigo {
  background-color: $color-conversation-indigo;
 }
 .module-conversation-list-item__default-avatar--pink {
  background-color: $color-conversation-pink;
@@ -2021,12 +2045,24 @@
 .module-conversation-list-item__default-avatar--purple {
  background-color: $color-conversation-purple;
 }
-.module-conversation-list-item__default-avatar--red {
+.module-conversation-list-item__default-avatar--indigo {
-  background-color: $color-conversation-red;
+  background-color: $color-conversation-indigo;
 }
 .module-conversation-list-item__default-avatar--blue {
  background-color: $color-conversation-blue;
 }
 .module-conversation-list-item__default-avatar--teal {
  background-color: $color-conversation-teal;
 }
 .module-conversation-list-item__default-avatar--green {
  background-color: $color-conversation-green;
 }
 .module-conversation-list-item__default-avatar--light_green {
  background-color: $color-conversation-light_green;
 }
 .module-conversation-list-item__default-avatar--blue_grey {
  background-color: $color-conversation-blue_grey;
 }
 .module-conversation-list-item__content {
  flex-grow: 1;
@@ -2094,6 +2130,8 @@
  font-size: 13px;
  line-height: 18px;
  color: $color-gray-60;
  height: 1.3em;
  overflow: hidden;
  white-space: nowrap;
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -2,18 +2,18 @@
 body.dark-theme {
  background-color: $color-black;
-  color: $color-dark-05;
+  color: $color-gray-95;
 }
 .dark-theme {
  // _conversation
  .conversation {
-    background-color: $color-black;
+    background-color: $color-gray-95;
  }
  .discussion-container {
-    background-color: $color-black;
+    background-color: $color-gray-95;
  }
  .key-verification {
@@ -42,7 +42,7 @@ body.dark-theme {
    }
    form.send {
-      background-color: $color-black;
+      background-color: $color-gray-95;
      &.video-attachment {
        .outer {
@@ -90,7 +90,7 @@ body.dark-theme {
  }
  .conversation-loading-screen {
-    background-color: $color-black;
+    background-color: $color-gray-95;
  }
  .module-last-seen-indicator__bar {
@@ -157,7 +157,7 @@ body.dark-theme {
  // _emoji
  .ep-emojies {
-    background-color: $color-black;
+    background-color: $color-gray-95;
  }
  .ep-categories {
@@ -200,7 +200,7 @@ body.dark-theme {
  }
  .dark-overlay {
-    background-color: $color-black;
+    background-color: $color-gray-95;
  }
  .title-bar {
@@ -341,7 +341,7 @@ body.dark-theme {
  }
  .app-loading-screen {
-    background-color: $color-black;
+    background-color: $color-gray-95;
    .dot {
      border: 3px solid $blue;
@@ -498,7 +498,7 @@ body.dark-theme {
  input.search {
    border: 1px solid $color-light-60;
    color: $color-dark-05;
-    background-color: $color-black;
+    background-color: $color-gray-95;
    &:focus {
      outline: solid 1px $blue;
@@ -587,7 +587,7 @@ body.dark-theme {
    background-color: rgba(0, 0, 0, 0.3);
    .content {
-      background-color: $color-black;
+      background-color: $color-gray-95;
      box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
    }
  }
@@ -621,52 +621,55 @@ body.dark-theme {
    @include color-svg('../images/error.svg', $color-core-red);
  }
-  .module-message__container--outgoing {
+  .module-message__container--incoming {
    background-color: $color-dark-70;
  }
  // In case the color gets messed up
-  .module-message__container--incoming {
+  .module-message__container--outgoing {
    background-color: $color-conversation-grey;
  }
-  .module-message__container--incoming-grey {
+  .module-message__container--outgoing-red {
    background-color: $color-conversation-grey;
  }
  .module-message__container--incoming-blue {
    background-color: $color-conversation-blue;
  }
  .module-message__container--incoming-cyan {
    background-color: $color-conversation-cyan;
  }
  .module-message__container--incoming-deep_orange {
    background-color: $color-conversation-deep_orange;
  }
  .module-message__container--incoming-green {
    background-color: $color-conversation-green;
  }
  .module-message__container--incoming-indigo {
    background-color: $color-conversation-indigo;
  }
  .module-message__container--incoming-pink {
    background-color: $color-conversation-pink;
  }
  .module-message__container--incoming-purple {
    background-color: $color-conversation-purple;
  }
  .module-message__container--incoming-red {
    background-color: $color-conversation-red;
  }
-  .module-message__container--incoming-teal {
+  .module-message__container--outgoing-deep_orange {
    background-color: $color-conversation-deep_orange;
  }
  .module-message__container--outgoing-brown {
    background-color: $color-conversation-brown;
  }
  .module-message__container--outgoing-pink {
    background-color: $color-conversation-pink;
  }
  .module-message__container--outgoing-purple {
    background-color: $color-conversation-purple;
  }
  .module-message__container--outgoing-indigo {
    background-color: $color-conversation-indigo;
  }
  .module-message__container--outgoing-blue {
    background-color: $color-conversation-blue;
  }
  .module-message__container--outgoing-teal {
    background-color: $color-conversation-teal;
  }
  .module-message__container--outgoing-green {
    background-color: $color-conversation-green;
  }
  .module-message__container--outgoing-light_green {
    background-color: $color-conversation-light_green;
  }
  .module-message__container--outgoing-blue_grey {
    background-color: $color-conversation-blue_grey;
  }
  .module-message__attachment-container {
-    background-color: $color-black;
+    background-color: $color-gray-95;
  }
  .module-message__img-border-overlay {
-    box-shadow: inset 0px 0px 0px 1px rgba($color-dark-30, 0.25);
+    box-shadow: inset 0px 0px 0px 1px $color-white-015;
  }
  .module-message__img-overlay {
@@ -758,29 +761,29 @@ body.dark-theme {
  }
  .module-message__metadata__date {
-    color: $color-dark-30;
+    color: $color-white-08;
  }
  .module-message__metadata__date--incoming {
-    color: $color-white-07;
+    color: $color-white-08;
  }
  .module-message__metadata__date--with-image-no-caption {
-    color: $color-dark-05;
+    color: $color-white-08;
  }
  .module-message__metadata__status-icon--sending {
-    @include color-svg('../images/sending.svg', $color-light-35);
+    @include color-svg('../images/sending.svg', $color-white-08);
  }
  .module-message__metadata__status-icon--sent {
-    @include color-svg('../images/check-circle-outline.svg', $color-light-35);
+    @include color-svg('../images/check-circle-outline.svg', $color-white-08);
  }
  .module-message__metadata__status-icon--delivered {
-    @include color-svg('../images/double-check.svg', $color-light-35);
+    @include color-svg('../images/double-check.svg', $color-white-08);
  }
  .module-message__metadata__status-icon--read {
-    @include color-svg('../images/read.svg', $color-light-35);
+    @include color-svg('../images/read.svg', $color-white-08);
  }
  // When status indicators are overlaid on top of an image, they use different colors
@@ -794,23 +797,14 @@ body.dark-theme {
    border: 1px solid $color-dark-60;
  }
-  .module-message__author-default-avatar--grey {
+  .module-message__author-default-avatar--red {
-    background-color: $color-conversation-grey;
+    background-color: $color-conversation-red;
  }
  .module-message__author-default-avatar--blue {
    background-color: $color-conversation-blue;
  }
  .module-message__author-default-avatar--cyan {
    background-color: $color-conversation-cyan;
  }
  .module-message__author-default-avatar--deep_orange {
    background-color: $color-conversation-deep_orange;
  }
-  .module-message__author-default-avatar--green {
+  .module-message__author-default-avatar--brown {
-    background-color: $color-conversation-green;
+    background-color: $color-conversation-brown;
  }
  .module-message__author-default-avatar--indigo {
    background-color: $color-conversation-indigo;
  }
  .module-message__author-default-avatar--pink {
    background-color: $color-conversation-pink;
@@ -818,12 +812,24 @@ body.dark-theme {
  .module-message__author-default-avatar--purple {
    background-color: $color-conversation-purple;
  }
-  .module-message__author-default-avatar--red {
+  .module-message__author-default-avatar--indigo {
-    background-color: $color-conversation-red;
+    background-color: $color-conversation-indigo;
  }
  .module-message__author-default-avatar--blue {
    background-color: $color-conversation-blue;
  }
  .module-message__author-default-avatar--teal {
    background-color: $color-conversation-teal;
  }
  .module-message__author-default-avatar--green {
    background-color: $color-conversation-green;
  }
  .module-message__author-default-avatar--light_green {
    background-color: $color-conversation-light_green;
  }
  .module-message__author-default-avatar--blue_grey {
    background-color: $color-conversation-blue_grey;
  }
  .module-message__author-default-avatar__label {
    color: $color-white;
@@ -884,87 +890,127 @@ body.dark-theme {
  // Module: Quoted Reply
  .module-quote--incoming {
-    background-color: $color-black-04;
+    border-left-color: $color-conversation-grey;
-    border-left-color: $color-black;
+    background-color: $color-conversation-grey-shade;
  }
  .module-quote--incoming-red {
    border-left-color: $color-conversation-red;
    background-color: $color-conversation-red-shade;
  }
  .module-quote--incoming-deep_orange {
    border-left-color: $color-conversation-deep_orange;
    background-color: $color-conversation-deep_orange-shade;
  }
  .module-quote--incoming-brown {
    border-left-color: $color-conversation-brown;
    background-color: $color-conversation-brown-shade;
  }
  .module-quote--incoming-pink {
    border-left-color: $color-conversation-pink;
    background-color: $color-conversation-pink-shade;
  }
  .module-quote--incoming-purple {
    border-left-color: $color-conversation-purple;
    background-color: $color-conversation-purple-shade;
  }
  .module-quote--incoming-indigo {
    border-left-color: $color-conversation-indigo;
    background-color: $color-conversation-indigo-shade;
  }
  .module-quote--incoming-blue {
    border-left-color: $color-conversation-blue;
    background-color: $color-conversation-blue-shade;
  }
  .module-quote--incoming-teal {
    border-left-color: $color-conversation-teal;
    background-color: $color-conversation-teal-shade;
  }
  .module-quote--incoming-green {
    border-left-color: $color-conversation-green;
    background-color: $color-conversation-green-shade;
  }
  .module-quote--incoming-light_green {
    border-left-color: $color-conversation-light_green;
    background-color: $color-conversation-light_green-shade;
  }
  .module-quote--incoming-blue_grey {
    border-left-color: $color-conversation-blue_grey;
    background-color: $color-conversation-blue_grey-shade;
  }
-  .module-quote--outgoing-you {
+  .module-quote--outgoing {
-    border-left-color: $color-light-35;
+    border-left-color: $color-black;
-    background-color: $color-dark-60;
+    background-color: $color-conversation-grey-shade;
  }
  .module-quote--outgoing-grey {
    border-left-color: $color-conversation-grey;
    background-color: rgba($color-conversation-grey, 0.6);
  }
  .module-quote--outgoing-blue {
    border-left-color: $color-conversation-blue;
    background-color: rgba($color-conversation-blue, 0.6);
  }
  .module-quote--outgoing-cyan {
    border-left-color: $color-conversation-cyan;
    background-color: rgba($color-conversation-cyan, 0.6);
  }
  .module-quote--outgoing-deep_orange {
    border-left-color: $color-conversation-deep_orange;
    background-color: rgba($color-conversation-deep_orange, 0.6);
  }
  .module-quote--outgoing-green {
    border-left-color: $color-conversation-green;
    background-color: rgba($color-conversation-green, 0.6);
  }
  .module-quote--outgoing-indigo {
    border-left-color: $color-conversation-indigo;
    background-color: rgba($color-conversation-indigo, 0.6);
  }
  .module-quote--outgoing-pink {
    border-left-color: $color-conversation-pink;
    background-color: rgba($color-conversation-pink, 0.6);
  }
  .module-quote--outgoing-purple {
    border-left-color: $color-conversation-purple;
    background-color: rgba($color-conversation-purple, 0.6);
  }
  .module-quote--outgoing-red {
-    border-left-color: $color-conversation-red;
+    background-color: $color-conversation-red-shade;
-    background-color: rgba($color-conversation-red, 0.6);
+  }
  .module-quote--outgoing-deep_orange {
    background-color: $color-conversation-deep_orange-shade;
  }
  .module-quote--outgoing-brown {
    background-color: $color-conversation-brown-shade;
  }
  .module-quote--outgoing-pink {
    background-color: $color-conversation-pink-shade;
  }
  .module-quote--outgoing-purple {
    background-color: $color-conversation-purple-shade;
  }
  .module-quote--outgoing-indigo {
    background-color: $color-conversation-indigo-shade;
  }
  .module-quote--outgoing-blue {
    background-color: $color-conversation-blue-shade;
  }
  .module-quote--outgoing-teal {
-    border-left-color: $color-conversation-teal;
+    background-color: $color-conversation-teal-shade;
-    background-color: rgba($color-conversation-teal, 0.6);
+  }
  .module-quote--outgoing-green {
    background-color: $color-conversation-green-shade;
  }
  .module-quote--outgoing-light_green {
    background-color: $color-conversation-light_green-shade;
  }
  .module-quote--outgoing-blue_grey {
    background-color: $color-conversation-blue_grey-shade;
  }
  .module-quote__primary__author {
    color: $color-dark-05;
  }
-  .module-quote__primary__author--grey {
+  .module-quote__primary__author-red {
    color: $color-dark-05;
  }
-  .module-quote__primary__author--blue {
+  .module-quote__primary__author-deep_orange {
    color: $color-dark-05;
  }
-  .module-quote__primary__author--cyan {
+  .module-quote__primary__author-brown {
    color: $color-dark-05;
  }
-  .module-quote__primary__author--deep_orange {
+  .module-quote__primary__author-pink {
    color: $color-dark-05;
  }
-  .module-quote__primary__author--green {
+  .module-quote__primary__author-purple {
    color: $color-dark-05;
  }
-  .module-quote__primary__author--indigo {
+  .module-quote__primary__author-indigo {
    color: $color-dark-05;
  }
-  .module-quote__primary__author--pink {
+  .module-quote__primary__author-blue {
    color: $color-dark-05;
  }
-  .module-quote__primary__author--purple {
+  .module-quote__primary__author-teal {
    color: $color-dark-05;
  }
-  .module-quote__primary__author--red {
+  .module-quote__primary__author-green {
    color: $color-dark-05;
  }
-  .module-quote__primary__author--teal {
+  .module-quote__primary__author-light_green {
    color: $color-dark-05;
  }
  .module-quote__primary__author-blue_grey {
    color: $color-dark-05;
  }
@@ -1044,7 +1090,7 @@ body.dark-theme {
  }
  .module-embedded-contact__contact-method {
-    color: $color-dark-30;
+    color: $color-white-07;
  }
  .module-embedded-contact__contact-method--incoming {
@@ -1140,23 +1186,14 @@ body.dark-theme {
    background-color: $color-conversation-grey;
  }
-  .module-contact-list-item__avatar-default--grey {
+  .module-contact-list-item__avatar-default--red {
-    background-color: $color-conversation-grey;
+    background-color: $color-conversation-red;
  }
  .module-contact-list-item__avatar-default--blue {
    background-color: $color-conversation-blue;
  }
  .module-contact-list-item__avatar-default--cyan {
    background-color: $color-conversation-cyan;
  }
  .module-contact-list-item__avatar-default--deep_orange {
    background-color: $color-conversation-deep_orange;
  }
-  .module-contact-list-item__avatar-default--green {
+  .module-contact-list-item__avatar-default--brown {
-    background-color: $color-conversation-green;
+    background-color: $color-conversation-brown;
  }
  .module-contact-list-item__avatar-default--indigo {
    background-color: $color-conversation-indigo;
  }
  .module-contact-list-item__avatar-default--pink {
    background-color: $color-conversation-pink;
@@ -1164,12 +1201,24 @@ body.dark-theme {
  .module-contact-list-item__avatar-default--purple {
    background-color: $color-conversation-purple;
  }
-  .module-contact-list-item__avatar-default--red {
+  .module-contact-list-item__avatar-default--indigo {
-    background-color: $color-conversation-red;
+    background-color: $color-conversation-indigo;
  }
  .module-contact-list-item__avatar-default--blue {
    background-color: $color-conversation-blue;
  }
  .module-contact-list-item__avatar-default--teal {
    background-color: $color-conversation-teal;
  }
  .module-contact-list-item__avatar-default--green {
    background-color: $color-conversation-green;
  }
  .module-contact-list-item__avatar-default--light_green {
    background-color: $color-conversation-light_green;
  }
  .module-contact-list-item__avatar-default--blue_grey {
    background-color: $color-conversation-blue_grey;
  }
  .module-contact-list-item__avatar-default__label {
    color: $color-white;
@@ -1183,7 +1232,7 @@ body.dark-theme {
  .module-conversation-header {
    color: $color-dark-05;
-    background-color: $color-black;
+    background-color: $color-gray-95;
    border-bottom: 1px solid $color-light-60;
  }
@@ -1196,20 +1245,14 @@ body.dark-theme {
    color: $color-white;
  }
-  .module-conversation-header___default-avatar--blue {
+  .module-conversation-header___default-avatar--red {
-    background-color: $color-conversation-blue;
+    background-color: $color-conversation-red;
  }
  .module-conversation-header___default-avatar--cyan {
    background-color: $color-conversation-cyan;
  }
  .module-conversation-header___default-avatar--deep_orange {
    background-color: $color-conversation-deep_orange;
  }
-  .module-conversation-header___default-avatar--green {
+  .module-conversation-header___default-avatar--brown {
-    background-color: $color-conversation-green;
+    background-color: $color-conversation-brown;
  }
  .module-conversation-header___default-avatar--indigo {
    background-color: $color-conversation-indigo;
  }
  .module-conversation-header___default-avatar--pink {
    background-color: $color-conversation-pink;
@@ -1217,12 +1260,24 @@ body.dark-theme {
  .module-conversation-header___default-avatar--purple {
    background-color: $color-conversation-purple;
  }
-  .module-conversation-header___default-avatar--red {
+  .module-conversation-header___default-avatar--indigo {
-    background-color: $color-conversation-red;
+    background-color: $color-conversation-indigo;
  }
  .module-conversation-header___default-avatar--blue {
    background-color: $color-conversation-blue;
  }
  .module-conversation-header___default-avatar--teal {
    background-color: $color-conversation-teal;
  }
  .module-conversation-header___default-avatar--green {
    background-color: $color-conversation-green;
  }
  .module-conversation-header___default-avatar--light_green {
    background-color: $color-conversation-light_green;
  }
  .module-conversation-header___default-avatar--blue_grey {
    background-color: $color-conversation-blue_grey;
  }
  .module-conversation-header__title {
    color: $color-dark-05;
@@ -1258,20 +1313,14 @@ body.dark-theme {
    color: $color-white;
  }
-  .module-message-detail__contact__default-avatar--blue {
+  .module-message-detail__contact__default-avatar--red {
-    background-color: $color-conversation-blue;
+    background-color: $color-conversation-red;
  }
  .module-message-detail__contact__default-avatar--cyan {
    background-color: $color-conversation-cyan;
  }
  .module-message-detail__contact__default-avatar--deep_orange {
    background-color: $color-conversation-deep_orange;
  }
-  .module-message-detail__contact__default-avatar--green {
+  .module-message-detail__contact__default-avatar--brown {
-    background-color: $color-conversation-green;
+    background-color: $color-conversation-brown;
  }
  .module-message-detail__contact__default-avatar--indigo {
    background-color: $color-conversation-indigo;
  }
  .module-message-detail__contact__default-avatar--pink {
    background-color: $color-conversation-pink;
@@ -1279,12 +1328,24 @@ body.dark-theme {
  .module-message-detail__contact__default-avatar--purple {
    background-color: $color-conversation-purple;
  }
-  .module-message-detail__contact__default-avatar--red {
+  .module-message-detail__contact__default-avatar--indigo {
-    background-color: $color-conversation-red;
+    background-color: $color-conversation-indigo;
  }
  .module-message-detail__contact__default-avatar--blue {
    background-color: $color-conversation-blue;
  }
  .module-message-detail__contact__default-avatar--teal {
    background-color: $color-conversation-teal;
  }
  .module-message-detail__contact__default-avatar--green {
    background-color: $color-conversation-green;
  }
  .module-message-detail__contact__default-avatar--light_green {
    background-color: $color-conversation-light_green;
  }
  .module-message-detail__contact__default-avatar--blue_grey {
    background-color: $color-conversation-blue_grey;
  }
  .module-message-detail__contact__error {
    color: $color-core-red;
@@ -1381,20 +1442,14 @@ body.dark-theme {
    background-color: $color-conversation-grey;
  }
-  .module-conversation-list-item__default-avatar--blue {
+  .module-conversation-list-item__default-avatar--red {
-    background-color: $color-conversation-blue;
+    background-color: $color-conversation-red;
  }
  .module-conversation-list-item__default-avatar--cyan {
    background-color: $color-conversation-cyan;
  }
  .module-conversation-list-item__default-avatar--deep_orange {
    background-color: $color-conversation-deep_orange;
  }
-  .module-conversation-list-item__default-avatar--green {
+  .module-conversation-list-item__default-avatar--brown {
-    background-color: $color-conversation-green;
+    background-color: $color-conversation-brown;
  }
  .module-conversation-list-item__default-avatar--indigo {
    background-color: $color-conversation-indigo;
  }
  .module-conversation-list-item__default-avatar--pink {
    background-color: $color-conversation-pink;
@@ -1402,12 +1457,24 @@ body.dark-theme {
  .module-conversation-list-item__default-avatar--purple {
    background-color: $color-conversation-purple;
  }
-  .module-conversation-list-item__default-avatar--red {
+  .module-conversation-list-item__default-avatar--indigo {
-    background-color: $color-conversation-red;
+    background-color: $color-conversation-indigo;
  }
  .module-conversation-list-item__default-avatar--blue {
    background-color: $color-conversation-blue;
  }
  .module-conversation-list-item__default-avatar--teal {
    background-color: $color-conversation-teal;
  }
  .module-conversation-list-item__default-avatar--green {
    background-color: $color-conversation-green;
  }
  .module-conversation-list-item__default-avatar--light_green {
    background-color: $color-conversation-light_green;
  }
  .module-conversation-list-item__default-avatar--blue_grey {
    background-color: $color-conversation-blue_grey;
  }
  .module-conversation-list-item__message__status-icon--sending {
    @include color-svg('../images/sending.svg', $color-light-35);
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -35,11 +35,64 @@ $color-signal-blue-025: rgba($color-signal-blue, 0.25);
 $color-signal-blue-050: rgba($color-signal-blue, 0.5);
 $color-white: #ffffff;
 $color-gray-02: #f8f9f9;
 $color-gray-05: #eeefef;
 $color-gray-15: #d5d6d6;
 $color-gray-25: #bbbdbe;
 $color-gray-45: #898a8c;
 $color-gray-60: #636467;
 $color-gray-75: #3d3e44;
 $color-gray-85: #23252a;
 $color-gray-90: #17191d;
 $color-gray-95: #0f1012;
 $color-black: #000000;
 $color-crimson: #cc163d;
 $color-vermilion: #c73800;
 $color-burlap: #746c53;
 $color-forest: #3b7845;
 $color-wintergreen: #1c8260;
 $color-teal: #067589;
 $color-blue: #336ba3;
 $color-indigo: #5951c8;
 $color-violet: #862caf;
 $color-plum: #a23474;
 $color-taupe: #895d66;
 $color-steel: #6b6b78;
 $color-crimson-tint: #eda6ae;
 $color-vermilion-tint: #eba78e;
 $color-burlap-tint: #c4b997;
 $color-forest-tint: #8fcc9a;
 $color-wintergreen-tint: #9bcfbd;
 $color-teal-tint: #a5cad5;
 $color-blue-tint: #adc8e1;
 $color-indigo-tint: #c2c1e7;
 $color-violet-tint: #cdaddc;
 $color-plum-tint: #dcb2ca;
 $color-taupe-tint: #cfb5bb;
 $color-steel-tint: #bebec6;
 $color-crimson-shade: #8a0f29;
 $color-vermilion-shade: #872600;
 $color-burlap-shade: #58513c;
 $color-forest-shade: #2b5934;
 $color-wintergreen-shade: #36544a;
 $color-teal-shade: #055968;
 $color-blue-shade: #285480;
 $color-indigo-shade: #4840a0;
 $color-violet-shade: #6b248a;
 $color-plum-shade: #881b5b;
 $color-taupe-shade: #6a4e54;
 $color-steel-shade: #5a5a63;
 $color-white-015: rgba($color-white, 0.15);
 $color-white-02: rgba($color-white, 0.2);
 $color-white-04: rgba($color-white, 0.4);
 $color-white-06: rgba($color-white, 0.6);
 $color-white-07: rgba($color-white, 0.7);
 $color-white-075: rgba($color-white, 0.75);
 $color-white-08: rgba($color-white, 0.8);
 $color-white-085: rgba($color-white, 0.85);
 $color-light-02: #f9fafa;
 $color-light-10: #eeefef;
@@ -54,27 +107,55 @@ $color-dark-55: #88898c;
 $color-dark-60: #797a7c;
 $color-dark-70: #414347;
 $color-dark-85: #1a1c20;
 $color-black: #000000;
 $color-black-008: rgba($color-black, 0.08);
 $color-black-008-no-tranparency: #ededed;
 $color-black-016-no-tranparency: #d9d9d9;
 $color-black-012: rgba($color-black, 0.12);
 $color-black-015: rgba($color-black, 0.15);
 $color-black-02: rgba($color-black, 0.2);
 $color-black-04: rgba($color-black, 0.4);
 $color-black-06: rgba($color-black, 0.6);
 $color-signal-blue-mix: mix($color-signal-blue-025, $color-white-04);
-$color-conversation-grey: #757575;
+$color-conversation-red: $color-crimson;
-$color-conversation-blue: #1976d2;
+$color-conversation-deep_orange: $color-vermilion;
-$color-conversation-cyan: #00838f;
+$color-conversation-brown: $color-burlap;
-$color-conversation-deep_orange: #bf360c;
+$color-conversation-pink: $color-plum;
-$color-conversation-green: #2e7d32;
+$color-conversation-purple: $color-violet;
-$color-conversation-indigo: #3949ab;
+$color-conversation-indigo: $color-indigo;
-$color-conversation-pink: #d81b60;
+$color-conversation-blue: $color-blue;
-$color-conversation-purple: #8e24aa;
+$color-conversation-teal: $color-teal;
-$color-conversation-red: #d32f2f;
+$color-conversation-green: $color-forest;
-$color-conversation-teal: #00796b;
+$color-conversation-light_green: $color-wintergreen;
 $color-conversation-blue_grey: $color-taupe;
 $color-conversation-grey: $color-steel;
 $color-conversation-red-tint: $color-crimson-tint;
 $color-conversation-deep_orange-tint: $color-vermilion-tint;
 $color-conversation-brown-tint: $color-burlap-tint;
 $color-conversation-pink-tint: $color-plum-tint;
 $color-conversation-purple-tint: $color-violet-tint;
 $color-conversation-indigo-tint: $color-indigo-tint;
 $color-conversation-blue-tint: $color-blue-tint;
 $color-conversation-teal-tint: $color-teal-tint;
 $color-conversation-green-tint: $color-forest-tint;
 $color-conversation-light_green-tint: $color-wintergreen-tint;
 $color-conversation-blue_grey-tint: $color-taupe-tint;
 $color-conversation-grey-tint: $color-steel-tint;
 $color-conversation-red-shade: $color-crimson-shade;
 $color-conversation-deep_orange-shade: $color-vermilion-shade;
 $color-conversation-brown-shade: $color-burlap-shade;
 $color-conversation-pink-shade: $color-plum-shade;
 $color-conversation-purple-shade: $color-violet-shade;
 $color-conversation-indigo-shade: $color-indigo-shade;
 $color-conversation-blue-shade: $color-blue-shade;
 $color-conversation-teal-shade: $color-teal-shade;
 $color-conversation-green-shade: $color-forest-shade;
 $color-conversation-light_green-shade: $color-wintergreen-shade;
 $color-conversation-blue_grey-shade: $color-taupe-shade;
 $color-conversation-grey-shade: $color-steel-shade;
 // Old colors
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -18,7 +18,6 @@
 // Themes
@import 'theme_dark';
@import 'ios';
 // New CSS
@import 'modules';
--- a/ts/components/conversation/EmbeddedContact.md
+++ b/ts/components/conversation/EmbeddedContact.md
@@ -22,10 +22,10 @@ const contact = {
  onSendMessage: () => console.log('onSendMessage'),
  hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme} ios={util.ios}>
+<util.ConversationContext theme={util.theme}>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -34,6 +34,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -43,7 +44,7 @@ const contact = {
  </li>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -53,6 +54,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -84,19 +86,24 @@ const contact = {
  },
  hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme} ios={util.ios}>
+<util.ConversationContext theme={util.theme}>
-  <li><Message
+  <li>
-    authorColor="green"
+    <Message
    conversationColor="green"
    direction="incoming"
    i18n={util.i18n}
    timestamp={Date.now()}
-    contact={contact}/></li>
+    contact={contact}/>
-  <li><Message
+  </li>
  <li>
  <Message
    conversationColor="green"
    direction="outgoing"
    status="delivered"
    i18n={util.i18n}
    timestamp={Date.now()}
-    contact={contact}/></li>
+    contact={contact}/>
  </li>
 </util.ConversationContext>;
 ```
@@ -120,10 +127,10 @@ const contact = {
  },
  hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme} ios={util.ios} type="group">
+<util.ConversationContext theme={util.theme} type="group">
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      conversationType="group"
      authorName="Mr. Fire"
      authorAvatarPath={util.gifObjectUrl}
@@ -135,7 +142,7 @@ const contact = {
  </li>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      authorName="Mr. Fire"
      conversationType="group"
@@ -147,6 +154,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      conversationType="group"
      authorName="Mr. Fire"
@@ -179,10 +187,10 @@ const contact = {
  },
  hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme} ios={util.ios}>
+<util.ConversationContext theme={util.theme}>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -191,6 +199,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -200,7 +209,7 @@ const contact = {
  </li>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -210,6 +219,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -239,10 +249,10 @@ const contact = {
  },
  hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme} ios={util.ios}>
+<util.ConversationContext theme={util.theme}>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -251,6 +261,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -260,7 +271,7 @@ const contact = {
  </li>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -270,6 +281,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -301,10 +313,10 @@ const contact = {
  },
  hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme} ios={util.ios}>
+<util.ConversationContext theme={util.theme}>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -313,6 +325,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -322,7 +335,7 @@ const contact = {
  </li>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -332,6 +345,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -358,10 +372,10 @@ const contact = {
  ],
  hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme} ios={util.ios}>
+<util.ConversationContext theme={util.theme}>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -370,6 +384,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -379,7 +394,7 @@ const contact = {
  </li>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -389,6 +404,7 @@ const contact = {
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -404,10 +420,10 @@ const contact = {
 ```jsx
 const contact = {};
-<util.ConversationContext theme={util.theme} ios={util.ios}>
+<util.ConversationContext theme={util.theme}>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -416,6 +432,7 @@ const contact = {};
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -425,7 +442,7 @@ const contact = {};
  </li>
  <li>
    <Message
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -435,6 +452,7 @@ const contact = {};
  </li>
  <li>
    <Message
      conversationColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -483,11 +501,11 @@ const contactWithoutAccount = {
  },
  hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme} ios={util.ios}>
+<util.ConversationContext theme={util.theme}>
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -497,6 +515,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
      conversationColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -507,7 +526,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
@@ -517,6 +536,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
      conversationColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
@@ -527,7 +547,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -538,6 +558,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
      conversationColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
@@ -549,7 +570,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
-      authorColor="green"
+      conversationColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
@@ -560,6 +581,7 @@ const contactWithoutAccount = {
  <li>
    <Message
      text="I want to introduce you to Someone..."
      conversationColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
--- a/ts/components/conversation/ExpireTimer.md
+++ b/ts/components/conversation/ExpireTimer.md
@@ -1,11 +1,12 @@
 ### Countdown at different rates
 ```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios}>
+<util.ConversationContext theme={util.theme}>
  <li>
    <Message
-      authorColor="cyan"
+      conversationColor="blue"
-      direction="incoming"
+      direction="outgoing"
      status="delivered"
      text="10 second timer"
      i18n={util.i18n}
      timestamp={Date.now() + 10 * 1000}
@@ -15,8 +16,9 @@
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="cyan"
+      status="delivered"
      conversationColor="blue"
      text="30 second timer"
      i18n={util.i18n}
      timestamp={Date.now() + 30 * 1000}
@@ -26,8 +28,9 @@
  </li>
  <li>
    <Message
-      authorColor="cyan"
+      conversationColor="blue"
-      direction="incoming"
+      direction="outgoing"
      status="delivered"
      text="1 minute timer"
      i18n={util.i18n}
      timestamp={Date.now() + 55 * 1000}
@@ -37,8 +40,9 @@
  </li>
  <li>
    <Message
-      authorColor="cyan"
+      conversationColor="blue"
-      direction="incoming"
+      direction="outgoing"
      status="delivered"
      text="5 minute timer"
      i18n={util.i18n}
      timestamp={Date.now() + 5 * 60 * 1000}
@@ -52,10 +56,10 @@
 ### Timer calculations
 ```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios}>
+<util.ConversationContext theme={util.theme}>
  <li>
    <Message
-      authorColor="cyan"
+      conversationColor="blue"
      direction="incoming"
      text="Full timer"
      i18n={util.i18n}
@@ -66,6 +70,7 @@
  </li>
  <li>
    <Message
      conversationColor="blue"
      direction="outgoing"
      status="delivered"
      text="Full timer"
@@ -77,7 +82,7 @@
  </li>
  <li>
    <Message
-      authorColor="cyan"
+      conversationColor="blue"
      direction="incoming"
      text="55 timer"
      i18n={util.i18n}
@@ -88,6 +93,7 @@
  </li>
  <li>
    <Message
      conversationColor="blue"
      direction="outgoing"
      status="delivered"
      text="55 timer"
@@ -99,7 +105,7 @@
  </li>
  <li>
    <Message
-      authorColor="cyan"
+      conversationColor="blue"
      direction="incoming"
      text="30 timer"
      i18n={util.i18n}
@@ -110,6 +116,7 @@
  </li>
  <li>
    <Message
      conversationColor="blue"
      direction="outgoing"
      status="delivered"
      text="30 timer"
@@ -121,7 +128,7 @@
  </li>
  <li>
    <Message
-      authorColor="cyan"
+      conversationColor="blue"
      direction="incoming"
      text="5 timer"
      i18n={util.i18n}
@@ -132,6 +139,7 @@
  </li>
  <li>
    <Message
      conversationColor="blue"
      direction="outgoing"
      status="delivered"
      text="5 timer"
@@ -143,7 +151,7 @@
  </li>
  <li>
    <Message
-      authorColor="cyan"
+      conversationColor="blue"
      direction="incoming"
      text="Expired timer"
      i18n={util.i18n}
@@ -154,6 +162,7 @@
  </li>
  <li>
    <Message
      conversationColor="blue"
      direction="outgoing"
      status="delivered"
      text="Expired timer"
@@ -165,7 +174,7 @@
  </li>
  <li>
    <Message
-      authorColor="cyan"
+      conversationColor="blue"
      direction="incoming"
      text="Expiration is too far away"
      i18n={util.i18n}
@@ -176,6 +185,7 @@
  </li>
  <li>
    <Message
      conversationColor="blue"
      direction="outgoing"
      status="delivered"
      text="Expiration is too far away"
@@ -187,7 +197,7 @@
  </li>
  <li>
    <Message
-      authorColor="cyan"
+      conversationColor="blue"
      direction="incoming"
      text="Already expired"
      i18n={util.i18n}
@@ -198,6 +208,7 @@
  </li>
  <li>
    <Message
      conversationColor="blue"
      direction="outgoing"
      status="delivered"
      text="Already expired"
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -66,7 +66,7 @@ export interface Props {
  authorProfileName?: string;
  /** Note: this should be formatted for display */
  authorPhoneNumber: string;
-  authorColor: Color;
+  conversationColor: Color;
  conversationType: 'group' | 'direct';
  attachment?: Attachment;
  quote?: {
@@ -76,7 +76,6 @@ export interface Props {
    authorPhoneNumber: string;
    authorProfileName?: string;
    authorName?: string;
    authorColor: Color;
    onClick?: () => void;
    referencedMessageNotFound: boolean;
  };
@@ -551,7 +550,13 @@ export class Message extends React.Component<Props, State> {
  }
  public renderQuote() {
-    const { conversationType, direction, i18n, quote } = this.props;
+    const {
      conversationType,
      conversationColor,
      direction,
      i18n,
      quote,
    } = this.props;
    if (!quote) {
      return null;
@@ -570,7 +575,7 @@ export class Message extends React.Component<Props, State> {
        authorPhoneNumber={quote.authorPhoneNumber}
        authorProfileName={quote.authorProfileName}
        authorName={quote.authorName}
-        authorColor={quote.authorColor}
+        conversationColor={conversationColor}
        referencedMessageNotFound={quote.referencedMessageNotFound}
        isFromMe={quote.isFromMe}
        withContentAbove={withContentAbove}
@@ -632,7 +637,7 @@ export class Message extends React.Component<Props, State> {
      authorPhoneNumber,
      authorProfileName,
      authorAvatarPath,
-      authorColor,
+      conversationColor,
      collapseMetadata,
      conversationType,
      direction,
@@ -658,7 +663,7 @@ export class Message extends React.Component<Props, State> {
        <div
          className={classNames(
            'module-message__author-default-avatar',
-            `module-message__author-default-avatar--${authorColor}`
+            `module-message__author-default-avatar--${conversationColor}`
          )}
        >
          <div className="module-message__author-default-avatar__label">
@@ -864,7 +869,7 @@ export class Message extends React.Component<Props, State> {
  public render() {
    const {
      authorPhoneNumber,
-      authorColor,
+      conversationColor,
      direction,
      id,
      timestamp,
@@ -893,8 +898,8 @@ export class Message extends React.Component<Props, State> {
          className={classNames(
            'module-message__container',
            `module-message__container--${direction}`,
-            direction === 'incoming'
+            direction === 'outgoing'
-              ? `module-message__container--incoming-${authorColor}`
+              ? `module-message__container--outgoing-${conversationColor}`
              : null
          )}
        >
--- a/ts/components/conversation/MessageDetail.md
+++ b/ts/components/conversation/MessageDetail.md
@@ -6,7 +6,7 @@
    disableMenu: true,
    direction: 'incoming',
    timestamp: Date.now(),
-    authorColor: 'grey',
+    conversationColor: 'pink',
    text:
      'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
    onDelete: () => console.log('onDelete'),
@@ -31,7 +31,7 @@
    disableMenu: true,
    direction: 'outgoing',
    timestamp: Date.now(),
-    authorColor: 'grey',
+    conversationColor: 'pink',
    text:
      'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
    status: 'read',
@@ -68,7 +68,7 @@
    disableMenu: true,
    direction: 'outgoing',
    timestamp: Date.now(),
-    authorColor: 'grey',
+    conversationColor: 'pink',
    text:
      'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
    status: 'sending',
@@ -94,7 +94,7 @@
    disableMenu: true,
    direction: 'outgoing',
    timestamp: Date.now(),
-    authorColor: 'grey',
+    conversationColor: 'pink',
    text:
      'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
    status: 'error',
--- a/ts/components/conversation/Quote.md
+++ b/ts/components/conversation/Quote.md
--- a/ts/components/conversation/Quote.tsx
+++ b/ts/components/conversation/Quote.tsx
@@ -15,7 +15,7 @@ interface Props {
  authorPhoneNumber: string;
  authorProfileName?: string;
  authorName?: string;
-  authorColor: Color;
+  conversationColor: Color;
  i18n: Localizer;
  isFromMe: boolean;
  isIncoming: boolean;
@@ -254,7 +254,6 @@ export class Quote extends React.Component<Props> {
      authorProfileName,
      authorPhoneNumber,
      authorName,
      authorColor,
      i18n,
      isFromMe,
      isIncoming,
@@ -264,7 +263,6 @@ export class Quote extends React.Component<Props> {
      <div
        className={classNames(
          'module-quote__primary__author',
          !isFromMe ? `module-quote__primary__author--${authorColor}` : null,
          isIncoming ? 'module-quote__primary__author--incoming' : null
        )}
      >
@@ -320,8 +318,7 @@ export class Quote extends React.Component<Props> {
  public render() {
    const {
-      authorColor,
+      conversationColor,
      isFromMe,
      isIncoming,
      onClick,
      referencedMessageNotFound,
@@ -345,10 +342,9 @@ export class Quote extends React.Component<Props> {
          className={classNames(
            'module-quote',
            isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
-            !isIncoming && !isFromMe
+            isIncoming
-              ? `module-quote--outgoing-${authorColor}`
+              ? `module-quote--incoming-${conversationColor}`
-              : null,
+              : `module-quote--outgoing-${conversationColor}`,
            !isIncoming && isFromMe ? 'module-quote--outgoing-you' : null,
            !onClick ? 'module-quote--no-click' : null,
            withContentAbove ? 'module-quote--with-content-above' : null,
            referencedMessageNotFound
--- a/ts/components/conversation/Timestamp.md
+++ b/ts/components/conversation/Timestamp.md
@@ -21,8 +21,9 @@ function getDecember1159() {
 <util.ConversationContext theme={util.theme}>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="red"
+      status="delivered"
      conversationColor="red"
      timestamp={Date.now() - 500}
      text="500ms ago - all below 1 minute are 'now'"
      i18n={util.i18n}
@@ -30,8 +31,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="teal"
+      status="delivered"
      conversationColor="teal"
      timestamp={Date.now() - 5 * 1000}
      text="Five seconds ago"
      i18n={util.i18n}
@@ -39,8 +41,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="teal"
+      status="delivered"
      conversationColor="teal"
      timestamp={Date.now() - 30 * 1000}
      text="30 seconds ago"
      i18n={util.i18n}
@@ -48,8 +51,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="red"
+      status="delivered"
      conversationColor="red"
      timestamp={Date.now() - 60 * 1000}
      text="One minute ago - in minutes"
      i18n={util.i18n}
@@ -57,8 +61,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="teal"
+      status="delivered"
      conversationColor="teal"
      timestamp={Date.now() - 30 * 60 * 1000}
      text="30 minutes ago"
      i18n={util.i18n}
@@ -66,8 +71,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="teal"
+      status="delivered"
      conversationColor="teal"
      timestamp={Date.now() - 45 * 60 * 1000}
      text="45 minutes ago (used to round up to 1 hour with moment)"
      i18n={util.i18n}
@@ -75,8 +81,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="red"
+      status="delivered"
      conversationColor="red"
      timestamp={Date.now() - 60 * 60 * 1000}
      text="One hour ago - in hours"
      i18n={util.i18n}
@@ -84,8 +91,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="teal"
+      status="delivered"
      conversationColor="teal"
      timestamp={get1201()}
      text="12:01am today"
      i18n={util.i18n}
@@ -93,8 +101,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="red"
+      status="delivered"
      conversationColor="red"
      timestamp={getYesterday1159()}
      text="11:59pm yesterday - adds day name"
      i18n={util.i18n}
@@ -102,8 +111,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="teal"
+      status="delivered"
      conversationColor="teal"
      timestamp={Date.now() - 24 * 60 * 60 * 1000}
      text="24 hours ago"
      i18n={util.i18n}
@@ -111,8 +121,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="teal"
+      status="delivered"
      conversationColor="teal"
      timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
      text="Two days ago"
      i18n={util.i18n}
@@ -120,8 +131,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="red"
+      status="delivered"
      conversationColor="red"
      timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
      text="Seven days ago - adds month"
      i18n={util.i18n}
@@ -129,8 +141,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="teal"
+      status="delivered"
      conversationColor="teal"
      timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
      text="Thirty days ago"
      i18n={util.i18n}
@@ -138,8 +151,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="teal"
+      status="delivered"
      conversationColor="teal"
      timestamp={getJanuary1201()}
      text="January 1st at 12:01am"
      i18n={util.i18n}
@@ -147,8 +161,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="red"
+      status="delivered"
      conversationColor="red"
      timestamp={getDecember1159()}
      text="December 31st at 11:59pm - adds year"
      i18n={util.i18n}
@@ -156,8 +171,9 @@ function getDecember1159() {
  </li>
  <li>
    <Message
-      direction="incoming"
+      direction="outgoing"
-      authorColor="teal"
+      status="delivered"
      conversationColor="teal"
      timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
      text="One year ago"
      i18n={util.i18n}
--- a/ts/styleguide/ConversationContext.tsx
+++ b/ts/styleguide/ConversationContext.tsx
@@ -7,7 +7,6 @@ interface Props {
   */
  theme: 'light-theme' | 'dark-theme';
  type: 'private' | 'group';
  ios: boolean;
 }
 /**
@@ -16,12 +15,10 @@ interface Props {
 */
 export class ConversationContext extends React.Component<Props> {
  public render() {
-    const { theme, type, ios } = this.props;
+    const { theme, type } = this.props;
    return (
-      <div
+      <div className={classNames(theme || 'light-theme')}>
        className={classNames(theme || 'light-theme', ios ? 'ios-theme' : null)}
      >
        <div className={classNames('conversation', type || 'private')}>
          <div className="discussion-container" style={{ padding: '0.5em' }}>
            <ul className="message-list">{this.props.children}</ul>
--- a/ts/styleguide/StyleGuideUtil.ts
+++ b/ts/styleguide/StyleGuideUtil.ts
@@ -82,7 +82,6 @@ export {
 const query = window.location.search.replace(/^\?/, '');
 const urlOptions = QueryString.parse(query);
 const theme = urlOptions.theme || 'light-theme';
 const ios = urlOptions.ios || false;
 const locale = urlOptions.locale || 'en';
 // @ts-ignore
@@ -92,7 +91,7 @@ import localeMessages from '../../_locales/en/messages.json';
 import { setup } from '../../js/modules/i18n';
 const i18n = setup(locale, localeMessages);
-export { theme, ios, locale, i18n };
+export { theme, locale, i18n };
 // Telling Lodash to relinquish _ for use by underscore
 // @ts-ignore
--- a/ts/util/migrateColor.ts
+++ b/ts/util/migrateColor.ts
@@ -22,22 +22,28 @@ type OldColor =
  | 'yellow';
 type NewColor =
-  | 'blue'
+  | 'red'
  | 'cyan'
  | 'deep_orange'
-  | 'grey'
+  | 'brown'
  | 'green'
  | 'indigo'
  | 'pink'
  | 'purple'
-  | 'red'
+  | 'indigo'
-  | 'teal';
+  | 'blue'
  | 'teal'
  | 'green'
  | 'light_green'
  | 'blue_grey'
  | 'grey';
 export function migrateColor(color: OldColor): NewColor {
  switch (color) {
    // These colors no longer exist
-    case 'brown':
+    case 'orange':
-      return 'red';
+    case 'amber':
      return 'deep_orange';
    case 'yellow':
      return 'brown';
    case 'deep_purple':
      return 'purple';
@@ -45,29 +51,25 @@ export function migrateColor(color: OldColor): NewColor {
    case 'light_blue':
      return 'blue';
-    case 'blue_grey':
+    case 'cyan':
-      return 'cyan';
+      return 'teal';
    case 'light_green':
    case 'lime':
-      return 'green';
+      return 'light_green';
    case 'orange':
    case 'amber':
    case 'yellow':
      return 'deep_orange';
    // These can stay as they are
-    case 'blue':
+    case 'red':
    case 'cyan':
    case 'deep_orange':
-    case 'green':
+    case 'brown':
    case 'grey':
    case 'indigo':
    case 'pink':
    case 'purple':
-    case 'red':
+    case 'indigo':
    case 'blue':
    case 'teal':
    case 'green':
    case 'light_green':
    case 'blue_grey':
    case 'grey':
      return color;
    // Can uncomment this to ensure that we've covered all potential cases