diff --git a/js/background.js b/js/background.js
index 68df6a812..81cbf9de8 100644
--- a/js/background.js
+++ b/js/background.js
@@ -766,6 +766,7 @@
     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(
diff --git a/js/models/conversations.js b/js/models/conversations.js
index a7652b810..ca2c8c168 100644
--- a/js/models/conversations.js
+++ b/js/models/conversations.js
@@ -1374,6 +1374,10 @@
     },
 
     getColor() {
+      if (!this.isPrivate()) {
+        return null;
+      }
+
       const { migrateColor } = Util;
       return migrateColor(this.get('color'));
     },
diff --git a/js/models/messages.js b/js/models/messages.js
index a1e848137..2beca3b94 100644
--- a/js/models/messages.js
+++ b/js/models/messages.js
@@ -393,6 +393,7 @@
       const contact = this.findAndFormatContact(phoneNumber);
       const contactModel = this.findContact(phoneNumber);
 
+      const authorColor = contactModel ? contactModel.getColor() : null;
       const authorAvatarPath = contactModel
         ? contactModel.getAvatarPath()
         : null;
@@ -406,7 +407,6 @@
 
       const conversation = this.getConversation();
       const isGroup = conversation && !conversation.isPrivate();
-      const conversationColor = conversation && conversation.getColor();
 
       const attachments = this.get('attachments');
       const firstAttachment = attachments && attachments[0];
@@ -418,10 +418,10 @@
         timestamp: this.get('sent_at'),
         status: this.getMessagePropStatus(),
         contact: this.getPropsForEmbeddedContact(),
+        authorColor,
         authorName: contact.name,
         authorProfileName: contact.profileName,
         authorPhoneNumber: contact.phoneNumber,
-        conversationColor,
         conversationType: isGroup ? 'group' : 'direct',
         attachment: this.getPropsForAttachment(firstAttachment),
         quote: this.getPropsForQuote(),
@@ -534,9 +534,9 @@
       const { format } = PhoneNumber;
       const regionCode = storage.get('regionCode');
 
-      const conversation = this.getConversation();
       const { author, id, referencedMessageNotFound } = quote;
       const contact = author && ConversationController.get(author);
+      const authorColor = contact ? contact.getColor() : 'grey';
 
       const authorPhoneNumber = format(author, {
         ourRegionCode: regionCode,
@@ -563,7 +563,7 @@
         authorPhoneNumber,
         authorProfileName,
         authorName,
-        conversationColor: conversation && conversation.getColor(),
+        authorColor,
         onClick,
         referencedMessageNotFound,
       };
diff --git a/js/views/app_view.js b/js/views/app_view.js
index 65dc701c3..1db6314e3 100644
--- a/js/views/app_view.js
+++ b/js/views/app_view.js
@@ -21,11 +21,18 @@
       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);
diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
new file mode 100644
index 000000000..e10e76b25
--- /dev/null
+++ b/stylesheets/_ios.scss
@@ -0,0 +1,291 @@
+// 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-gray-90;
+  }
+
+  .module-message__author {
+    color: $color-gray-90;
+  }
+
+  .module-message__text {
+    color: $color-white;
+    font-size: 14px;
+    a {
+      text-decoration: underline;
+      color: $color-white;
+    }
+  }
+
+  .module-message__text--incoming {
+    color: $color-gray-90;
+    a {
+      text-decoration: underline;
+      color: $color-gray-90;
+    }
+  }
+
+  .module-message__metadata__date {
+    color: $color-white-08;
+  }
+  .module-message__metadata__date--incoming {
+    color: $color-gray-60;
+  }
+  .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-08);
+  }
+  .module-message__metadata__status-icon--delivered {
+    @include color-svg('../images/double-check.svg', $color-white-08);
+  }
+  .module-message__metadata__status-icon--read {
+    @include color-svg('../images/read.svg', $color-white-08);
+  }
+
+  .module-message__metadata__status-icon--with-image-no-caption {
+    background-color: $color-white;
+  }
+
+  .module-message__generic-attachment__file-name {
+    color: $color-white;
+  }
+
+  .module-message__generic-attachment__file-name--incoming {
+    color: $color-gray-90;
+  }
+
+  .module-message__generic-attachment__file-size {
+    color: $color-white;
+  }
+
+  .module-message__generic-attachment__file-size--incoming {
+    color: $color-gray-90;
+  }
+
+  .module-expire-timer {
+    background-color: $color-white-08;
+  }
+
+  .module-expire-timer--incoming {
+    background-color: $color-gray-60;
+  }
+
+  .module-quote--outgoing {
+    border-left-color: $color-white;
+    background-color: $color-white-06;
+  }
+
+  .module-quote--incoming {
+    background-color: $color-signal-blue-025;
+    border-left-color: $color-signal-blue;
+  }
+
+  .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-gray-90;
+  }
+
+  .module-embedded-contact__contact-method--incoming {
+    color: $color-light-60;
+  }
+
+  &.dark-theme {
+    // _modules
+
+    .module-message__container--outgoing {
+      background-color: $color-signal-blue;
+      color: $color-gray-05;
+    }
+
+    .module-message__container--incoming {
+      background-color: $color-gray-75;
+      color: $color-gray-05;
+    }
+
+    .module-message__author {
+      color: $color-gray-05;
+    }
+
+    .module-message__text--incoming {
+      color: $color-gray-05;
+      a {
+        text-decoration: underline;
+        color: $color-gray-05;
+      }
+    }
+
+    .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-08);
+    }
+    .module-message__metadata__status-icon--delivered {
+      @include color-svg('../images/double-check.svg', $color-white-08);
+    }
+    .module-message__metadata__status-icon--read {
+      @include color-svg('../images/read.svg', $color-white-08);
+    }
+
+    .module-message__metadata__date {
+      color: $color-white-08;
+    }
+
+    .module-message__metadata__date--incoming {
+      color: $color-gray-25;
+    }
+
+    .module-message__generic-attachment__file-name--incoming {
+      color: $color-gray-25;
+    }
+    .module-message__generic-attachment__file-size--incoming {
+      color: $color-gray-25;
+    }
+
+    .module-expire-timer {
+      background-color: $color-white-08;
+    }
+
+    .module-expire-timer--incoming {
+      background-color: $color-gray-25;
+    }
+
+    .module-quote--outgoing {
+      border-left-color: $color-black;
+      background-color: $color-conversation-blue-shade;
+    }
+
+    .module-quote--incoming {
+      background-color: $color-conversation-blue-shade;
+      border-left-color: $color-signal-blue;
+    }
+
+    .module-quote__primary__author {
+      color: $color-gray-05;
+    }
+
+    .module-quote__primary__text {
+      color: $color-gray-05;
+      a {
+        color: $color-gray-05;
+      }
+    }
+
+    .module-quote__primary__type-label {
+      color: $color-gray-05;
+    }
+
+    .module-quote__primary__type-label--incoming {
+      color: $color-gray-05;
+    }
+
+    .module-quote__primary__author--incoming {
+      color: $color-gray-05;
+    }
+
+    .module-quote__primary__text--incoming {
+      color: $color-gray-05;
+      a {
+        color: $color-gray-05;
+      }
+    }
+
+    .module-quote__generic-file__text {
+      color: $color-gray-05;
+    }
+
+    .module-quote__generic-file__text--incoming {
+      color: $color-gray-05;
+    }
+
+    .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-gray-90;
+    }
+
+    .module-quote__reference-warning__text--incoming {
+      color: $color-gray-05;
+    }
+
+    .module-quote__reference-warning__icon {
+      @include color-svg('../images/broken-link.svg', $color-signal-blue);
+    }
+
+    .module-quote__reference-warning__icon--incoming {
+      @include color-svg('../images/broken-link.svg', $color-gray-75);
+    }
+
+    // When you're composing a new quote
+    .bottom-bar {
+      .module-quote__primary__author {
+        color: $color-gray-05;
+      }
+
+      .module-quote__primary__type-label {
+        color: $color-gray-05;
+      }
+
+      .module-quote__generic-file__text {
+        color: $color-gray-05;
+      }
+
+      .module-quote__primary__text {
+        color: $color-gray-05;
+        a {
+          color: $color-gray-05;
+        }
+      }
+    }
+
+    .module-embedded-contact__contact-name--incoming {
+      color: $color-gray-05;
+    }
+
+    .module-embedded-contact__contact-method--incoming {
+      color: $color-gray-25;
+    }
+  }
+}
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index f004fa8c9..56a130585 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -76,7 +76,7 @@
   cursor: pointer;
   @include color-svg('../images/download.svg', $color-light-45);
   &:hover {
-    @include color-svg('../images/download.svg', $color-light-90);
+    @include color-svg('../images/download.svg', $color-gray-90);
   }
 }
 
@@ -94,7 +94,7 @@
   cursor: pointer;
   @include color-svg('../images/reply.svg', $color-light-45);
   &:hover {
-    @include color-svg('../images/reply.svg', $color-light-90);
+    @include color-svg('../images/reply.svg', $color-gray-90);
   }
 }
 
@@ -112,7 +112,7 @@
   cursor: pointer;
   @include color-svg('../images/ellipsis.svg', $color-light-45);
   &:hover {
-    @include color-svg('../images/ellipsis.svg', $color-light-90);
+    @include color-svg('../images/ellipsis.svg', $color-gray-90);
   }
 }
 
@@ -157,46 +157,46 @@
   min-width: 0px;
 }
 
