Change colors in the default SDK views

I have integrated the SDK into my app and everything went fine, but the default SDK views (which are compiled/uncontrolled) have issues with colors, as shown in the screenshot:

Just for the record, the above view is Chat (it’s localized), but the other default SDK views have the same problem. Is there any way I could change those colors?

Thanks in advance!

Hey @joao.moraes

Thanks for using the dev forum!

Can you provide the SDK version number you are using?
Are you using these colors elsewhere in the app? When using the default meeting/ui the SDK uses the navigation controller that it is provided to control the flow of the meeting views.

Thanks!
Michael

I’m using the latest SDK version: v5.0.24433.0616

These colors (yellow and cyan) are not being used anywhere else in the app, which is using the SDK custom meeting UI.

@joao.moraes

Interesting! This localization is pt-PT correct? Have you modified any of the localized strings? I am trying to reproduce now.

Edit: I could not reproduce on the sample application. Would you be able to run this application and let me know if you still see this issue?

Thanks!
Michael

It’s pt-BR. I modified some of the localized strings. I’ve tried without localizing but the problem persists.

In the sample app it’s working though. In my app, I’m not setting colors anywhere, so if you have any idea where I could set different colors (or any other setting) to fix or work around this, please let me know.

Just so you know, the SDK itself is running above the root view controller, which gets default settings, since my app isn’t native, it’s cross-platform. I compared the sample app with the SDK part in my app with a diff tool and it didn’t return any differences regarding color setting. Which other kind of settings could affect the colors in the SDK default views?

Hey @joao.moraes

Is it possible the cross-platform factor could be causing this issue? Does switching between light and dark mode effect the colors?

Beyond that, here are the things that could be effecting this:

  • The localization strings. (Try en-US, and see if you have the same problem).

  • The cross-platform tool could be providing custom fonts or text colors.

  • Apple allows you to modify the colors of fonts across your device for vision-impared individuals. To see if this setting might’ve been turned on. Go into the iOS settings under Accessibility -> Display & Text Sizes -> Color filters.

The UI provided by default is not very customizable beyond localization and toggling elements. Does adding a UILabel to some view give the label unusual colors as well?

Michael

Hey @Michael_Condon

Yes, it’s indeed possible, although I can’t find how. I’m forcing the light mode in Info.plist, so that shouldn’t be the problem.

  • I’ve tried en-US but no success

  • No custom fonts or text colors are provided for the iOS native views, because the cross-platform view renders through its own engine, which doesn’t (or shouldn’t) affect the iOS views. However, some default setting (which the default SDK UI uses) may be missing and thus the unusual colors. Can you tell whether the UILabel (or whatever view) in default Chat UI uses the default settings for text color and font, or if it explicitly sets them?

  • The color filter setting is turned off.

I’ve created some native UIViewControllers and added UITableView, UILabel, etc. and none of them has unusual colors, even those with no additional setting.

Hey @joao.moraes,

Sorry, that is very strange, and that must be really frustrating.
Unfortunately, I do not have access to the info about how those colors are chosen.

Can you try swapping the SDK for this version: https://github.com/zoom/zoom-sdk-ios/releases/tag/v4.6.21666.0428

If the problem persists after changing the sdk version, can you provide an SDK log and the name of the cross-platform tool you are using?

Thanks!
Michael

I’m going to try swapping the SDK version.

You mean the usual app log, right? I’m using Flutter. The integration itself went fine, that’s the only real issue I’m having so far.

But anyway, if it doesn’t work, I’ll try creating a custom chat UI, implementing the corresponding interfaces.

Hey @joao.moraes,

If you set enableLog to true when you initialize the SDK. It should put a Zoom iOS SDK log in an AppData folder: https://marketplace.zoom.us/docs/sdk/native-sdks/iOS/mastering-zoom-sdk/sdk-initialization.

Thanks!
Michael

@Michael_Condon,

Downgrading SDK version didn’t work, and the log is enabled. How can I read the .log file? It looks encrypted.

Hey @joao.moraes,

The encrypted file is actually all we need to investigate this. However, looking into this further I believe this is caused by something in Flutter unfortunately. I havent been able to reproduce this issue and these colors are not supposed to be customizable.

Hope this helps!
Michael

I have finally found the issue. As soon as I enter the chat (or any other default UI), I hadn’t paid attention before but it logs the following

[Graphics] UIColor created with component values far outside the expected range, Set a breakpoint on UIColorBreakForOutOfRangeColorComponents to debug. This message will only be logged once.

So I added a Symbolic Breakpoint for the symbol UIColorBreakForOutOfRangeColorComponents and found that the issue was in the + colorWithHex:hexColor: method provided in UIColor+Additions in MobileRTCSample: https://github.com/zoom/zoom-sdk-ios/blob/e1f67dd1155e7890da6198f78cc1f88c379e898c/MobileRTCSample/MobileRTCSample/UIColor%2BAdditions.m#L13

The problem is, when hexColor happens to be a big number for whatever reason, it overflows and/or gets the incorrect channel, so it should be shifted then bitwise-ANDed with 0xFF mask. I created a pull request with the fix: https://github.com/zoom/zoom-sdk-ios/pull/41

Thanks for all your help!

@joao.moraes

Thank you for providing that! We will look into this further. Would you be able to provide the SDK log as well, as it will help us debug this?

Michael