iOS 13 dark mode is not working using Titanium classic framework - titanium

Question

I am trying to implement dark mode theme in our app for iOS 13 and above. I have followed this link Dark Mode in iOS 13. But I am facing some issue. I have attached the sample code below. I am expecting if I change enable dark appearance then it should change the color of window according to semantic colors file.
var deviceDetect = require('./deviceDetect');
var dialog = require('./dialogueBox');
var currentStyle = deviceDetect.isIos() ? Ti.App.iOS.userInterfaceStyle : undefined;
var colorWindow = Ti.UI.fetchSemanticColor("backgroundColor");
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: colorWindow,
layout: 'vertical'
});
var top = Ti.UI.createView({
backgroundColor: 'red',
layout: 'horizontal',
height: Ti.UI.SIZE,
width: Ti.UI.FILL,
top: deviceDetect.isAndroid() ? 0 : '50%'
});
var view = Ti.UI.createView({
center: { x: 205, y: 250 },
height: 400,
width: 300,
backgroundColor: colorWindow,
layout: 'vertical',
top: '20%'
});
var img = Titanium.UI.createImageView({
center: { x: 150, y: 110 },
image: './logo.png',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
});
view.add(img);
var emailField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 30,
left: 10,
right: 10,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE
});
var passField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 10,
left: 10,
right: 10,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE
});
view.add(emailField);
view.add(passField);
if (deviceDetect.isIos() && currentStyle === Ti.App.iOS.USER_INTERFACE_STYLE_DARK) {
// dark mode
console.log("I am here", colorWindow, colorWindow[Ti.UI.semanticColorType]);
//win.backgroundColor = 'green';
}
if (deviceDetect.isIos()) {
Ti.App.iOS.addEventListener('traitcollectionchange', function (event) {
if (currentStyle !== Ti.App.iOS.userInterfaceStyle) {
currentStyle = Ti.App.iOS.userInterfaceStyle;
if (currentStyle == 2) {
//tfAmount.color = 'white';
// dark mode
//win.backgroundColor = colorWindow;
//view.backgroundColor =
} else {
//win.backgroundColor = '#AAAAFF';
//view.backgroundColor = '#90EE90';
}
//console.log(colorWindow);
//win.backgroundColor = colorWindow;
//Ti.API.info('User Interface Style changed: ' + currentStyle);
}
});
}
win.add(view);
win.add(top);
win.open();
Here are the semantic.colors.json file content:
{
"backgroundColor": {
"light": "#ffffff",
"dark": "#000000"
}
}
Thanks in advance!!!
let me know If I missing something.

Answer 1

I've slimmed down the example to see just the parts that are needed and it works fine (iOS + Android [I've used 9.1.0 already]):
/app/controllers/index.js
var colorWindow = Ti.UI.fetchSemanticColor("windowBackgroundColor");
var bgColor = Ti.UI.fetchSemanticColor("viewColor");
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: colorWindow
});
var view = Ti.UI.createView({
height: 300,
width: 300,
backgroundColor: bgColor
});
win.add(view);
win.open();
/app/assets/semantic.colors.json
{
"windowBackgroundColor": {
"dark": "#666666",
"light": "#ff0000"
},
"viewColor":{
"dark": "#00ff00",
"light": "#0000ff"
}
}
Make sure to use 9.0.3.GA (or later).
It will display a grey/green or red/blue screen, depending on your phones settings. Also make sure to close the window when changing the dark-mode on Android.