titaniumtitanium-sdk

iOS 13 dark mode is not working using Titanium classic framework


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.


Solution

  • 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.