|
| 1 | +# iOS 13+ Dark Mode in Titanium |
| 2 | + |
| 3 | +Full support for iOS 13+ dark mode in Titanium. Even works if colors are changed at runtime. |
| 4 | + |
| 5 | +## The Magic |
| 6 | + |
| 7 | +This project includes a CLI hook that generates semantic colors for the iOS Asset Catalog based on a JSON |
| 8 | +file of colors that can even be used cross-platform and backwards compatible. It hooks into the SDK process |
| 9 | +between generating the asset catalog and compiling the app, so you can even change colors between builds |
| 10 | +without the need of clean-building the app again. |
| 11 | + |
| 12 | +## Requirements |
| 13 | + |
| 14 | +The following project- and OS-requirements are necessary: |
| 15 | + |
| 16 | +- [x] Xcode 11+ |
| 17 | +- [x] Asset Catalog enabled |
| 18 | +- [x] iOS 13+ (will fallback to `#000000` if called from older devices) |
| 19 | +- [x] Titanium SDK 8.0.0+ |
| 20 | +- [x] A CLI plugin to hook into the asset catalog to generate the semantic colors |
| 21 | +- [x] A JSON file to curate the color styles |
| 22 | + |
| 23 | +## Installation |
| 24 | + |
| 25 | +- [x] Copy the contents of the `plugin/` directory (`colors`) to `<project>/plugins` |
| 26 | +- [x] Link the `colors` plugin in your tiapp.xml: |
| 27 | +```xml |
| 28 | +<ti:app> |
| 29 | + <!-- ... --> |
| 30 | + <plugins> |
| 31 | + <!-- ... --> |
| 32 | + <plugin version="1.0">colors</plugin> |
| 33 | + </plugins> |
| 34 | +</ti:app> |
| 35 | +``` |
| 36 | +- [x] Link the native `ti.darkmode` module to your project like any other native module |
| 37 | +- [x] Alloy: Copy your color JSON file to `<project>/app/assets/json/colors.json` |
| 38 | +- [x] Classic: Copy your color JSON file to `<project>/Resources/json/colors.json` |
| 39 | +- [x] Map the colors on runtime for older devices or Android (this is just an example of how this could look like): |
| 40 | +```js |
| 41 | +function initializeColors() { |
| 42 | + const colors = Alloy.Globals.colors = JSON.parse(Ti.Filesystem.getFile('json/colors.json').read()); |
| 43 | + const darkmode = OS_ANDROID ? undefined : require('ti.darkmode'); |
| 44 | + |
| 45 | + for (const color of Object.keys(colors)) { |
| 46 | + Alloy.CFG.styles[color] = Utils.isiOSVersionOrGreater(13) ? darkmode.fetch(color) : colors[color].light; |
| 47 | + } |
| 48 | + |
| 49 | + // Use your colors like the following |
| 50 | + myLabel.backgroundColor = Alloy.CFG.styles.backgroundColor |
| 51 | +} |
| 52 | +``` |
| 53 | + |
| 54 | +## Notes |
| 55 | + |
| 56 | +The native module returns a native `TiColor` object that holds a reference to the native `UIColor` object. Unfortunately, not all |
| 57 | +Titanium API's can consume this object so far, so you might require an SDK update to support this to 100 %. A pull request |
| 58 | +is pending and should be merged before iOS 13 is released. |
| 59 | + |
| 60 | +## License |
| 61 | + |
| 62 | +MIT |
| 63 | + |
| 64 | +## Author |
| 65 | + |
| 66 | +Hans Knöchel |
0 commit comments