https://github.com/hansemannn/titanium-dark-mode
Full support for iOS 13+ / Android 10+ dark mode (semantic colors and images) in Appcelerator Titanium
https://github.com/hansemannn/titanium-dark-mode
appcelerator axway darkmode ios13 titanium
Last synced: about 1 month ago
JSON representation
Full support for iOS 13+ / Android 10+ dark mode (semantic colors and images) in Appcelerator Titanium
- Host: GitHub
- URL: https://github.com/hansemannn/titanium-dark-mode
- Owner: hansemannn
- License: mit
- Created: 2019-06-04T23:36:34.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-09T17:46:58.000Z (over 5 years ago)
- Last Synced: 2025-03-29T01:12:03.506Z (2 months ago)
- Topics: appcelerator, axway, darkmode, ios13, titanium
- Language: JavaScript
- Homepage:
- Size: 211 KB
- Stars: 26
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
- [x] Xcode 11+
- [x] Asset Catalog enabled
- [x] iOS 13+ (will fallback to `#000000` if called from older devices)
- [x] Titanium SDK 8.0.0+
- [x] A CLI plugin to hook into the asset catalog to generate the semantic colors
- [x] A JSON file to curate the color styles
## Installation
- [x] Copy the contents of the `plugin/` directory (`colors`) to `/plugins`
- [x] Link the `colors` plugin in your tiapp.xml:
```xml
colors
```
- [x] Link the native `ti.darkmode` module to your project like any other native module
- [x] Alloy: Copy your color JSON file to `/app/assets/json/colors.json`
- [x] Classic: Copy your color JSON file to `/Resources/json/colors.json`
- [x] For semantic images, make sure they are following the following scheme (`-dark` suffix):
```sh
# Default (Light)
image.png
[email protected]
[email protected]
# Dark
image-dark.png
[email protected]
[email protected]
```
- [x] Map the colors on runtime for older devices or Android (this is just an example of how this could look like):
```js
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