Блог

Я пытаюсь реализовать тему темного режима в нашем приложении для iOS 13 и выше. Я перешел по этой ссылке Темный режим в iOS 13. Но я столкнулся с некоторой проблемой. Я прикрепил пример кода ниже. Я ожидаю, что если я изменю включение темного внешнего вида, то это должно изменить цвет окна в соответствии с файлом semantic colors.

 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() amp;amp; 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"
  }
}
  

Заранее спасибо!!!
дайте мне знать, если я что-то упустил.

Я сократил пример, чтобы увидеть только те части, которые необходимы, и он отлично работает (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.