Quick Tip: Appcelerator Titanium Dark-Mode colors

In the upcoming Appcelerator Titanium release 9.1.0 (currently available as a nightly build from http://builds.appcelerator.com/) you can use custom color names for normal or night/dark-mode.

How to

As previously you have to create a semantic.colors.json file at app/assets/semantic.colors.json with your colors:

{
    "windowBackgroundColor": {
        "dark": "#212121",
        "light": "#ffffff"
    },
    "text": {
        "dark": "#ffffff",
        "light": "#212121"
    },
    "bright": {
        "dark": "#212121",
        "light": "#ffffff"
    }
}

Before 9.1.0

Before 9.1.0 you'll have to redefine your colors like this:

Alloy.CFG.color.windowBackgroundColor = Ti.UI.fetchSemanticColor("windowBackgroundColor")

and use that in your TSS file

"Window": {
  backgroundColor: Alloy.CFG.color.windowBackgroundColor
}

After 9.1.0

Starting with 9.1.0 you can just use the semantic name:

"Window": {
  backgroundColor: "windowBackgroundColor"
}

No need to redefine it!

If you want to check if your app is in dark/night mode you can use this inside your controller

if (Ti.UI.userInterfaceStyle == Ti.UI.USER_INTERFACE_STYLE_DARK) {
  // dark mode
}

Might be useful if you want to change something else depending on your mode.

Under the hood (Android)

For Android it will create two XML files during build:

build/android/app/src/main/res/values-night/ti.semantic.colors.xml
build/android/app/src/main/res/values/ti.semantic.colors.xml

Inside those files you'll find your defined colors. If you have some errors or wrong colors it might be useful to have a look at the generated files.