add auto-contrast and support for textColor, inputBackground, and inputTextColor

Author: adboio

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## Next
 
+- chore: improve survey color handling ([#233](https://github.com/PostHog/posthog-flutter/pull/233))
+
 - feat: add `userProperties` and `userPropertiesSetOnce` parameters to `capture()` method ([#254](https://github.com/PostHog/posthog-flutter/pull/254))
 
 # 5.11.1

ios/Classes/PostHogDisplaySurvey+Dict.swift

@@ -69,6 +69,9 @@
                 if let submitButtonTextColor = appearance.submitButtonTextColor {
                     appearanceDict["submitButtonTextColor"] = submitButtonTextColor
                 }
+                if let textColor = appearance.textColor {
+                    appearanceDict["textColor"] = textColor
+                }
                 if let descriptionTextColor = appearance.descriptionTextColor {
                     appearanceDict["descriptionTextColor"] = descriptionTextColor
                 }
@@ -78,6 +81,12 @@
                 if let ratingButtonActiveColor = appearance.ratingButtonActiveColor {
                     appearanceDict["ratingButtonActiveColor"] = ratingButtonActiveColor
                 }
+                if let inputBackground = appearance.inputBackground {
+                    appearanceDict["inputBackground"] = inputBackground
+                }
+                if let inputTextColor = appearance.inputTextColor {
+                    appearanceDict["inputTextColor"] = inputTextColor
+                }
                 if let placeholder = appearance.placeholder {
                     appearanceDict["placeholder"] = placeholder
                 }

ios/posthog_flutter.podspec

@@ -21,8 +21,8 @@ Postog flutter plugin
   s.ios.dependency 'Flutter'
   s.osx.dependency 'FlutterMacOS'
 
-  # ~> Version 3.32.0 up to, but not including, 4.0.0
-  s.dependency 'PostHog', '>= 3.32.0', '< 4.0.0'
+  # ~> Version 3.38.0 up to, but not including, 4.0.0
+  s.dependency 'PostHog', '>= 3.38.0', '< 4.0.0'
 
   s.ios.deployment_target = '13.0'
   # PH iOS SDK 3.0.0 requires >= 10.15

lib/src/surveys/models/posthog_display_survey.dart

@@ -100,9 +100,12 @@ class PostHogDisplaySurvey {
         submitButtonColor: a['submitButtonColor'] as String?,
         submitButtonText: a['submitButtonText'] as String?,
         submitButtonTextColor: a['submitButtonTextColor'] as String?,
+        textColor: a['textColor'] as String?,
         descriptionTextColor: a['descriptionTextColor'] as String?,
         ratingButtonColor: a['ratingButtonColor'] as String?,
         ratingButtonActiveColor: a['ratingButtonActiveColor'] as String?,
+        inputBackground: a['inputBackground'] as String?,
+        inputTextColor: a['inputTextColor'] as String?,
         placeholder: a['placeholder'] as String?,
         displayThankYouMessage: a['displayThankYouMessage'] as bool? ?? true,
         thankYouMessageHeader: a['thankYouMessageHeader'] as String?,

lib/src/surveys/models/posthog_display_survey_appearance.dart

@@ -11,9 +11,12 @@ class PostHogDisplaySurveyAppearance {
     this.submitButtonColor,
     this.submitButtonText,
     this.submitButtonTextColor,
+    this.textColor,
     this.descriptionTextColor,
     this.ratingButtonColor,
     this.ratingButtonActiveColor,
+    this.inputBackground,
+    this.inputTextColor,
     this.placeholder,
     this.displayThankYouMessage = true,
     this.thankYouMessageHeader,
@@ -28,9 +31,12 @@ class PostHogDisplaySurveyAppearance {
   final String? submitButtonColor;
   final String? submitButtonText;
   final String? submitButtonTextColor;
+  final String? textColor;
   final String? descriptionTextColor;
   final String? ratingButtonColor;
   final String? ratingButtonActiveColor;
+  final String? inputBackground;
+  final String? inputTextColor;
   final String? placeholder;
   final bool displayThankYouMessage;
   final String? thankYouMessageHeader;

lib/src/surveys/models/survey_appearance.dart

@@ -1,3 +1,5 @@
+import 'dart:math' show sqrt;
+
 import 'package:flutter/material.dart';
 import 'posthog_display_survey_appearance.dart';
 
@@ -53,24 +55,45 @@ class SurveyAppearance {
   /// Creates a [SurveyAppearance] from a [PostHogDisplaySurveyAppearance]
   static SurveyAppearance fromPostHog(
       PostHogDisplaySurveyAppearance? appearance) {
+    final backgroundColor =
+        _colorFromHex(appearance?.backgroundColor) ?? Colors.white;
+    final submitButtonColor =
+        _colorFromHex(appearance?.submitButtonColor) ?? Colors.black;
+    final ratingButtonColor =
+        _colorFromHex(appearance?.ratingButtonColor) ?? const Color(0xFFEEEEEE);
+    final ratingButtonActiveColor =
+        _colorFromHex(appearance?.ratingButtonActiveColor) ?? Colors.black;
+
+    // Input background: use override, or slight adjustment for white backgrounds
+    final inputBackgroundColor = _colorFromHex(appearance?.inputBackground) ??
+        (backgroundColor == Colors.white
+            ? const Color(0xFFF8F8F8)
+            : backgroundColor);
+
+    // Primary text color: use textColor override if provided, otherwise auto-contrast
+    final primaryTextColor = _colorFromHex(appearance?.textColor) ??
+        _getContrastingTextColor(backgroundColor);
+
+    // Input text color: use override if provided, otherwise auto-contrast from input background
+    final inputTextColor = _colorFromHex(appearance?.inputTextColor) ??
+        _getContrastingTextColor(inputBackgroundColor);
+
     return SurveyAppearance(
-      backgroundColor:
-          _colorFromHex(appearance?.backgroundColor) ?? Colors.white,
-      submitButtonColor:
-          _colorFromHex(appearance?.submitButtonColor) ?? Colors.black,
+      backgroundColor: backgroundColor,
+      submitButtonColor: submitButtonColor,
       submitButtonText: appearance?.submitButtonText ?? 'Submit',
       submitButtonTextColor:
-          _colorFromHex(appearance?.submitButtonTextColor) ?? Colors.white,
+          _colorFromHex(appearance?.submitButtonTextColor) ??
+              _getContrastingTextColor(submitButtonColor),
       descriptionTextColor:
-          _colorFromHex(appearance?.descriptionTextColor) ?? Colors.black,
-      questionTextColor: Colors.black,
-      closeButtonColor: Colors.black,
-      ratingButtonColor: _colorFromHex(appearance?.ratingButtonColor) ??
-          const Color(0xFFEEEEEE),
-      ratingButtonActiveColor:
-          _colorFromHex(appearance?.ratingButtonActiveColor) ?? Colors.black,
-      ratingButtonSelectedTextColor: Colors.white,
-      ratingButtonUnselectedTextColor: const Color(0x80000000),
+          _colorFromHex(appearance?.descriptionTextColor) ?? primaryTextColor,
+      questionTextColor: primaryTextColor,
+      closeButtonColor: primaryTextColor,
+      ratingButtonColor: ratingButtonColor,
+      ratingButtonActiveColor: ratingButtonActiveColor,
+      ratingButtonSelectedTextColor:
+          _getContrastingTextColor(ratingButtonActiveColor),
+      ratingButtonUnselectedTextColor: inputTextColor.withAlpha(128),
       displayThankYouMessage: appearance?.displayThankYouMessage ?? true,
       thankYouMessageHeader:
           appearance?.thankYouMessageHeader ?? 'Thank you for your feedback!',
@@ -79,14 +102,28 @@ class SurveyAppearance {
           appearance?.thankYouMessageCloseButtonText ?? 'Close',
       borderColor:
           _colorFromHex(appearance?.borderColor) ?? const Color(0xFFBDBDBD),
-      inputBackgroundColor: Colors.white,
-      inputTextColor: Colors.black,
-      inputPlaceholderColor: const Color(0xFF757575),
-      choiceButtonBorderColor: Colors.black,
-      choiceButtonTextColor: Colors.black,
+      inputBackgroundColor: inputBackgroundColor,
+      inputTextColor: inputTextColor,
+      inputPlaceholderColor: inputTextColor.withAlpha(153),
+      choiceButtonBorderColor: primaryTextColor,
+      choiceButtonTextColor: primaryTextColor,
     );
   }
 
+  /// Returns black or white text color based on the perceived brightness of the background.
+  /// Uses the HSP (Highly Sensitive Perceived) color model for perceived brightness.
+  /// This matches the algorithm used in posthog-js.
+  static Color _getContrastingTextColor(Color color) {
+    final r = color.red;
+    final g = color.green;
+    final b = color.blue;
+    // HSP equation for perceived brightness
+    final hsp =
+        sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+    // Using 127.5 as threshold (same as JS)
+    return hsp > 127.5 ? Colors.black : Colors.white;
+  }
+
   static Color? _colorFromHex(String? colorString) {
     if (colorString == null || colorString.isEmpty) return null;