iOS 13+ Dark Mode in Titanium

Full support for iOS 13+ dark mode in Titanium. Works for both semantic colors and images.

⚠️ Note

You should only use this plugin if you want to support dark mode with a Titanium version < 8.2.0. Titanium 8.2.0 and later added support for dark mode based on this plugin internally, so this plugin isn't needed anymore.

The Magic

This project includes a CLI hook that generates semantic colors and images for the iOS Asset Catalog based on a JSON file of colors that can even be used cross-platform and backwards compatible. It hooks into the SDK process between generating the asset catalog and compiling the app, so you can even change colors between builds without the need of clean-building the app again.

Requirements

The following project- and OS-requirements are necessary:

• Xcode 11+
• Asset Catalog enabled
• iOS 13+ (will fallback to #000000 if called from older devices)
• Titanium SDK 8.0.0+
• A CLI plugin to hook into the asset catalog to generate the semantic colors
• A JSON file to curate the color styles

Installation

• Copy the contents of the plugin/ directory (colors) to <project>/plugins
• Link the colors plugin in your tiapp.xml:

<ti:app>
  <!-- ... -->
  <plugins>
    <!-- ... -->
    <plugin version="1.0">colors</plugin>
  </plugins>
</ti:app>

• Link the native ti.darkmode module to your project like any other native module
• Alloy: Copy your color JSON file to <project>/app/assets/json/colors.json
• Classic: Copy your color JSON file to <project>/Resources/json/colors.json
• For semantic images, make sure they are following the following scheme (-dark suffix):

# Default (Light)
image.png
[email protected]
[email protected]

# Dark
image-dark.png
[email protected]
[email protected]

• Map the colors on runtime for older devices or Android (this is just an example of how this could look like):

function initializeColors() {
  const colors = Alloy.Globals.colors = JSON.parse(Ti.Filesystem.getFile('json/colors.json').read());
  const darkmode = OS_ANDROID ? undefined : require('ti.darkmode');

  for (const color of Object.keys(colors)) {
    Alloy.CFG.styles[color] = Utils.isiOSVersionOrGreater(13) ? darkmode.fetch(color) : colors[color].light;
  }

  // Use your colors like the following
  myLabel.backgroundColor = Alloy.CFG.styles.backgroundColor
}

ToDos

• Support sub-folders
• This currently breaks incremental builds, because the Xcode project is changed after it's hash is stored

License

MIT

Author

Hans Knöchel