Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27895] TiAPI: Handle semantic colors (dark mode) without helper function

GitHub Issuen/a
TypeImprovement
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2020-07-07T16:52:17.000+0000
Affected Version/sn/a
Fix Version/sRelease 9.1.0
ComponentsAndroid, iOS
Labelsn/a
ReporterHans Knöchel
AssigneeChristopher Williams
Created2020-05-10T07:48:27.000+0000
Updated2020-07-25T16:17:33.000+0000

Description

Titanium supports dark mode pretty okay, which is a great achievement! Unfortunately, there is one major issue when using it's API's right now: One has to fetch the colors via Ti.UI.fetchSemanticColor which does not work in Alloy (neither when styling in XML views nor in TSS styles). Users should create a mapping that fetches the color on the app start and write it to something more accessible like Alloy.CFG.styles.myColor. That is fine until you have 200+ colors that slow down the app launch by seconds (!) because all colors of the app need to be set before even shown *Suggestion*: Be able to pass semantic colors just like normal css colors, e.g. 
'#myView': {
  backgroundColor: 'contentBackgroundColor'
}
which works with just one line of code inside the color handling of iOS (WebColor.m) / Android (TiColorHelper.java). It will lead to a notable performance boost on both startup and view presentation, since we don't have to do any manual color matching anymore.

Comments

  1. Hans Knöchel 2020-05-10

    PR: https://github.com/appcelerator/titanium_mobile/pull/11699 Example: 1. Create the color contentBackgroundColor in the semantic.colors.json: 
       {
       "contentBackgroundColor": {
           "light": "#ff0000",
           "dark": "#0000ff"
       }
   }
    2. Add the following code snippet: 
       Ti.UI.createWindow({
       backgroundColor: 'contentBackgroundColor'
   }).open();
    3. Validate that the window is tinted in red for light mode and blue for dark mode.
  2. Christopher Williams 2020-06-02

    https://github.com/appcelerator/titanium_mobile/pull/11699
  3. Christopher Williams 2020-07-06

    merged to master for 9.1.0 target
  4. Lokesh Choudhary 2020-07-07

    FR Passed. Can see the respective colors for the modes. Studio Ver: 6.0.0.202005141803 SDK Ver: 9.1.0.v20200707075523 OS Ver: 10.15.5 Xcode Ver: Xcode 11.5 Appc NPM: 5.0.0 Appc CLI: 8.0.0 Daemon Ver: 3.2.0 Ti CLI Ver: 5.2.2 Alloy Ver: 1.14.6 Node Ver: 12.13.1 NPM Ver: 6.12.1 Java Ver: 11.0.6 Android Devices: ⇨ google Pixel (Android 10) IOS Simulator: Iphone 11 Pro 13.5
  5. Lokesh Choudhary 2020-07-07

    Verified the fix in SDK 9.1.0.v20200707075523. Closing.
  6. Michael Gangolf 2020-07-25

    using three character colors like 
           "black": {
           "light": "#222",
           "dark": "#AAA"
       }
    will be converted to 
       	<color name="black">#000000</color>
    inside the "/build/android/app/src/main/res/values/ti.semantic.colors.xml" (and dark version). Rest works fine!

JSON Source