[PBIOS-427] Dark Mode Button Fix (#440)

**What does this PR do?** 
[PBIOS-427] Dark Mode Button Fix

**Screenshots:** 
![Simulator Screenshot - iPhone 15 Pro Max - 2024-08-15 at 11 03
03](https://github.com/user-attachments/assets/fcb39008-402e-4267-8d47-8c052720b903)

![Simulator Screenshot - iPhone 15 Pro Max - 2024-08-15 at 11 03
08](https://github.com/user-attachments/assets/e32b8e45-ea01-4892-8a88-2c58cb053741)

### Checklist
- [x] **LABELS** - Add a label: `breaking`, `bug`, `improvement`,
`documentation`, or `enhancement`. See
[Labels](https://github.com/powerhome/playbook-apple/labels) for
descriptions.
- [x] **RELEASES** - Add the appropriate label: `Ready for Testing` /
`Ready for Release`
- [x] **TESTING** - Have you tested your story?

---------

Co-authored-by: Ísis <[email protected]>

Sources/Playbook/Components/Button/PBButton.swift

@@ -19,7 +19,7 @@ public struct PBButton: View {
   var iconPosition: IconPosition?
   @Binding var isLoading: Bool
   let action: (() -> Void)?
-    @Environment(\.colorScheme) private var colorScheme
+  @Environment(\.colorScheme) private var colorScheme
 
   public init(
     fullWidth: Bool = false,

Sources/Playbook/Components/Button/PBReactionButton.swift

@@ -16,6 +16,7 @@ public struct PBReactionButton: View {
   let icon: String?
   let pbIcon: PBIcon?
   let isInteractive: Bool
+  @Environment(\.colorScheme) var colorScheme
   init(
     count: Binding<Int> = .constant(0),
     isHighlighted: Bool = false,
@@ -69,31 +70,39 @@ public extension PBReactionButton {
 
   var emojiView: some View {
     return Text(icon ?? "")
-      .pbFont(.monogram(12), variant: .light, color: .text(.light))
+      .pbFont(.monogram(12), variant: .light, color: textColor)
       .padding(.leading, count > 0 ? 0 : 4)
   }
 
   var countView: some View {
     return Text(count > 0 || isInteractive == true ? "\(count)" : "")
-      .pbFont(.subcaption, variant: .light, color: .text(.light))
+      .pbFont(.subcaption, variant: .light, color: textColor)
   }
 
   var addReactionView: some View {
     return HStack(alignment: .center, spacing: Spacing.xxSmall) {
       PBIcon(FontAwesome.faceSmilePlus, size: .small)
-        .foregroundStyle(Color.text(.lighter))
+        .foregroundStyle(textColor)
         .padding(.horizontal, 12)
     }
   }
 
   var pbIconView: some View {
     return HStack(alignment: .center, spacing: Spacing.xxSmall) {
       PBIcon(FontAwesome.user, size: .small)
-        .foregroundStyle(Color.text(.lighter))
+        .foregroundStyle(textColor)
         .padding(.horizontal, 14.5)
     }
   }
 
+  var textColor: Color {
+    switch colorScheme {
+    case .light: return Color.text(.lighter)
+    case .dark: return icon != nil ? Color(hex: "#687887") : Color(hex: "#687887").opacity(0.5)
+    default:
+      return Color.text(.light)
+    }
+  }
  func highlightReaction() {
     isHighlighted.toggle()
     if !isHighlighted && isInteractive {
@@ -103,3 +112,8 @@ public extension PBReactionButton {
     }
   }
 }
+
+#Preview {
+  registerFonts()
+  return PBReactionButton()
+}

Sources/Playbook/Resources/Extensions/View+ReactionButtonStyle.swift

@@ -42,4 +42,5 @@ struct ReactionButtonModifier: ViewModifier {
       #endif
       }
   }
+
 }