Add first version of theme color

Author: garchiro7

articles/communication-services/concepts/ui-library/includes/mobile-ui-use-cases.md

@@ -190,9 +190,9 @@ For more information, see [How to customize the button bar](../../../how-tos/ui-
 
 UI Library provides the capability to join a call skipping the setup screen of the call join experience. By default, user goes through a setup screen to join a call. Here, user sets the call configuration such as camera turn on or off, microphone turn on or off and audio device selection before joining a call. This screen requires user interaction to join a call, which might be unnecessary for some users. So we provide the capability to join a call by skipping the setup screen and providing the call configuration APIs. For more information, see [How to use Skip Setup Screen Feature.](../../../how-tos/ui-library-sdk/skip-setup-screen.md)
 
-### Theming
+### Theming & colors
 
-You can use the UI Library call composite for iOS and Android to create a custom theme of a caller's experience. To create the platform experience, pass a set of theming colors as shown in the following table. For more information, see [How to create your theme](../../../how-tos/ui-library-sdk/theming.md).
+You can use the UI Library call composite for iOS and Android to create a custom theme of a caller's experience. You have the flexibility to customize the primary colors. This feature allows you to tailor the color scheme to match your specific branding needs. By adjusting primary colors, you can ensure the interface seamlessly integrates with your brand’s visual identity, enhancing user experience while maintaining consistency across your applications. For more information, see [How to create your theme](../../../how-tos/ui-library-sdk/theming.md).
 
 | Android                            | iOS                                     |
 | -------------------------------------------------------- | --------------------------------------------------------------- |

articles/communication-services/how-tos/ui-library-sdk/includes/theming/android.md

@@ -79,3 +79,27 @@ The Android resource system handles the night theme. Night mode on Android is a
 To enable night mode programmatically, Android provides the following function. However, this configuration applies globally to the application. There's no reliable way to set night mode for a single activity. To enforce a dark theme, use the following setting in your applications:
 
 `AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)`
+
+### Font color
+
+The `foregroundOnPrimaryColor` allows you to programmatically update the font color that appears on elements using the primary color. You can use this  method when you want to match a specific theme or brand guidelines. By invoking `foregroundOnPrimaryColor`, you should ensure that the text remains legible and visually appealing by selecting an appropriate contrasting font color for the primary-colored components.
+
+#### [Kotlin](#tab/kotlin)
+
+```kotlin
+val callComposite: CallComposite =
+        CallCompositeBuilder()
+            .theme(R.style.MyCompany_CallComposite)
+            .build()
+```
+
+#### [Java](#tab/java)
+
+```java
+CallComposite callComposite = 
+    new CallCompositeBuilder()
+        .theme(R.style.MyCompany_CallComposite)
+        .build();
+```
+
+----

articles/communication-services/how-tos/ui-library-sdk/includes/theming/ios.md

@@ -58,6 +58,49 @@ class CustomThemeOptions: ThemeOptions {
 let callCompositeOptions = CallCompositeOptions(theme: CustomThemeOptions())
 ```
 
+### Font color
+
+The `foregroundOnPrimaryColor` allows you to programmatically update the font color that appears on elements using the primary color. You can use this  method when you want to match a specific theme or brand guidelines. By invoking `foregroundOnPrimaryColor`, you should ensure that the text remains legible and visually appealing by selecting an appropriate contrasting font color for the primary-colored components.
+
+```swift
+struct CustomColorTheming: ThemeOptions {    
+
+    private var envConfigSubject: EnvConfigSubject  
+
+    init(envConfigSubject: EnvConfigSubject) {        
+        self.envConfigSubject = envConfigSubject    
+    }    
+
+    var primaryColor: UIColor {        
+        return UIColor(envConfigSubject.primaryColor)    
+    }    
+    
+    var primaryColorTint10: UIColor {        
+        return UIColor(envConfigSubject.tint10)    
+    }    
+    
+    var primaryColorTint20: UIColor {        
+        return UIColor(envConfigSubject.tint20)    
+    }    
+    
+    var primaryColorTint30: UIColor {        
+        return UIColor(envConfigSubject.tint30)    
+    }    
+    
+    var foregroundOnPrimaryColor: UIColor {        
+        return UIColor(envConfigSubject.foregroundOnPrimaryColor)    
+    }    
+
+    var colorSchemeOverride: UIUserInterfaceStyle {        
+        return envConfigSubject.colorSchemeOverride    
+    }
+}
+
+
+let callCompositeOptions = CallCompositeOptions(theme: CustomColorTheming())
+
+```
+
 ### Defining color assets
 
 Define each color in the assets, with a shade for the light and dark modes. The following reference image shows how to configure the assets on an Xcode project.