DEV Community

Michael Gangolf
Michael Gangolf

Posted on

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"
    }
}
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

and use that in your TSS file

"Window": {
  backgroundColor: Alloy.CFG.color.windowBackgroundColor
}
Enter fullscreen mode Exit fullscreen mode

After 9.1.0

Starting with 9.1.0 you can just use the semantic name:

"Window": {
  backgroundColor: "windowBackgroundColor"
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen 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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)