Use bright color for typing indicator in dark mode (#702)

CHANGELOG.md

@@ -3,7 +3,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 # Upcoming
 
-### 🔄 Changed
+### 🐞 Fixed
+- Use bright color for typing indicator animation in dark mode [#702](https://github.com/GetStream/stream-chat-swiftui/pull/702)
 
 # [4.69.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.69.0)
 _December 18, 2024_

Sources/StreamChatSwiftUI/CommonViews/TypingIndicatorView.swift

@@ -12,6 +12,10 @@ public struct TypingIndicatorView: View {
     private let animationDuration: CGFloat = 0.75
 
     public init() { /* Public init */ }
+
+    init(isTyping: Bool) {
+        _isTyping = State<Bool>(wrappedValue: isTyping)
+    }
 
     public var body: some View {
         HStack(spacing: 4) {
@@ -42,7 +46,8 @@ public struct TypingIndicatorView: View {
 
 /// View that represents one circle of the typing indicator view.
 private struct TypingIndicatorCircle: View {
-
+    @Injected(\.colors) var colors
+
     private let circleWidth: CGFloat = 4
     private let circleHeight: CGFloat = 4
     private let yOffset: CGFloat = 1.5
@@ -53,6 +58,7 @@ private struct TypingIndicatorCircle: View {
 
     var body: some View {
         Circle()
+            .foregroundColor(Color(colors.text))
             .frame(width: circleWidth, height: circleHeight)
             .opacity(isTyping ? maxOpacity : minOpacity)
             .offset(y: isTyping ? yOffset : -yOffset)

StreamChatSwiftUITests/Tests/ChatChannel/TypingIndicatorView_Tests.swift

@@ -11,10 +11,10 @@ class TypingIndicatorView_Tests: StreamChatTestCase {
 
     func test_typingIndicatorView_snapshot() {
         // Given
-        let view = TypingIndicatorView()
+        let view = TypingIndicatorView(isTyping: true)
             .frame(width: 20, height: 16)
 
         // Then
-        assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+        AssertSnapshot(view, variants: .onlyUserInterfaceStyles, size: CGSize(width: 20, height: 16))
     }
 }