iOS 13 暗模式无法使用 Titanium 经典框架答案

【问题标题】：iOS 13 dark mode is not working using Titanium classic frameworkiOS 13 暗模式无法使用 Titanium 经典框架
【发布时间】：2020-12-03 12:25:49
【问题描述】：

我正在尝试在 iOS 13 及更高版本的应用中实现暗模式主题。我已经关注了这个链接Dark Mode in iOS 13。但我面临一些问题。我附上了下面的示例代码。我期待如果我更改启用深色外观，那么它应该根据语义颜色文件更改窗口的颜色。

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();

这里是semantic.colors.json 文件内容：

{
 "backgroundColor": {
    "light": "#ffffff",
    "dark": "#000000"
  }
}

提前致谢！！！如果我遗漏了什么，请告诉我。

【问题讨论】：

标签： titanium titanium-mobile appcelerator-titanium

【解决方案1】：

我已经精简了示例，只查看需要的部分并且它工作正常（iOS + Android [我已经使用过 9.1.0]）：

/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"
  }
}

确保使用 9.0.3.GA（或更高版本）。

它将显示灰/绿或红/蓝屏幕，具体取决于您的手机设置。在 Android 上更改暗模式时，请务必关闭窗口。

【讨论】：