I thought of adding a symbol to an unread post to make it easier to identify. The end result is this - not completely sold on the star, but for now
CSS below
.DiscussionList:not(.DiscussionList--searchResults) .unread .DiscussionListItem-title:before {
content: "\f005";
font-family: "Font Awesome 5 Pro";
margin-right: 10px;
color: #FFD700;
font-weight: 600;
}
Obviously, I'm using Font Awesome Pro, so just substitute it for the free version, but you'll need to change the unicode reference to the free version as shown here
https://fontawesome.com/icons/star?style=regular
Or, taking this one step further, and replacing the "star" with a message envelope
Associated CSS
body.dark .DiscussionList:not(.DiscussionList--searchResults) .unread .DiscussionListItem-title:before {
content: "\f0e0";
font-family: "font awesome 5 pro";
margin-right: 10px;
color: #FFD700;
font-weight: 400;
}
body.dark .DiscussionList:not(.DiscussionList--searchResults) .read .DiscussionListItem-title:before {
content: "\f2b6";
font-family: "font awesome 5 pro";
margin-right: 10px;
color: #909090;
font-weight: 400;
}