enhance(frontend): 押したリアクションのデザインを改善 (#11434)

* enhance(frontend): 押したリアクションのデザインを改善

* Update CHANGELOG

CHANGELOG.md

@@ -18,6 +18,7 @@
 - OAuth 2.0のサポート
 
 ### Client
+- Enhance: 自分が押したリアクションのデザインを改善
 - Fix: サーバー情報画面(`/instance-info/{domain}`)でブロックができないのを修正
 - Fix: 未読のお知らせの「わかった」をクリック・タップしてもその場で「わかった」が消えない問題を修正
 

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -143,15 +143,13 @@ useTooltip(buttonEl, async (showing) => {
 		}
 	}
 
-	&.reacted {
-		background: var(--accent);
-
-		&:hover {
-			background: var(--accent);
-		}
+	&.reacted, &.reacted:hover {
+    background: var(--accentedBg);
+    color: var(--accent);
+    border: 1px solid var(--accent);
 
 		> .count {
-			color: var(--fgOnAccent);
+			color: var(--accent);
 		}
 
 		> .icon {