enhance(client): すでに読んだチャットは、読みやすさを向上させるため、背景を薄くように

CHANGELOG_CHERRYPICK.md

@@ -36,6 +36,7 @@
 - MFM 도움말에 검색 섹션 추가
 - 노트 디자인 개선
 - 채팅을 읽지 않았을 떄 표시되는 인디케이터의 위치 조정
+- 이미 읽은 채팅은 가독성 개선을 위해 배경을 연하게
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제

packages/frontend/src/pages/messaging/index.vue

@@ -9,7 +9,7 @@
 					:key="message.id"
 					v-anim="i"
 					class="_panel"
-					:class="$style.message"
+					:class="[$style.message, { [$style.isRead]: (isMe(message) || (message.groupId ? message.reads.includes($i.id) : message.isRead)) }]"
 					:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
 					:data-index="i"
 				>
@@ -208,6 +208,10 @@ definePageMetadata({
 			overflow: hidden;
 		}
 	}
+
+	&.isRead {
+		background: var(--chatReadBg);
+	}
 }
 
 .indicator {

packages/frontend/src/themes/_dark.json5

@@ -82,6 +82,7 @@
 		codeBoolean: '#c59eff',
 		deckBg: '#000',
 		htmlThemeColor: '@bg',
+		chatReadBg: ':lighten<1<@bg',
 		cherry: 'rgb(255, 207, 230)',
 		cherryX8: ':lighten<5<@cherry',
 		pick: 'rgb(185, 216, 255)',

packages/frontend/src/themes/_light.json5

@@ -82,6 +82,7 @@
 		codeBoolean: '#62b70c',
 		deckBg: ':darken<3<@bg',
 		htmlThemeColor: '@bg',
+		chatReadBg: ':lighten<1<@bg',
 		cherry: 'rgb(255, 188, 220)',
 		cherryX8: ':lighten<5<@cherry',
 		pick: 'rgb(177, 211, 255)',