diff --git a/lib/shared/message-utils.js b/lib/shared/message-utils.js
--- a/lib/shared/message-utils.js
+++ b/lib/shared/message-utils.js
@@ -495,9 +495,14 @@
   };
 }
 
+type MessagePreviewPart = {
+  +text: string,
+  // unread has highest contrast, followed by primary, followed by secondary
+  +style: 'unread' | 'primary' | 'secondary',
+};
 type MessagePreviewResult = {
-  +message: string,
-  +username: ?string,
+  +message: MessagePreviewPart,
+  +username: ?MessagePreviewPart,
 };
 function getMessagePreview(
   originalMessageInfo: MessageInfo,
@@ -512,19 +517,33 @@
       ? originalMessageInfo.sourceMessage
       : originalMessageInfo;
 
-  const messageTitle = getMessageTitle(messageInfo, threadInfo, markdownRules);
-
   const hasUsername =
     threadIsGroupChat(threadInfo) ||
     threadInfo.name !== '' ||
     messageInfo.creator.isViewer;
 
-  let userString = null;
+  let username = null;
   if (messageInfo.type === messageTypes.TEXT && hasUsername) {
-    userString = stringForUser(messageInfo.creator);
+    username = {
+      text: stringForUser(messageInfo.creator),
+      style: 'secondary',
+    };
+  }
+
+  const messageTitle = getMessageTitle(messageInfo, threadInfo, markdownRules);
+  const message = {
+    text: messageTitle,
+    style: messageInfo.type === messageTypes.TEXT ? 'primary' : 'secondary',
+  };
+
+  if (threadInfo.currentUser.unread) {
+    message.style = 'unread';
+    if (username) {
+      username.style = 'unread';
+    }
   }
 
-  return { message: messageTitle, username: userString };
+  return { message, username };
 }
 
 export {
diff --git a/web/chat/message-preview.react.js b/web/chat/message-preview.react.js
--- a/web/chat/message-preview.react.js
+++ b/web/chat/message-preview.react.js
@@ -23,7 +23,6 @@
     },
   } = props;
 
-  const colorStyle = unread ? css.unread : css.read;
   if (!originalMessageInfo) {
     return (
       <div className={classNames(css.lastMessage, css.dark, css.italic)}>
@@ -32,21 +31,22 @@
     );
   }
 
-  const { message: messageTitle, username } = getMessagePreview(
+  const { message, username } = getMessagePreview(
     originalMessageInfo,
     threadInfo,
     getDefaultTextMessageRules().simpleMarkdownRules,
   );
 
   let usernameText = null;
+  const colorStyle = unread ? css.unread : css.read;
   if (username) {
-    usernameText = <span className={colorStyle}>{`${username}: `}</span>;
+    usernameText = <span className={colorStyle}>{`${username.text}: `}</span>;
   }
 
   return (
     <div className={classNames(css.lastMessage, colorStyle)}>
       {usernameText}
-      {messageTitle}
+      {message.text}
     </div>
   );
 }
diff --git a/web/modals/threads/sidebars/sidebar.react.js b/web/modals/threads/sidebars/sidebar.react.js
--- a/web/modals/threads/sidebars/sidebar.react.js
+++ b/web/modals/threads/sidebars/sidebar.react.js
@@ -52,7 +52,9 @@
       threadInfo,
       getDefaultTextMessageRules().simpleMarkdownRules,
     );
-    const previewText = username ? `${username}: ${message}` : message;
+    const previewText = username
+      ? `${username.text}: ${message.text}`
+      : message.text;
     return (
       <>
         <div className={css.longTextEllipsis}>{previewText}</div>
diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js
--- a/web/modals/threads/subchannels/subchannel.react.js
+++ b/web/modals/threads/subchannels/subchannel.react.js
@@ -59,7 +59,9 @@
       threadInfo,
       getDefaultTextMessageRules().simpleMarkdownRules,
     );
-    const previewText = username ? `${username}: ${message}` : message;
+    const previewText = username
+      ? `${username.text}: ${message.text}`
+      : message.text;
     return (
       <>
         <div className={css.longTextEllipsis}>{previewText}</div>