DEV Community

Michael Gangolf
Michael Gangolf

Posted on

4 2

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more