-.module-message__container--incoming {
+.module-message__container--outgoing {
   background-color: $color-light-10;
 }
 
 // In case the color gets messed up
-.module-message__container--outgoing {
+.module-message__container--incoming {
   background-color: $color-conversation-grey;
 }
 
-.module-message__container--outgoing-red {
+.module-message__container--incoming-red {
   background-color: $color-conversation-red;
 }
-.module-message__container--outgoing-deep_orange {
+.module-message__container--incoming-deep_orange {
   background-color: $color-conversation-deep_orange;
 }
-.module-message__container--outgoing-brown {
+.module-message__container--incoming-brown {
   background-color: $color-conversation-brown;
 }
-.module-message__container--outgoing-pink {
+.module-message__container--incoming-pink {
   background-color: $color-conversation-pink;
 }
-.module-message__container--outgoing-purple {
+.module-message__container--incoming-purple {
   background-color: $color-conversation-purple;
 }
-.module-message__container--outgoing-indigo {
+.module-message__container--incoming-indigo {
   background-color: $color-conversation-indigo;
 }
-.module-message__container--outgoing-blue {
+.module-message__container--incoming-blue {
   background-color: $color-conversation-blue;
 }
-.module-message__container--outgoing-teal {
+.module-message__container--incoming-teal {
   background-color: $color-conversation-teal;
 }
-.module-message__container--outgoing-green {
+.module-message__container--incoming-green {
   background-color: $color-conversation-green;
 }
-.module-message__container--outgoing-light_green {
+.module-message__container--incoming-light_green {
   background-color: $color-conversation-light_green;
 }
-.module-message__container--outgoing-blue_grey {
+.module-message__container--incoming-blue_grey {
   background-color: $color-conversation-blue_grey;
 }
 
@@ -400,7 +400,7 @@
   white-space: nowrap;
   text-overflow: clip;
 
-  color: $color-light-90;
+  color: $color-gray-90;
 }
 
 .module-message__generic-attachment__text {
@@ -411,7 +411,7 @@
 }
 
 .module-message__generic-attachment__file-name {
-  color: $color-white;
+  color: $color-gray-90;
   font-size: 14px;
   line-height: 18px;
   font-weight: 300;
@@ -424,11 +424,11 @@
 }
 
 .module-message__generic-attachment__file-name--incoming {
-  color: $color-light-90;
+  color: $color-white;
 }
 
 .module-message__generic-attachment__file-size {
-  color: $color-white;
+  color: $color-gray-90;
   font-size: 11px;
   line-height: 16px;
   letter-spacing: 0.3px;
@@ -436,11 +436,11 @@
 }
 
 .module-message__generic-attachment__file-size--incoming {
-  color: $color-light-90;
+  color: $color-white;
 }
 
 .module-message__author {
-  color: $color-light-90;
+  color: $color-white;
   font-size: 13px;
   font-weight: 300;
   line-height: 18px;
@@ -456,7 +456,7 @@
 }
 
 .module-message__text {
-  color: $color-white;
+  color: $color-gray-90;
   font-size: 14px;
   line-height: 18px;
   text-align: start;
@@ -468,15 +468,15 @@
 
   a {
     text-decoration: underline;
-    color: $color-white;
+    color: $color-gray-90;
   }
 }
 
 .module-message__text--incoming {
-  color: $color-light-90;
+  color: $color-white;
   a {
     text-decoration: underline;
-    color: $color-light-90;
+    color: $color-white;
   }
 }
 
@@ -508,11 +508,11 @@
   font-size: 11px;
   line-height: 16px;
   letter-spacing: 0.3px;
-  color: $color-white-08;
+  color: $color-gray-60;
   text-transform: uppercase;
 }
 .module-message__metadata__date--incoming {
-  color: $color-light-60;
+  color: $color-white-08;
 }
 .module-message__metadata__date--with-image-no-caption {
   color: $color-white;
@@ -531,7 +531,7 @@
 }
 
 .module-message__metadata__status-icon--sending {
-  @include color-svg('../images/sending.svg', $color-white-08);
+  @include color-svg('../images/sending.svg', $color-gray-60);
   animation: module-message__metdata__status-icon--spinning 4s linear infinite;
 }
 
@@ -543,14 +543,14 @@
 }
 
 .module-message__metadata__status-icon--sent {
-  @include color-svg('../images/check-circle-outline.svg', $color-white-08);
+  @include color-svg('../images/check-circle-outline.svg', $color-gray-60);
 }
 .module-message__metadata__status-icon--delivered {
-  @include color-svg('../images/double-check.svg', $color-white-08);
+  @include color-svg('../images/double-check.svg', $color-gray-60);
   width: 18px;
 }
 .module-message__metadata__status-icon--read {
-  @include color-svg('../images/read.svg', $color-white-08);
+  @include color-svg('../images/read.svg', $color-gray-60);
   width: 18px;
 }
 
@@ -595,48 +595,48 @@
   display: inline-block;
   margin-left: 6px;
   margin-bottom: 2px;
-  @include color-svg('../images/timer-60.svg', $color-white-08);
+  @include color-svg('../images/timer-60.svg', $color-gray-60);
 }
 
 .module-expire-timer--55 {
-  @include color-svg('../images/timer-55.svg', $color-white-08);
+  @include color-svg('../images/timer-55.svg', $color-gray-60);
 }
 .module-expire-timer--50 {
-  @include color-svg('../images/timer-50.svg', $color-white-08);
+  @include color-svg('../images/timer-50.svg', $color-gray-60);
 }
 .module-expire-timer--45 {
-  @include color-svg('../images/timer-45.svg', $color-white-08);
+  @include color-svg('../images/timer-45.svg', $color-gray-60);
 }
 .module-expire-timer--40 {
-  @include color-svg('../images/timer-40.svg', $color-white-08);
+  @include color-svg('../images/timer-40.svg', $color-gray-60);
 }
 .module-expire-timer--35 {
-  @include color-svg('../images/timer-35.svg', $color-white-08);
+  @include color-svg('../images/timer-35.svg', $color-gray-60);
 }
 .module-expire-timer--30 {
-  @include color-svg('../images/timer-30.svg', $color-white-08);
+  @include color-svg('../images/timer-30.svg', $color-gray-60);
 }
 .module-expire-timer--25 {
-  @include color-svg('../images/timer-25.svg', $color-white-08);
+  @include color-svg('../images/timer-25.svg', $color-gray-60);
 }
 .module-expire-timer--20 {
-  @include color-svg('../images/timer-20.svg', $color-white-08);
+  @include color-svg('../images/timer-20.svg', $color-gray-60);
 }
 .module-expire-timer--15 {
-  @include color-svg('../images/timer-15.svg', $color-white-08);
+  @include color-svg('../images/timer-15.svg', $color-gray-60);
 }
 .module-expire-timer--10 {
-  @include color-svg('../images/timer-10.svg', $color-white-08);
+  @include color-svg('../images/timer-10.svg', $color-gray-60);
 }
 .module-expire-timer--05 {
-  @include color-svg('../images/timer-05.svg', $color-white-08);
+  @include color-svg('../images/timer-05.svg', $color-gray-60);
 }
 .module-expire-timer--00 {
-  @include color-svg('../images/timer-00.svg', $color-white-08);
+  @include color-svg('../images/timer-00.svg', $color-gray-60);
 }
 
 .module-expire-timer--incoming {
-  background-color: $color-gray-60;
+  background-color: $color-white-08;
 }
 
 // When status indicators are overlaid on top of an image, they use different colors
@@ -687,90 +687,90 @@
   border-bottom-right-radius: 0px;
 }
 
-.module-quote--incoming {
+.module-quote--outgoing {
   border-left-color: $color-conversation-grey;
   background-color: $color-conversation-grey-tint;
 }
-.module-quote--incoming-red {
+.module-quote--outgoing-red {
   border-left-color: $color-conversation-red;
   background-color: $color-conversation-red-tint;
 }
-.module-quote--incoming-deep_orange {
+.module-quote--outgoing-deep_orange {
   border-left-color: $color-conversation-deep_orange;
   background-color: $color-conversation-deep_orange-tint;
 }
-.module-quote--incoming-brown {
+.module-quote--outgoing-brown {
   border-left-color: $color-conversation-brown;
   background-color: $color-conversation-brown-tint;
 }
-.module-quote--incoming-pink {
+.module-quote--outgoing-pink {
   border-left-color: $color-conversation-pink;
   background-color: $color-conversation-pink-tint;
 }
-.module-quote--incoming-purple {
+.module-quote--outgoing-purple {
   border-left-color: $color-conversation-purple;
   background-color: $color-conversation-purple-tint;
 }
-.module-quote--incoming-indigo {
+.module-quote--outgoing-indigo {
   border-left-color: $color-conversation-indigo;
   background-color: $color-conversation-indigo-tint;
 }
-.module-quote--incoming-blue {
+.module-quote--outgoing-blue {
   border-left-color: $color-conversation-blue;
   background-color: $color-conversation-blue-tint;
 }
-.module-quote--incoming-teal {
+.module-quote--outgoing-teal {
   border-left-color: $color-conversation-teal;
   background-color: $color-conversation-teal-tint;
 }
-.module-quote--incoming-green {
+.module-quote--outgoing-green {
   border-left-color: $color-conversation-green;
   background-color: $color-conversation-green-tint;
 }
-.module-quote--incoming-light_green {
+.module-quote--outgoing-light_green {
   border-left-color: $color-conversation-light_green;
   background-color: $color-conversation-light_green-tint;
 }
-.module-quote--incoming-blue_grey {
+.module-quote--outgoing-blue_grey {
   border-left-color: $color-conversation-blue_grey;
   background-color: $color-conversation-blue_grey-tint;
 }
 
-.module-quote--outgoing {
+.module-quote--incoming {
   border-left-color: $color-white;
   background-color: $color-conversation-grey-tint;
 }
-.module-quote--outgoing-red {
+.module-quote--incoming-red {
   background-color: $color-conversation-red-tint;
 }
-.module-quote--outgoing-deep_orange {
+.module-quote--incoming-deep_orange {
   background-color: $color-conversation-deep_orange-tint;
 }
-.module-quote--outgoing-brown {
+.module-quote--incoming-brown {
   background-color: $color-conversation-brown-tint;
 }
-.module-quote--outgoing-pink {
+.module-quote--incoming-pink {
   background-color: $color-conversation-pink-tint;
 }
-.module-quote--outgoing-purple {
+.module-quote--incoming-purple {
   background-color: $color-conversation-purple-tint;
 }
-.module-quote--outgoing-indigo {
+.module-quote--incoming-indigo {
   background-color: $color-conversation-indigo-tint;
 }
-.module-quote--outgoing-blue {
+.module-quote--incoming-blue {
   background-color: $color-conversation-blue-tint;
 }
-.module-quote--outgoing-teal {
+.module-quote--incoming-teal {
   background-color: $color-conversation-teal-tint;
 }
-.module-quote--outgoing-green {
+.module-quote--incoming-green {
   background-color: $color-conversation-green-tint;
 }
-.module-quote--outgoing-light_green {
+.module-quote--incoming-light_green {
   background-color: $color-conversation-light_green-tint;
 }
-.module-quote--outgoing-blue_grey {
+.module-quote--incoming-blue_grey {
   background-color: $color-conversation-blue_grey-tint;
 }
 
@@ -788,7 +788,7 @@
   font-size: 13px;
   line-height: 18px;
   font-weight: 300;
-  color: $color-light-90;
+  color: $color-gray-90;
 
   overflow-x: hidden;
   white-space: nowrap;
@@ -802,10 +802,10 @@
 .module-quote__primary__text {
   font-size: 14px;
   line-height: 18px;
-  color: $color-light-90;
+  color: $color-gray-90;
 
   a {
-    color: $color-light-90;
+    color: $color-gray-90;
   }
 
   overflow-wrap: break-word;
@@ -827,7 +827,7 @@
 
 .module-quote__primary__type-label {
   font-style: italic;
-  color: $color-light-90;
+  color: $color-gray-90;
   font-size: 13px;
   line-height: 18px;
 }
@@ -930,7 +930,7 @@
 .module-quote__generic-file__text {
   font-size: 14px;
   line-height: 18px;
-  color: $color-light-90;
+  color: $color-gray-90;
 
   max-width: calc(100% - 26px);
   overflow-x: hidden;
@@ -954,12 +954,12 @@
 .module-quote__reference-warning__icon {
   height: 16px;
   width: 16px;
-  @include color-svg('../images/broken-link.svg', $color-light-60);
+  @include color-svg('../images/broken-link.svg', $color-gray-60);
 }
 
 .module-quote__reference-warning__text {
   margin-left: 6px;
-  color: $color-light-90;
+  color: $color-gray-90;
   font-size: 13px;
   line-height: 18px;
 }
@@ -994,7 +994,7 @@
   line-height: 18px;
   font-weight: 300;
   margin-top: 6px;
-  color: $color-white;
+  color: $color-gray-90;
 
   max-width: 100%;
   white-space: nowrap;
@@ -1003,7 +1003,7 @@
 }
 
 .module-embedded-contact__contact-name--incoming {
-  color: $color-light-90;
+  color: $color-white;
 }
 
 .module-embedded-contact__contact-method {
@@ -1011,7 +1011,7 @@
   line-height: 16px;
   letter-spacing: 0.3px;
   margin-top: 3px;
-  color: $color-white-07;
+  color: $color-gray-60;
 
   max-width: 100%;
   white-space: nowrap;
@@ -1020,7 +1020,7 @@
 }
 
 .module-embedded-contact__contact-method--incoming {
-  color: $color-light-60;
+  color: $color-white-07;
 }
 
 // Module: Contact Detail
@@ -1098,7 +1098,7 @@
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-gray-60;
   text-align: center;
 }
 
@@ -1117,7 +1117,7 @@
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-gray-60;
   text-align: center;
 }
 
@@ -1134,14 +1134,14 @@
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 7px;
-  @include color-svg('../images/shield.svg', $color-light-60);
+  @include color-svg('../images/shield.svg', $color-gray-60);
 }
 
 .module-safety-number-notification__text {
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-gray-60;
 }
 
 .module-safety-number-notification__contact {
@@ -1168,7 +1168,7 @@
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-gray-60;
   text-align: center;
 }
 
@@ -1182,7 +1182,7 @@
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 4px;
-  @include color-svg('../images/verified-check.svg', $color-light-60);
+  @include color-svg('../images/verified-check.svg', $color-gray-60);
 }
 
 .module-verification-notification__icon--mark-not-verified {
@@ -1191,7 +1191,7 @@
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 7px;
-  @include color-svg('../images/shield.svg', $color-light-60);
+  @include color-svg('../images/shield.svg', $color-gray-60);
 }
 
 // Module: Timer Notification
@@ -1201,7 +1201,7 @@
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
-  color: $color-light-60;
+  color: $color-gray-60;
   text-align: center;
 }
 
@@ -1218,11 +1218,11 @@
   height: 20px;
   width: 20px;
   display: inline-block;
-  @include color-svg('../images/timer.svg', $color-light-60);
+  @include color-svg('../images/timer.svg', $color-gray-60);
 }
 
 .module-timer-notification__icon--disabled {
-  @include color-svg('../images/timer-disabled.svg', $color-light-60);
+  @include color-svg('../images/timer-disabled.svg', $color-gray-60);
 }
 
 .module-timer-notification__icon-label {
@@ -1262,7 +1262,7 @@
   flex-direction: row;
   align-items: center;
 
-  color: $color-light-60;
+  color: $color-gray-60;
 }
 
 .module-contact-list-item--with-click-handler {
@@ -1288,7 +1288,7 @@
 }
 
 .module-contact-list-item__text__verified-icon {
-  @include color-svg('../images/verified-check.svg', $color-light-60);
+  @include color-svg('../images/verified-check.svg', $color-gray-60);
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -1308,14 +1308,14 @@
   align-items: center;
 
   height: $header-height;
-  color: $color-light-90;
+  color: $color-gray-90;
 
   background-color: $color-white;
   border-bottom: 1px solid $color-black-02;
 }
 
 .module-conversation-header__back-icon {
-  @include color-svg('../images/back.svg', $color-light-90);
+  @include color-svg('../images/back.svg', $color-gray-90);
   display: inline-block;
   margin-left: -10px;
   margin-right: -2px;
@@ -1357,7 +1357,7 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 300;
-  color: $color-light-90;
+  color: $color-gray-90;
 
   // width of avatar (28px) and our 8px left margin
   max-width: calc(100% - 36px);
@@ -1373,7 +1373,7 @@
 }
 
 .module-conversation-header__title__verified-icon {
-  @include color-svg('../images/verified-check.svg', $color-light-90);
+  @include color-svg('../images/verified-check.svg', $color-gray-90);
   display: inline-block;
   width: 1.25em;
   height: 1.25em;
@@ -1389,7 +1389,7 @@
 }
 
 .module-conversation-header__expiration__clock-icon {
-  @include color-svg('../images/timer.svg', $color-light-60);
+  @include color-svg('../images/timer.svg', $color-gray-60);
   height: 20px;
   width: 20px;
   display: inline-block;
@@ -1401,7 +1401,7 @@
 }
 
 .module-conversation-header__gear-icon {
-  @include color-svg('../images/gear.svg', $color-light-60);
+  @include color-svg('../images/gear.svg', $color-gray-60);
   height: 20px;
   width: 20px;
   margin-left: 4px;
@@ -1487,7 +1487,7 @@
 }
 
 .module-message-detail__contact__status-icon--sending {
-  @include color-svg('../images/sending.svg', $color-light-60);
+  @include color-svg('../images/sending.svg', $color-gray-60);
   animation: module-message-detail__contact__status-icon--spinning 4s linear
     infinite;
 }
@@ -1882,7 +1882,7 @@
 }
 
 .module-conversation-list-item__message__status-icon--sending {
-  @include color-svg('../images/sending.svg', $color-light-60);
+  @include color-svg('../images/sending.svg', $color-gray-60);
   animation: module-conversation-list-item__message__status-icon--spinning 4s
     linear infinite;
 }
@@ -2086,7 +2086,7 @@
   line-height: 24px;
   font-weight: 300;
   margin-left: 32px;
-  color: $color-light-90;
+  color: $color-gray-90;
 }
 
 // Third-party module: react-contextmenu
@@ -2108,7 +2108,7 @@
 }
 
 .react-contextmenu-item {
-  color: $color-light-90;
+  color: $color-gray-90;
 
   cursor: pointer;
   font-size: 13px;
@@ -2126,7 +2126,7 @@
   display: inline-block;
   position: absolute;
   right: 7px;
-  color: $color-light-90;
+  color: $color-gray-90;
 }
 
 .react-contextmenu-item.react-contextmenu-submenu {
@@ -2143,7 +2143,7 @@
   display: inline-block;
   position: absolute;
   right: 7px;
-  color: $color-light-90;
+  color: $color-gray-90;
 }
 
 .react-contextmenu-item.react-contextmenu-item--active,
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 74ddb148f..6f6a4ce83 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -617,46 +617,46 @@ body.dark-theme {
     @include color-svg('../images/error.svg', $color-core-red);
   }
 
-  .module-message__container--incoming {
+  .module-message__container--outgoing {
     background-color: $color-dark-70;
   }
 
   // In case the color gets messed up
-  .module-message__container--outgoing {
+  .module-message__container--incoming {
     background-color: $color-conversation-grey;
   }
 
-  .module-message__container--outgoing-red {
+  .module-message__container--incoming-red {
     background-color: $color-conversation-red;
   }
-  .module-message__container--outgoing-deep_orange {
+  .module-message__container--incoming-deep_orange {
     background-color: $color-conversation-deep_orange;
   }
-  .module-message__container--outgoing-brown {
+  .module-message__container--incoming-brown {
     background-color: $color-conversation-brown;
   }
-  .module-message__container--outgoing-pink {
+  .module-message__container--incoming-pink {
     background-color: $color-conversation-pink;
   }
-  .module-message__container--outgoing-purple {
+  .module-message__container--incoming-purple {
     background-color: $color-conversation-purple;
   }
-  .module-message__container--outgoing-indigo {
+  .module-message__container--incoming-indigo {
     background-color: $color-conversation-indigo;
   }
-  .module-message__container--outgoing-blue {
+  .module-message__container--incoming-blue {
     background-color: $color-conversation-blue;
   }
-  .module-message__container--outgoing-teal {
+  .module-message__container--incoming-teal {
     background-color: $color-conversation-teal;
   }
-  .module-message__container--outgoing-green {
+  .module-message__container--incoming-green {
     background-color: $color-conversation-green;
   }
-  .module-message__container--outgoing-light_green {
+  .module-message__container--incoming-light_green {
     background-color: $color-conversation-light_green;
   }
-  .module-message__container--outgoing-blue_grey {
+  .module-message__container--incoming-blue_grey {
     background-color: $color-conversation-blue_grey;
   }
 
@@ -847,90 +847,90 @@ body.dark-theme {
 
   // Module: Quoted Reply
 
-  .module-quote--incoming {
+  .module-quote--outgoing {
     border-left-color: $color-conversation-grey;
     background-color: $color-conversation-grey-shade;
   }
-  .module-quote--incoming-red {
+  .module-quote--outgoing-red {
     border-left-color: $color-conversation-red;
     background-color: $color-conversation-red-shade;
   }
-  .module-quote--incoming-deep_orange {
+  .module-quote--outgoing-deep_orange {
     border-left-color: $color-conversation-deep_orange;
     background-color: $color-conversation-deep_orange-shade;
   }
-  .module-quote--incoming-brown {
+  .module-quote--outgoing-brown {
     border-left-color: $color-conversation-brown;
     background-color: $color-conversation-brown-shade;
   }
-  .module-quote--incoming-pink {
+  .module-quote--outgoing-pink {
     border-left-color: $color-conversation-pink;
     background-color: $color-conversation-pink-shade;
   }
-  .module-quote--incoming-purple {
+  .module-quote--outgoing-purple {
     border-left-color: $color-conversation-purple;
     background-color: $color-conversation-purple-shade;
   }
-  .module-quote--incoming-indigo {
+  .module-quote--outgoing-indigo {
     border-left-color: $color-conversation-indigo;
     background-color: $color-conversation-indigo-shade;
   }
-  .module-quote--incoming-blue {
+  .module-quote--outgoing-blue {
     border-left-color: $color-conversation-blue;
     background-color: $color-conversation-blue-shade;
   }
-  .module-quote--incoming-teal {
+  .module-quote--outgoing-teal {
     border-left-color: $color-conversation-teal;
     background-color: $color-conversation-teal-shade;
   }
-  .module-quote--incoming-green {
+  .module-quote--outgoing-green {
     border-left-color: $color-conversation-green;
     background-color: $color-conversation-green-shade;
   }
-  .module-quote--incoming-light_green {
+  .module-quote--outgoing-light_green {
     border-left-color: $color-conversation-light_green;
     background-color: $color-conversation-light_green-shade;
   }
-  .module-quote--incoming-blue_grey {
+  .module-quote--outgoing-blue_grey {
     border-left-color: $color-conversation-blue_grey;
     background-color: $color-conversation-blue_grey-shade;
   }
 
-  .module-quote--outgoing {
+  .module-quote--incoming {
     border-left-color: $color-black;
     background-color: $color-conversation-grey-shade;
   }
-  .module-quote--outgoing-red {
+  .module-quote--incoming-red {
     background-color: $color-conversation-red-shade;
   }
-  .module-quote--outgoing-deep_orange {
+  .module-quote--incoming-deep_orange {
     background-color: $color-conversation-deep_orange-shade;
   }
-  .module-quote--outgoing-brown {
+  .module-quote--incoming-brown {
     background-color: $color-conversation-brown-shade;
   }
-  .module-quote--outgoing-pink {
+  .module-quote--incoming-pink {
     background-color: $color-conversation-pink-shade;
   }
-  .module-quote--outgoing-purple {
+  .module-quote--incoming-purple {
     background-color: $color-conversation-purple-shade;
   }
-  .module-quote--outgoing-indigo {
+  .module-quote--incoming-indigo {
     background-color: $color-conversation-indigo-shade;
   }
-  .module-quote--outgoing-blue {
+  .module-quote--incoming-blue {
     background-color: $color-conversation-blue-shade;
   }
-  .module-quote--outgoing-teal {
+  .module-quote--incoming-teal {
     background-color: $color-conversation-teal-shade;
   }
-  .module-quote--outgoing-green {
+  .module-quote--incoming-green {
     background-color: $color-conversation-green-shade;
   }
-  .module-quote--outgoing-light_green {
+  .module-quote--incoming-light_green {
     background-color: $color-conversation-light_green-shade;
   }
-  .module-quote--outgoing-blue_grey {
+  .module-quote--incoming-blue_grey {
     background-color: $color-conversation-blue_grey-shade;
   }
 
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 0371ea162..320d4af9f 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -40,7 +40,7 @@ $color-gray-05: #eeefef;
 $color-gray-15: #d5d6d6;
 $color-gray-25: #bbbdbe;
 $color-gray-45: #898a8c;
-$color-gray-60: #636467;
+$color-gray-60: #6b6d70;
 $color-gray-75: #3d3e44;
 $color-gray-85: #23252a;
 $color-gray-90: #17191d;
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index 94c566e75..33a4b8ff2 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -17,6 +17,7 @@
 @import 'conversation';
 
 // Themes
+@import 'ios';
 @import 'theme_dark';
 
 // New CSS
diff --git a/ts/components/conversation/EmbeddedContact.md b/ts/components/conversation/EmbeddedContact.md
index bf4842b37..1e0d07471 100644
--- 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}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -34,7 +34,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       i18n={util.i18n}
@@ -44,7 +44,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -54,7 +54,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       collapseMetadata
       status="delivered"
@@ -86,10 +86,10 @@ const contact = {
   },
   hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme}  ios={util.ios}>
   <li>
     <Message
-    conversationColor="green"
+    authorColor="green"
     direction="incoming"
     i18n={util.i18n}
     timestamp={Date.now()}
@@ -97,7 +97,7 @@ const contact = {
   </li>
   <li>
   <Message
-    conversationColor="green"
+    authorColor="green"
     direction="outgoing"
     status="delivered"
     i18n={util.i18n}
@@ -127,10 +127,10 @@ const contact = {
   },
   hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme} type="group">
+<util.ConversationContext theme={util.theme} type="group" ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       conversationType="group"
       authorName="Mr. Fire"
       authorAvatarPath={util.gifObjectUrl}
@@ -142,7 +142,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       authorName="Mr. Fire"
       conversationType="group"
@@ -154,7 +154,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       conversationType="group"
       authorName="Mr. Fire"
@@ -187,10 +187,10 @@ const contact = {
   },
   hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -199,7 +199,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       i18n={util.i18n}
@@ -209,7 +209,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -219,7 +219,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       collapseMetadata
       status="delivered"
@@ -249,10 +249,10 @@ const contact = {
   },
   hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -261,7 +261,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       i18n={util.i18n}
@@ -271,7 +271,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -281,7 +281,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       collapseMetadata
       status="delivered"
@@ -313,10 +313,10 @@ const contact = {
   },
   hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -325,7 +325,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       i18n={util.i18n}
@@ -335,7 +335,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -345,7 +345,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       collapseMetadata
       status="delivered"
@@ -372,10 +372,10 @@ const contact = {
   ],
   hasSignalAccount: true,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -384,7 +384,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       i18n={util.i18n}
@@ -394,7 +394,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -404,7 +404,7 @@ const contact = {
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       collapseMetadata
       status="delivered"
@@ -420,10 +420,10 @@ const contact = {
 
 ```jsx
 const contact = {};
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -432,7 +432,7 @@ const contact = {};
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       i18n={util.i18n}
@@ -442,7 +442,7 @@ const contact = {};
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -452,7 +452,7 @@ const contact = {};
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       collapseMetadata
       status="delivered"
@@ -501,11 +501,11 @@ const contactWithoutAccount = {
   },
   hasSignalAccount: false,
 };
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -515,7 +515,7 @@ const contactWithoutAccount = {
   <li>
     <Message
       text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       i18n={util.i18n}
@@ -526,7 +526,7 @@ const contactWithoutAccount = {
   <li>
     <Message
       text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -536,7 +536,7 @@ const contactWithoutAccount = {
   <li>
     <Message
       text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       i18n={util.i18n}
@@ -547,7 +547,7 @@ const contactWithoutAccount = {
   <li>
     <Message
       text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -558,7 +558,7 @@ const contactWithoutAccount = {
   <li>
     <Message
       text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       collapseMetadata
       status="delivered"
@@ -570,7 +570,7 @@ const contactWithoutAccount = {
   <li>
     <Message
       text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -581,7 +581,7 @@ const contactWithoutAccount = {
   <li>
     <Message
       text="I want to introduce you to Someone..."
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       collapseMetadata
       status="delivered"
diff --git a/ts/components/conversation/ExpireTimer.md b/ts/components/conversation/ExpireTimer.md
index 92199e30e..f67f32699 100644
--- a/ts/components/conversation/ExpireTimer.md
+++ b/ts/components/conversation/ExpireTimer.md
@@ -1,10 +1,10 @@
 ### Countdown at different rates
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="10 second timer"
@@ -18,7 +18,7 @@
     <Message
       direction="outgoing"
       status="delivered"
-      conversationColor="blue"
+      authorColor="blue"
       text="30 second timer"
       i18n={util.i18n}
       timestamp={Date.now() + 30 * 1000}
@@ -28,7 +28,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="1 minute timer"
@@ -40,7 +40,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="5 minute timer"
@@ -56,10 +56,10 @@
 ### Timer calculations
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="incoming"
       text="Full timer"
       i18n={util.i18n}
@@ -70,7 +70,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="Full timer"
@@ -82,7 +82,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="incoming"
       text="55 timer"
       i18n={util.i18n}
@@ -93,7 +93,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="55 timer"
@@ -105,7 +105,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="incoming"
       text="30 timer"
       i18n={util.i18n}
@@ -116,7 +116,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="30 timer"
@@ -128,7 +128,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="incoming"
       text="5 timer"
       i18n={util.i18n}
@@ -139,7 +139,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="5 timer"
@@ -151,7 +151,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="incoming"
       text="Expired timer"
       i18n={util.i18n}
@@ -162,7 +162,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="Expired timer"
@@ -174,7 +174,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="incoming"
       text="Expiration is too far away"
       i18n={util.i18n}
@@ -185,7 +185,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="Expiration is too far away"
@@ -197,7 +197,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="incoming"
       text="Already expired"
       i18n={util.i18n}
@@ -208,7 +208,7 @@
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="Already expired"
diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md
index 5f0aa6a2b..8ba26ab7a 100644
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
@@ -3,13 +3,13 @@
 Note that timestamp and status can be hidden with the `collapseMetadata` boolean property.
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
       authorPhoneNumber="(202) 555-2001"
-      conversationColor="green"
+      authorColor="green"
       text="🔥"
       i18n={util.i18n}
       onDownload={() => console.log('onDownload')}
@@ -22,7 +22,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Hello there from the new world! http://somewhere.com"
       i18n={util.i18n}
       onDownload={() => console.log('onDownload')}
@@ -36,7 +36,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
       collapseMetadata
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="red"
+      authorColor="red"
       text="Hello there from the new world!"
       i18n={util.i18n}
       onDownload={() => console.log('onDownload')}
@@ -49,7 +49,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="grey"
+      authorColor="grey"
       text="Hello there from the new world! And this is multiple lines of text. Lines and lines and lines."
       i18n={util.i18n}
       onDownload={() => console.log('onDownload')}
@@ -61,7 +61,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   <li>
     <Message
       direction="incoming"
-      conversationColor="deep_orange"
+      authorColor="deep_orange"
       timestamp={Date.now()}
       collapseMetadata
       text="Hello there from the new world! And this is multiple lines of text. Lines and lines and lines."
@@ -77,7 +77,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
       direction="outgoing"
       timestamp={Date.now()}
       status="sent"
-      conversationColor="pink"
+      authorColor="pink"
       text="🔥"
       i18n={util.i18n}
       onDownload={() => console.log('onDownload')}
@@ -91,7 +91,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
       direction="outgoing"
       timestamp={Date.now()}
       status="read"
-      conversationColor="pink"
+      authorColor="pink"
       text="Hello there from the new world! http://somewhere.com"
       i18n={util.i18n}
       onDownload={() => console.log('onDownload')}
@@ -119,7 +119,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
       direction="outgoing"
       status="sent"
       timestamp={Date.now()}
-      conversationColor="blue"
+      authorColor="blue"
       text="Hello there from the new world! And this is multiple lines of text. Lines and lines and lines."
       i18n={util.i18n}
       onDownload={() => console.log('onDownload')}
@@ -148,12 +148,12 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
 ### Status
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="outgoing"
       status="sending"
-      conversationColor="pink"
+      authorColor="pink"
       timestamp={Date.now()}
       text="This is still sending."
       i18n={util.i18n}
@@ -163,7 +163,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="outgoing"
       status="sent"
-      conversationColor="red"
+      authorColor="red"
       timestamp={Date.now()}
       text="This has been successfully sent!"
       i18n={util.i18n}
@@ -173,7 +173,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="outgoing"
       status="delivered"
-      conversationColor="blue"
+      authorColor="blue"
       timestamp={Date.now()}
       text="This has been delivered!"
       i18n={util.i18n}
@@ -183,7 +183,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="outgoing"
       status="read"
-      conversationColor="purple"
+      authorColor="purple"
       timestamp={Date.now()}
       text="This has been read!"
       i18n={util.i18n}
@@ -193,7 +193,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="outgoing"
       status="error"
-      conversationColor="purple"
+      authorColor="purple"
       timestamp={Date.now() - 56}
       text="Error!"
       i18n={util.i18n}
@@ -204,7 +204,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="incoming"
       status="error"
-      conversationColor="purple"
+      authorColor="purple"
       timestamp={Date.now()}
       text="Error!"
       i18n={util.i18n}
@@ -214,7 +214,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="outgoing"
       status="sending"
-      conversationColor="pink"
+      authorColor="pink"
       timestamp={Date.now()}
       text="🔥"
       i18n={util.i18n}
@@ -224,7 +224,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="outgoing"
       status="sent"
-      conversationColor="red"
+      authorColor="red"
       timestamp={Date.now()}
       text="🔥"
       i18n={util.i18n}
@@ -234,7 +234,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="outgoing"
       status="delivered"
-      conversationColor="blue"
+      authorColor="blue"
       timestamp={Date.now()}
       text="🔥"
       i18n={util.i18n}
@@ -244,7 +244,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="outgoing"
       status="read"
-      conversationColor="purple"
+      authorColor="purple"
       timestamp={Date.now()}
       text="🔥"
       i18n={util.i18n}
@@ -254,7 +254,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="outgoing"
       status="error"
-      conversationColor="purple"
+      authorColor="purple"
       timestamp={Date.now() - 57}
       text="🔥"
       i18n={util.i18n}
@@ -265,7 +265,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
     <Message
       direction="incoming"
       status="error"
-      conversationColor="purple"
+      authorColor="purple"
       timestamp={Date.now()}
       text="🔥"
       i18n={util.i18n}
@@ -277,12 +277,12 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
 ### All colors
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="red"
+      authorColor="red"
       timestamp={Date.now()}
       text="This is red"
       i18n={util.i18n}
@@ -290,9 +290,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="deep_orange"
+      authorColor="deep_orange"
       timestamp={Date.now()}
       text="This is deep_orange"
       i18n={util.i18n}
@@ -300,9 +300,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="brown"
+      authorColor="brown"
       timestamp={Date.now()}
       text="This is brown"
       i18n={util.i18n}
@@ -310,9 +310,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="pink"
+      authorColor="pink"
       timestamp={Date.now()}
       text="This is pink"
       i18n={util.i18n}
@@ -320,9 +320,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="purple"
+      authorColor="purple"
       timestamp={Date.now()}
       text="This is purple"
       i18n={util.i18n}
@@ -330,9 +330,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="indigo"
+      authorColor="indigo"
       timestamp={Date.now()}
       text="This is indigo"
       i18n={util.i18n}
@@ -340,9 +340,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="blue"
+      authorColor="blue"
       timestamp={Date.now()}
       text="This is blue"
       i18n={util.i18n}
@@ -350,9 +350,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={Date.now()}
       text="This is teal"
       i18n={util.i18n}
@@ -360,9 +360,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="green"
+      authorColor="green"
       timestamp={Date.now()}
       text="This is green"
       i18n={util.i18n}
@@ -370,9 +370,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="light_green"
+      authorColor="light_green"
       timestamp={Date.now()}
       text="This is light_green"
       i18n={util.i18n}
@@ -380,9 +380,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="blue_grey"
+      authorColor="blue_grey"
       timestamp={Date.now()}
       text="This is blue_grey"
       i18n={util.i18n}
@@ -390,9 +390,9 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="grey"
+      authorColor="grey"
       timestamp={Date.now()}
       text="This is grey"
       i18n={util.i18n}
@@ -404,10 +404,10 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
 ### Long data
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="purple"
+      authorColor="purple"
       direction="incoming"
       text="A really long link https://app.zeplin.io/project/5b2136b8e490ad6a54399857/screen/5b3bd068e03b763a0ee4c3e9"
       timestamp={Date.now()}
@@ -416,7 +416,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      conversationColor="purple"
+      authorColor="purple"
       direction="outgoing"
       status="delivered"
       text="A really long link https://app.zeplin.io/project/5b2136b8e490ad6a54399857/screen/5b3bd068e03b763a0ee4c3e9"
@@ -426,7 +426,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      conversationColor="purple"
+      authorColor="purple"
       direction="incoming"
       text={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget condimentum tellus. Aenean vulputate, dui a gravida rhoncus, mi orci varius urna, ut placerat felis ex ac elit. In pulvinar quis velit convallis varius. Quisque mattis, metus id lobortis porttitor, lacus ex laoreet dui, sit amet laoreet massa leo sed tellus. Phasellus iaculis pulvinar bibendum. In vitae imperdiet felis. Vivamus lacinia eros nec arcu varius, sodales faucibus nulla molestie. Etiam luctus lectus sit amet nulla facilisis, a porta mi tempus. Donec sit amet convallis ipsum.
 
@@ -441,7 +441,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      conversationColor="purple"
+      authorColor="purple"
       direction="outgoing"
       status="delivered"
       text={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget condimentum tellus. Aenean vulputate, dui a gravida rhoncus, mi orci varius urna, ut placerat felis ex ac elit. In pulvinar quis velit convallis varius. Quisque mattis, metus id lobortis porttitor, lacus ex laoreet dui, sit amet laoreet massa leo sed tellus. Phasellus iaculis pulvinar bibendum. In vitae imperdiet felis. Vivamus lacinia eros nec arcu varius, sodales faucibus nulla molestie. Etiam luctus lectus sit amet nulla facilisis, a porta mi tempus. Donec sit amet convallis ipsum.
@@ -463,10 +463,10 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
 #### Image with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="incoming"
       text="I am pretty confused about Pi."
       timestamp={Date.now()}
@@ -484,7 +484,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       status="delivered"
       text="I am pretty confused about Pi."
@@ -503,7 +503,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="incoming"
       text="I am pretty confused about Pi."
       collapseMetadata
@@ -522,7 +522,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
   </li>
   <li>
     <Message
-      conversationColor="blue"
+      authorColor="blue"
       direction="outgoing"
       text="I am pretty confused about Pi."
       collapseMetadata
@@ -547,10 +547,10 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
 First, showing the metadata overlay on dark and light images, then a message with `collapseMetadata` set.
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       timestamp={Date.now()}
       i18n={util.i18n}
@@ -567,7 +567,7 @@ First, showing the metadata overlay on dark and light images, then a message wit
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="sent"
       timestamp={Date.now()}
@@ -585,7 +585,7 @@ First, showing the metadata overlay on dark and light images, then a message wit
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       timestamp={Date.now()}
       i18n={util.i18n}
@@ -600,7 +600,7 @@ First, showing the metadata overlay on dark and light images, then a message wit
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="sent"
       timestamp={Date.now()}
@@ -616,7 +616,7 @@ First, showing the metadata overlay on dark and light images, then a message wit
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       timestamp={Date.now()}
@@ -632,7 +632,7 @@ First, showing the metadata overlay on dark and light images, then a message wit
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       collapseMetadata
       status="sent"
@@ -655,12 +655,12 @@ First, showing the metadata overlay on dark and light images, then a message wit
 Note that the delivered indicator is always Signal Blue, not the conversation color.
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="outgoing"
       status="sending"
-      conversationColor="pink"
+      authorColor="pink"
       timestamp={Date.now()}
       i18n={util.i18n}
       attachment={{
@@ -676,7 +676,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
     <Message
       direction="outgoing"
       status="sent"
-      conversationColor="red"
+      authorColor="red"
       timestamp={Date.now()}
       i18n={util.i18n}
       attachment={{
@@ -692,7 +692,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
     <Message
       direction="outgoing"
       status="delivered"
-      conversationColor="blue"
+      authorColor="blue"
       timestamp={Date.now()}
       i18n={util.i18n}
       attachment={{
@@ -708,7 +708,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
     <Message
       direction="outgoing"
       status="read"
-      conversationColor="purple"
+      authorColor="purple"
       timestamp={Date.now()}
       i18n={util.i18n}
       attachment={{
@@ -726,10 +726,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Image with portrait aspect ratio
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="purple"
+      authorColor="purple"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -744,7 +744,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="purple"
+      authorColor="purple"
       direction="outgoing"
       status="delivered"
       i18n={util.i18n}
@@ -760,7 +760,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="purple"
+      authorColor="purple"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -776,7 +776,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="purple"
+      authorColor="purple"
       direction="outgoing"
       collapseMetadata
       i18n={util.i18n}
@@ -796,10 +796,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Image with portrait aspect ratio and caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="This is an odd yellow bar. Cool, huh?"
       direction="incoming"
       i18n={util.i18n}
@@ -815,7 +815,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       text="This is an odd yellow bar. Cool, huh?"
@@ -832,7 +832,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="This is an odd yellow bar. Cool, huh?"
       direction="incoming"
       collapseMetadata
@@ -849,7 +849,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       text="This is an odd yellow bar. Cool, huh?"
       collapseMetadata
@@ -870,10 +870,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Image with landscape aspect ratio
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -888,7 +888,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -904,7 +904,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -920,7 +920,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       collapseMetadata
       i18n={util.i18n}
@@ -940,10 +940,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Image with landscape aspect ratio and caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="An interesting horizontal bar. It's art."
       direction="incoming"
       i18n={util.i18n}
@@ -959,7 +959,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       text="An interesting horizontal bar. It's art."
       i18n={util.i18n}
@@ -976,7 +976,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="An interesting horizontal bar. It's art."
       direction="incoming"
       collapseMetadata
@@ -993,7 +993,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       text="An interesting horizontal bar. It's art."
       collapseMetadata
@@ -1014,10 +1014,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Video with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="Beautiful, isn't it?"
       direction="incoming"
       i18n={util.i18n}
@@ -1035,7 +1035,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       text="Beautiful, isn't it?"
       status="delivered"
@@ -1054,7 +1054,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="Beautiful, isn't it?"
       collapseMetadata
       direction="incoming"
@@ -1075,7 +1075,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       text="Beautiful, isn't it?"
       collapseMetadata
@@ -1100,10 +1100,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Video
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       i18n={util.i18n}
@@ -1123,7 +1123,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -1143,7 +1143,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       i18n={util.i18n}
@@ -1164,7 +1164,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       i18n={util.i18n}
@@ -1189,10 +1189,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Missing images and videos
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       timestamp={Date.now()}
@@ -1210,7 +1210,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       timestamp={Date.now()}
@@ -1229,7 +1229,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   <li>
     <Message
       text="Did something go wrong?"
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       timestamp={Date.now()}
@@ -1247,7 +1247,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="Did something go wrong?"
       direction="outgoing"
       status="delivered"
@@ -1266,7 +1266,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       timestamp={Date.now()}
@@ -1286,7 +1286,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       timestamp={Date.now()}
       i18n={util.i18n}
@@ -1307,7 +1307,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   <li>
     <Message
       text="Did something go wrong?"
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       timestamp={Date.now()}
@@ -1327,7 +1327,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="Did something go wrong?"
       direction="outgoing"
       timestamp={Date.now()}
@@ -1352,10 +1352,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Broken source URL images and videos
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       timestamp={Date.now()}
@@ -1373,7 +1373,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="Did something go wrong?"
       direction="outgoing"
       status="delivered"
@@ -1392,7 +1392,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       timestamp={Date.now()}
@@ -1412,7 +1412,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       timestamp={Date.now()}
       i18n={util.i18n}
@@ -1436,10 +1436,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Image/video which is too big
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       timestamp={Date.now()}
@@ -1457,7 +1457,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       timestamp={Date.now()}
@@ -1475,7 +1475,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       timestamp={Date.now()}
@@ -1495,7 +1495,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       timestamp={Date.now()}
       i18n={util.i18n}
@@ -1519,10 +1519,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Image/video missing height/width
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       timestamp={Date.now()}
@@ -1538,7 +1538,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="delivered"
       timestamp={Date.now()}
@@ -1555,7 +1555,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       status="delivered"
       timestamp={Date.now()}
@@ -1576,7 +1576,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       timestamp={Date.now()}
       i18n={util.i18n}
@@ -1598,10 +1598,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Audio with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="This is a nice song"
       direction="incoming"
       timestamp={Date.now()}
@@ -1615,7 +1615,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="sent"
       text="This is a nice song"
@@ -1630,7 +1630,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       text="This is a nice song"
       collapseMetadata
       direction="incoming"
@@ -1645,7 +1645,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       text="This is a nice song"
       collapseMetadata
@@ -1664,10 +1664,10 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
 #### Audio
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -1680,7 +1680,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       status="sent"
       i18n={util.i18n}
@@ -1694,7 +1694,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -1708,7 +1708,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -1730,10 +1730,10 @@ Voice notes are not shown any differently from audio attachments.
 #### Other file type with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       text="My manifesto is now complete!"
       i18n={util.i18n}
@@ -1749,7 +1749,7 @@ Voice notes are not shown any differently from audio attachments.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       text="My manifesto is now complete!"
       status="sent"
@@ -1766,7 +1766,7 @@ Voice notes are not shown any differently from audio attachments.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       text="My manifesto is now complete!"
       collapseMetadata
@@ -1783,7 +1783,7 @@ Voice notes are not shown any differently from audio attachments.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       text="My manifesto is now complete!"
       i18n={util.i18n}
@@ -1800,7 +1800,7 @@ Voice notes are not shown any differently from audio attachments.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       text="My manifesto is now complete!"
       collapseMetadata
@@ -1818,7 +1818,7 @@ Voice notes are not shown any differently from audio attachments.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       text="My manifesto is now complete!"
       i18n={util.i18n}
@@ -1835,7 +1835,7 @@ Voice notes are not shown any differently from audio attachments.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       text="My manifesto is now complete!"
       i18n={util.i18n}
@@ -1855,10 +1855,10 @@ Voice notes are not shown any differently from audio attachments.
 #### Other file type
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -1873,7 +1873,7 @@ Voice notes are not shown any differently from audio attachments.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -1889,7 +1889,7 @@ Voice notes are not shown any differently from audio attachments.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       collapseMetadata
       i18n={util.i18n}
@@ -1905,7 +1905,7 @@ Voice notes are not shown any differently from audio attachments.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -1925,10 +1925,10 @@ Voice notes are not shown any differently from audio attachments.
 #### Dangerous file type
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="incoming"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -1945,7 +1945,7 @@ Voice notes are not shown any differently from audio attachments.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       direction="outgoing"
       i18n={util.i18n}
       timestamp={Date.now()}
@@ -1969,12 +1969,12 @@ Voice notes are not shown any differently from audio attachments.
 Note that the author avatar goes away if `collapseMetadata` is set.
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="pink"
+      authorColor="pink"
       conversationType="group"
       authorPhoneNumber="(202) 555-0003"
       text="Just phone number"
@@ -1986,7 +1986,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="blue"
+      authorColor="blue"
       conversationType="group"
       authorPhoneNumber="(202) 555-0003"
       authorProfileName="On🔥!"
@@ -1999,7 +1999,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="deep_orange"
+      authorColor="deep_orange"
       conversationType="group"
       authorName="Mr. Fire"
       authorPhoneNumber="(202) 555-0003"
@@ -2013,7 +2013,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="purple"
+      authorColor="purple"
       conversationType="group"
       authorName="Mr. Fire with a super-long name and that's just what's gonna happen. No doubt."
       authorPhoneNumber="(202) 555-0003"
@@ -2025,7 +2025,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       authorName="Mr. Fire"
       conversationType="group"
       direction="incoming"
@@ -2043,7 +2043,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       conversationType="group"
       authorName="Mr. Fire"
       direction="incoming"
@@ -2065,7 +2065,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
   </li>
   <li>
     <Message
-      conversationColor="green"
+      authorColor="green"
       conversationType="group"
       authorName="Mr. Fire"
       direction="incoming"
@@ -2083,7 +2083,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
     <Message
       direction="incoming"
       conversationType="group"
-      conversationColor="red"
+      authorColor="red"
       authorName="Mr. Fire"
       text="My manifesto is now complete!"
       i18n={util.i18n}
@@ -2101,7 +2101,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="deep_orange"
+      authorColor="deep_orange"
       conversationType="group"
       authorName="Mr. Fire"
       collapseMetadata
@@ -2119,7 +2119,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
       conversationType="group"
       authorPhoneNumber="(202) 555-0003"
       text="No contact, no avatar"
-      conversationColor="grey"
+      authorColor="grey"
       i18n={util.i18n}
     />
   </li>
@@ -2127,11 +2127,11 @@ Note that the author avatar goes away if `collapseMetadata` is set.
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="deep_orange"
+      authorColor="deep_orange"
       conversationType="group"
       authorName="Mr. Fire"
       authorPhoneNumber="(202) 555-0003"
-      conversationColor="teal"
+      authorColor="teal"
       text="Contact and color, but no avatar"
       i18n={util.i18n}
     />
@@ -2139,7 +2139,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
   <li>
     <Message
       direction="outgoing"
-      conversationColor="pink"
+      authorColor="pink"
       status="delivered"
       timestamp={Date.now()}
       conversationType="group"
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index de625af70..bb750e6ee 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -68,7 +68,7 @@ export interface Props {
   authorProfileName?: string;
   /** Note: this should be formatted for display */
   authorPhoneNumber: string;
-  conversationColor: Color;
+  authorColor?: Color;
   conversationType: 'group' | 'direct';
   attachment?: Attachment;
   quote?: {
@@ -78,6 +78,7 @@ export interface Props {
     authorPhoneNumber: string;
     authorProfileName?: string;
     authorName?: string;
+    authorColor?: Color;
     onClick?: () => void;
     referencedMessageNotFound: boolean;
   };
@@ -556,13 +557,7 @@ export class Message extends React.Component<Props, State> {
   }
 
   public renderQuote() {
-    const {
-      conversationType,
-      conversationColor,
-      direction,
-      i18n,
-      quote,
-    } = this.props;
+    const { conversationType, direction, i18n, quote } = this.props;
 
     if (!quote) {
       return null;
@@ -581,7 +576,7 @@ export class Message extends React.Component<Props, State> {
         authorPhoneNumber={quote.authorPhoneNumber}
         authorProfileName={quote.authorProfileName}
         authorName={quote.authorName}
-        conversationColor={conversationColor}
+        authorColor={quote.authorColor}
         referencedMessageNotFound={quote.referencedMessageNotFound}
         isFromMe={quote.isFromMe}
         withContentAbove={withContentAbove}
@@ -644,7 +639,7 @@ export class Message extends React.Component<Props, State> {
       authorPhoneNumber,
       authorProfileName,
       collapseMetadata,
-      conversationColor,
+      authorColor,
       conversationType,
       direction,
       i18n,
@@ -662,7 +657,7 @@ export class Message extends React.Component<Props, State> {
       <div className="module-message__author-avatar">
         <Avatar
           avatarPath={authorAvatarPath}
-          color={conversationColor}
+          color={authorColor}
           conversationType="direct"
           i18n={i18n}
           name={authorName}
@@ -870,7 +865,7 @@ export class Message extends React.Component<Props, State> {
   public render() {
     const {
       authorPhoneNumber,
-      conversationColor,
+      authorColor,
       direction,
       id,
       timestamp,
@@ -899,8 +894,8 @@ export class Message extends React.Component<Props, State> {
           className={classNames(
             'module-message__container',
             `module-message__container--${direction}`,
-            direction === 'outgoing'
-              ? `module-message__container--outgoing-${conversationColor}`
+            direction === 'incoming'
+              ? `module-message__container--incoming-${authorColor}`
               : null
           )}
         >
diff --git a/ts/components/conversation/MessageDetail.md b/ts/components/conversation/MessageDetail.md
index c14c72817..b88034de7 100644
--- a/ts/components/conversation/MessageDetail.md
+++ b/ts/components/conversation/MessageDetail.md
@@ -6,7 +6,7 @@
     disableMenu: true,
     direction: 'incoming',
     timestamp: Date.now(),
-    conversationColor: 'pink',
+    authorColor: '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(),
-    conversationColor: 'pink',
+    authorColor: '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(),
-    conversationColor: 'pink',
+    authorColor: '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(),
-    conversationColor: 'pink',
+    authorColor: 'pink',
     text:
       'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
     status: 'error',
diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md
index a5cc2cd23..ad65338bf 100644
--- a/ts/components/conversation/Quote.md
+++ b/ts/components/conversation/Quote.md
@@ -3,15 +3,16 @@
 #### Plain text
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -23,10 +24,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         onClick: () => console.log('onClick'),
@@ -39,15 +41,16 @@
 #### Name variations
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Profile name"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         authorProfileName: 'OnFire',
@@ -59,10 +62,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Profile name"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         authorProfileName: 'OnFire',
@@ -73,10 +77,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Profile name"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         authorProfileName: 'OnFire',
@@ -89,10 +94,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Profile name"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         authorProfileName: 'OnFire',
@@ -106,15 +112,16 @@
 #### With emoji
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="About 🔥six🔥"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many 🔥ferrets🔥 do you have?',
         authorName: 'Mr. 🔥Fire🔥',
       }}
@@ -125,10 +132,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="About 🔥six🔥"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many 🔥ferrets🔥 do you have?',
         authorName: 'Mr. 🔥Fire🔥',
       }}
@@ -140,15 +148,16 @@
 #### Replies to you or yourself
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         isFromMe: true,
@@ -160,10 +169,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         isFromMe: true,
@@ -176,17 +186,18 @@
 #### In a group conversation
 
 ```jsx
-<util.ConversationContext theme={util.theme} type="group">
+<util.ConversationContext theme={util.theme} type="group" ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
       conversationType="group"
       authorName="Mr. 🔥Fire🔥"
-      conversationColor="green"
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -200,10 +211,11 @@
       conversationType="group"
       authorName="Mr. 🔥Fire🔥"
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -213,18 +225,398 @@
 </util.ConversationContext>
 ```
 
-#### Referenced message not found
+#### All colors
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'red',
+        text: 'red',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'red',
+        text: 'red',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'deep_orange',
+        text: 'deep_orange',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'deep_orange',
+        text: 'deep_orange',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'brown',
+        text: 'brown',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'brown',
+        text: 'brown',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'pink',
+        text: 'pink',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'pink',
+        text: 'pink',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'purple',
+        text: 'purple',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'purple',
+        text: 'purple',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'indigo',
+        text: 'indigo',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'indigo',
+        text: 'indigo',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'blue',
+        text: 'blue',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'blue',
+        text: 'blue',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'teal',
+        text: 'teal',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'teal',
+        text: 'teal',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'green',
+        text: 'green',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'green',
+        text: 'green',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'light_green',
+        text: 'light_green',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'light_green',
+        text: 'light_green',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'blue_grey',
+        text: 'blue_grey',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'blue_grey',
+        text: 'blue_grey',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'grey',
+        text: 'grey',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+  <li>
+    <Message
+      direction="outgoing"
+      timestamp={Date.now()}
+      status="sending"
+      authorColor="grey"
+      text="Nice!"
+      i18n={util.i18n}
+      quote={{
+        authorColor: 'grey',
+        text: 'grey',
+        authorPhoneNumber: '(202) 555-0011',
+        onClick: () => console.log('onClick'),
+      }}
+    />
+  </li>
+</util.ConversationContext>
+```
+
+#### Referenced message not found
+
+```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios}>
+  <li>
+    <Message
+      direction="incoming"
+      timestamp={Date.now()}
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         isFromMe: true,
@@ -237,10 +629,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         isFromMe: true,
@@ -254,10 +647,11 @@
       timestamp={Date.now()}
       conversationType="group"
       authorName="Mr. 🔥Fire🔥"
-      conversationColor="green"
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         referencedMessageNotFound: true,
@@ -272,10 +666,11 @@
       conversationType="group"
       authorName="Mr. 🔥Fire🔥"
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
         referencedMessageNotFound: true,
@@ -289,15 +684,16 @@
 #### Long names and context
 
 ```jsx
-<util.ConversationContext theme={util.theme} type="group">
+<util.ConversationContext theme={util.theme} type="group" ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Woo, otters!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text:
           'A really long link https://app.zeplin.io/project/5b2136b8e490ad6a54399857/screen/5b3bd068e03b763a0ee4c3e9',
         authorPhoneNumber: '(202) 555-0011',
@@ -311,10 +707,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Woo, otters!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text:
           'A really long link https://app.zeplin.io/project/5b2136b8e490ad6a54399857/screen/5b3bd068e03b763a0ee4c3e9',
         authorPhoneNumber: '(202) 555-0011',
@@ -329,15 +726,16 @@
 #### A lot of text in quotation
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Woo, otters!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text:
           'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
           'After that, probably dogs. And then, you know, reptiles of all types. ' +
@@ -352,10 +750,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Woo, otters!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text:
           'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
           'After that, probably dogs. And then, you know, reptiles of all types. ' +
@@ -371,15 +770,16 @@
 #### A lot of text in quotation, with icon
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Woo, otters!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text:
           'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
           'After that, probably dogs. And then, you know, reptiles of all types. ' +
@@ -398,10 +798,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Woo, otters!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text:
           'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
           'After that, probably dogs. And then, you know, reptiles of all types. ' +
@@ -421,15 +822,16 @@
 #### A lot of text in quotation, with image
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Woo, otters!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text:
           'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
           'After that, probably dogs. And then, you know, reptiles of all types. ' +
@@ -452,10 +854,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Woo, otters!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text:
           'I have lots of things to say. First, I enjoy otters. Second best are cats. ' +
           'After that, probably dogs. And then, you know, reptiles of all types. ' +
@@ -479,15 +882,16 @@
 #### Image with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Totally, it's a pretty unintuitive concept."
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'I am pretty confused about Pi.',
         attachment: {
           contentType: 'image/gif',
@@ -506,10 +910,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Totally, it's a pretty unintuitive concept."
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'I am pretty confused about Pi.',
         attachment: {
           contentType: 'image/gif',
@@ -529,15 +934,16 @@
 #### Image
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Yeah, pi. Tough to wrap your head around."
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'image/gif',
           fileName: 'pi.gif',
@@ -555,10 +961,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Yeah, pi. Tough to wrap your head around."
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'image/gif',
           fileName: 'pi.gif',
@@ -577,15 +984,16 @@
 #### Image with no thumbnail
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Yeah, pi. Tough to wrap your head around."
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'image/gif',
           fileName: 'pi.gif',
@@ -599,10 +1007,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Yeah, pi. Tough to wrap your head around."
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'image/gif',
           fileName: 'pi.gif',
@@ -617,15 +1026,16 @@
 #### Video with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Sweet the way the video sneaks up on you!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'Check out this video I found!',
         attachment: {
           contentType: 'video/mp4',
@@ -644,10 +1054,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Sweet the way the video sneaks up on you!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'Check out this video I found!',
         attachment: {
           contentType: 'video/mp4',
@@ -667,15 +1078,16 @@
 #### Video
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Awesome!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'video/mp4',
           fileName: 'freezing_bubble.mp4',
@@ -693,10 +1105,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Awesome!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'video/mp4',
           fileName: 'freezing_bubble.mp4',
@@ -715,15 +1128,16 @@
 #### Video with no thumbnail
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Awesome!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'video/mp4',
           fileName: 'freezing_bubble.mp4',
@@ -740,10 +1154,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Awesome!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'video/mp4',
           fileName: 'freezing_bubble.mp4',
@@ -761,15 +1176,16 @@
 #### Audio with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="I really like it!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'Check out this beautiful song!',
         attachment: {
           contentType: 'audio/mp3',
@@ -784,10 +1200,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="I really like it!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'Check out this beautiful song!',
         attachment: {
           contentType: 'audio/mp3',
@@ -803,15 +1220,16 @@
 #### Audio
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="I really like it!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'audio/mp3',
           fileName: 'agnus_dei.mp4',
@@ -825,10 +1243,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="I really like it!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'audio/mp3',
           fileName: 'agnus_dei.mp4',
@@ -843,15 +1262,16 @@
 #### Voice message
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Thanks for letting me know!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'audio/mp3',
           fileName: 'agnus_dei.mp4',
@@ -868,10 +1288,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Thanks for letting me know!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'audio/mp3',
           fileName: 'agnus_dei.mp4',
@@ -887,15 +1308,16 @@
 #### Other file type with caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="I can't read latin."
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'This is my manifesto. Tell me what you think!',
         attachment: {
           contentType: 'text/plain',
@@ -910,10 +1332,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="I can't read latin."
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'This is my manifesto. Tell me what you think!',
         attachment: {
           contentType: 'text/plain',
@@ -927,10 +1350,11 @@
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="I can't read latin."
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'This is my manifesto. Tell me what you think!',
         attachment: {
           contentType: 'text/plain',
@@ -946,10 +1370,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="I can't read latin."
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'This is my manifesto. Tell me what you think!',
         attachment: {
           contentType: 'text/plain',
@@ -966,15 +1391,16 @@
 #### Other file type
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       text="Sorry, I can't read latin!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'text/plain',
           fileName: 'lorum_ipsum.txt',
@@ -988,10 +1414,11 @@
       direction="outgoing"
       timestamp={Date.now()}
       status="sending"
-      conversationColor="green"
+      authorColor="green"
       text="Sorry, I can't read latin!"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         attachment: {
           contentType: 'text/plain',
           fileName: 'lorum_ipsum.txt',
@@ -1008,12 +1435,12 @@
 #### Quote, image attachment, and caption
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       attachment={{
         url: util.gifObjectUrl,
         fileName: 'pi.gif',
@@ -1024,6 +1451,7 @@
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1041,10 +1469,11 @@
         width: 320,
         height: 240,
       }}
-      conversationColor="green"
+      authorColor="green"
       text="About six"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1056,12 +1485,12 @@
 #### Quote, image attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       attachment={{
         url: util.gifObjectUrl,
         fileName: 'pi.gif',
@@ -1071,6 +1500,7 @@
       }}
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1088,9 +1518,10 @@
         width: 320,
         height: 240,
       }}
-      conversationColor="green"
+      authorColor="green"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1102,12 +1533,12 @@
 #### Quote, portrait image attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       attachment={{
         url: util.portraitYellowObjectUrl,
         fileName: 'pi.gif',
@@ -1117,6 +1548,7 @@
       }}
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1134,9 +1566,10 @@
         width: 20,
         height: 200,
       }}
-      conversationColor="green"
+      authorColor="green"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1148,12 +1581,12 @@
 #### Quote, video attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       attachment={{
         screenshot: {
           url: util.pngObjectUrl,
@@ -1168,6 +1601,7 @@
       }}
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1190,9 +1624,10 @@
         width: 800,
         height: 1200,
       }}
-      conversationColor="green"
+      authorColor="green"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1204,12 +1639,12 @@
 #### Quote, audio attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       attachment={{
         data: util.mp3ObjectUrl,
         fileName: 'agnus_dei.mp3',
@@ -1217,6 +1652,7 @@
       }}
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1232,9 +1668,10 @@
         fileName: 'agnus_dei.mp3',
         contentType: 'audio/mp3',
       }}
-      conversationColor="green"
+      authorColor="green"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1246,12 +1683,12 @@
 #### Quote, file attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       direction="incoming"
       timestamp={Date.now()}
-      conversationColor="green"
+      authorColor="green"
       attachment={{
         data: util.txtObjectUrl,
         fileName: 'lorum_ipsum.txt',
@@ -1260,6 +1697,7 @@
       }}
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1276,9 +1714,10 @@
         contentType: 'text/plain',
         fileSize: '3.05 KB',
       }}
-      conversationColor="green"
+      authorColor="green"
       i18n={util.i18n}
       quote={{
+        authorColor: 'purple',
         text: 'How many ferrets do you have?',
         authorPhoneNumber: '(202) 555-0011',
       }}
@@ -1292,11 +1731,11 @@
 #### Plain text
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
-      conversationColor="blue"
+      authorColor="blue"
       authorPhoneNumber="(202) 555-1000"
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
@@ -1310,11 +1749,11 @@
 #### With an icon
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
-      conversationColor="blue"
+      authorColor="blue"
       authorPhoneNumber="(202) 555-1000"
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
@@ -1332,11 +1771,11 @@
 #### With an image
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
-      conversationColor="blue"
+      authorColor="blue"
       authorPhoneNumber="(202) 555-1000"
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
@@ -1357,10 +1796,10 @@
 #### With attachment and no text
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
-      conversationColor="blue"
+      authorColor="blue"
       authorPhoneNumber="(202) 555-1000"
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
@@ -1381,11 +1820,11 @@
 #### With generic attachment
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
-      conversationColor="blue"
+      authorColor="blue"
       authorPhoneNumber="(202) 555-1000"
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
@@ -1403,11 +1842,11 @@
 #### With a close button
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
-      conversationColor="blue"
+      authorColor="blue"
       authorPhoneNumber="(202) 555-1000"
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
@@ -1422,11 +1861,11 @@
 #### With a close button and icon
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
-      conversationColor="blue"
+      authorColor="blue"
       authorPhoneNumber="(202) 555-1000"
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
@@ -1445,11 +1884,11 @@
 #### With a close button and image
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <div className="bottom-bar">
     <Quote
       text="How many ferrets do you have?"
-      conversationColor="blue"
+      authorColor="blue"
       authorPhoneNumber="(202) 555-1000"
       authorProfileName="Mr. Blue"
       id={Date.now() - 1000}
diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx
index 851ff94c8..6166abb7f 100644
--- a/ts/components/conversation/Quote.tsx
+++ b/ts/components/conversation/Quote.tsx
@@ -15,7 +15,7 @@ interface Props {
   authorPhoneNumber: string;
   authorProfileName?: string;
   authorName?: string;
-  conversationColor: Color;
+  authorColor?: Color;
   i18n: Localizer;
   isFromMe: boolean;
   isIncoming: boolean;
@@ -318,7 +318,7 @@ export class Quote extends React.Component<Props> {
 
   public render() {
     const {
-      conversationColor,
+      authorColor,
       isIncoming,
       onClick,
       referencedMessageNotFound,
@@ -343,8 +343,8 @@ export class Quote extends React.Component<Props> {
             'module-quote',
             isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
             isIncoming
-              ? `module-quote--incoming-${conversationColor}`
-              : `module-quote--outgoing-${conversationColor}`,
+              ? `module-quote--incoming-${authorColor}`
+              : `module-quote--outgoing-${authorColor}`,
             !onClick ? 'module-quote--no-click' : null,
             withContentAbove ? 'module-quote--with-content-above' : null,
             referencedMessageNotFound
diff --git a/ts/components/conversation/Timestamp.md b/ts/components/conversation/Timestamp.md
index 2d94b0d9e..94b817831 100644
--- a/ts/components/conversation/Timestamp.md
+++ b/ts/components/conversation/Timestamp.md
@@ -18,12 +18,12 @@ function getDecember1159() {
   return getJanuary1201() - 2 * 60 * 1000;
 }
 
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="red"
+      authorColor="red"
       timestamp={Date.now() - 500}
       text="500ms ago - all below 1 minute are 'now'"
       i18n={util.i18n}
@@ -31,9 +31,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={Date.now() - 5 * 1000}
       text="Five seconds ago"
       i18n={util.i18n}
@@ -41,9 +41,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={Date.now() - 30 * 1000}
       text="30 seconds ago"
       i18n={util.i18n}
@@ -51,9 +51,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="red"
+      authorColor="red"
       timestamp={Date.now() - 60 * 1000}
       text="One minute ago - in minutes"
       i18n={util.i18n}
@@ -61,9 +61,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={Date.now() - 30 * 60 * 1000}
       text="30 minutes ago"
       i18n={util.i18n}
@@ -71,9 +71,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={Date.now() - 45 * 60 * 1000}
       text="45 minutes ago (used to round up to 1 hour with moment)"
       i18n={util.i18n}
@@ -81,9 +81,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="red"
+      authorColor="red"
       timestamp={Date.now() - 60 * 60 * 1000}
       text="One hour ago - in hours"
       i18n={util.i18n}
@@ -91,9 +91,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={get1201()}
       text="12:01am today"
       i18n={util.i18n}
@@ -101,9 +101,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="red"
+      authorColor="red"
       timestamp={getYesterday1159()}
       text="11:59pm yesterday - adds day name"
       i18n={util.i18n}
@@ -111,9 +111,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={Date.now() - 24 * 60 * 60 * 1000}
       text="24 hours ago"
       i18n={util.i18n}
@@ -121,9 +121,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
       text="Two days ago"
       i18n={util.i18n}
@@ -131,9 +131,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="red"
+      authorColor="red"
       timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
       text="Seven days ago - adds month"
       i18n={util.i18n}
@@ -141,9 +141,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
       text="Thirty days ago"
       i18n={util.i18n}
@@ -151,9 +151,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={getJanuary1201()}
       text="January 1st at 12:01am"
       i18n={util.i18n}
@@ -161,9 +161,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="red"
+      authorColor="red"
       timestamp={getDecember1159()}
       text="December 31st at 11:59pm - adds year"
       i18n={util.i18n}
@@ -171,9 +171,9 @@ function getDecember1159() {
   </li>
   <li>
     <Message
-      direction="outgoing"
+      direction="incoming"
       status="delivered"
-      conversationColor="teal"
+      authorColor="teal"
       timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
       text="One year ago"
       i18n={util.i18n}
diff --git a/ts/styleguide/ConversationContext.tsx b/ts/styleguide/ConversationContext.tsx
index 9fbfaef35..c59b2fb0b 100644
--- a/ts/styleguide/ConversationContext.tsx
+++ b/ts/styleguide/ConversationContext.tsx
@@ -5,6 +5,7 @@ interface Props {
   /**
    * Corresponds to the theme setting in the app, and the class added to the root element.
    */
+  ios: boolean;
   theme: 'light-theme' | 'dark-theme';
   type: 'private' | 'group';
 }
@@ -15,10 +16,12 @@ interface Props {
  */
 export class ConversationContext extends React.Component<Props> {
   public render() {
-    const { theme, type } = this.props;
+    const { ios, theme, type } = this.props;
 
     return (
-      <div className={classNames(theme || 'light-theme')}>
+      <div
+        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>
diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts
index a7679c0aa..96c71e02a 100644
--- a/ts/styleguide/StyleGuideUtil.ts
+++ b/ts/styleguide/StyleGuideUtil.ts
@@ -83,6 +83,7 @@ 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 +93,7 @@ import localeMessages from '../../_locales/en/messages.json';
 import { setup } from '../../js/modules/i18n';
 const i18n = setup(locale, localeMessages);
 
-export { theme, locale, i18n };
+export { theme, ios, locale, i18n };
 
 // Telling Lodash to relinquish _ for use by underscore
 // @ts-ignore