diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -28,11 +28,11 @@
   background: var(--thread-active-bg);
 }
 
-div.activeThread :is(div.dark, .lastMessage span.light, .title) {
+div.activeThread :is(div.dark, .lastMessage span.read, .title) {
   color: var(--fg);
 }
 
-div.activeThread .lastMessage.light {
+div.activeThread .lastMessage.read {
   color: var(--fg);
 }
 
@@ -113,13 +113,13 @@
   color: var(--fg);
   font-weight: var(--semi-bold);
 }
-div.lastMessage.white {
+div.lastMessage.unread {
   color: var(--fg);
 }
 div.dark {
   color: var(--thread-color-read);
 }
-.light {
+.read {
   color: var(--thread-from-color-read);
 }
 div.dotContainer {
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
@@ -30,6 +30,7 @@
     },
   } = props;
 
+  const colorStyle = unread ? css.unread : css.read;
   if (!originalMessageInfo) {
     return (
       <div className={classNames(css.lastMessage, css.dark, css.italic)}>
@@ -56,10 +57,8 @@
     ) {
       const userString = stringForUser(messageInfo.creator);
       const username = `${userString}: `;
-      const usernameStyle = unread ? css.white : css.light;
-      usernameText = <span className={usernameStyle}>{username}</span>;
+      usernameText = <span className={colorStyle}>{username}</span>;
     }
-    const colorStyle = unread ? css.white : css.light;
     return (
       <div className={classNames(css.lastMessage, colorStyle)}>
         {usernameText}
@@ -67,9 +66,8 @@
       </div>
     );
   } else {
-    const colorStyle = unread ? css.white : css.light;
     return (
-      <div className={classNames([css.lastMessage, colorStyle])}>
+      <div className={classNames(css.lastMessage, colorStyle)}>
         {messageTitle}
       </div>
     );