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.
Top comments (0)