From 14d17c5c648b918766c23d487fc6214fb3f52c54 Mon Sep 17 00:00:00 2001
From: Hans Krywalsky <hanskrywaa@web.de>
Date: Sat, 8 Aug 2020 14:13:48 +0200
Subject: [PATCH] (docs): Add Information about how to use Dark Mode
SplashScreens (#286)
---
README.md | 41 +++++++++++++++++++++++++++++++++++++++++
1 file changed, 41 insertions(+)
diff --git a/README.md b/README.md
index 65d25fe..36f56c1 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,7 @@ This plugin displays and hides a splash screen while your web application is lau
- [Image Layout](#image-layout)
- [`density`](#density)
- [Image Sizing Table](#image-sizing-table)
+ - [Dark Mode](#dark-mode)
- [Example Android Configuration](#example-android-configuration)
- [iOS-specific Information](#ios-specific-information)
- [Launch Storyboard Images](#launch-storyboard-images)
@@ -47,6 +48,7 @@ This plugin displays and hides a splash screen while your web application is lau
- [Size classes](#size-classes)
- [Single-image launch screen](#single-image-launch-screen)
- [Multi-image launch screen](#multi-image-launch-screen)
+ - [Dark Mode](#dark-mode-1)
- [Quirks and Known Issues](#quirks-and-known-issues)
- [Windows-specific Information](#windows-specific-information)
- [Preferences](#preferences)
@@ -177,6 +179,13 @@ If not all DPI images are considered, some devices might not show a SplashScreen
| xxhdpi | 960x1600 | 1600x960 |
| xxxhdpi | 1280x1920 | 1920x1280 |
+#### Dark Mode (API 28+)
+
+You can optionally provide an extra SplashScreen image to be used in dark/night mode when enabled on supported devices.
+To do this, add the `-night` keyword in between the **layout** and **size** keywords of the image's `density` attribute value. E.g.: `land-night-hdpi`
+
+For more examples, please see [the Example Configuration](#example-android-configuration) section.
+
#### Example Android Configuration
```xml
@@ -194,6 +203,21 @@ If not all DPI images are considered, some devices might not show a SplashScreen
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi" />
<splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi" />
<splash src="res/screen/android/splash-port-xxxhdpi.png" density="port-xxxhdpi" />
+
+ <!-- Dark Mode -->
+ <splash src="res/screen/android/splash-land-hdpi.png" density="land-night-hdpi" />
+ <splash src="res/screen/android/splash-land-ldpi.png" density="land-night-ldpi" />
+ <splash src="res/screen/android/splash-land-mdpi.png" density="land-night-mdpi" />
+ <splash src="res/screen/android/splash-land-xhdpi.png" density="land-night-xhdpi" />
+ <splash src="res/screen/android/splash-land-xxhdpi.png" density="land-night-xxhdpi" />
+ <splash src="res/screen/android/splash-land-xxxhdpi.png" density="land-night-xxxhdpi" />
+
+ <splash src="res/screen/android/splash-port-hdpi.png" density="port-night-hdpi" />
+ <splash src="res/screen/android/splash-port-ldpi.png" density="port-night-ldpi" />
+ <splash src="res/screen/android/splash-port-mdpi.png" density="port-night-mdpi" />
+ <splash src="res/screen/android/splash-port-xhdpi.png" density="port-night-xhdpi" />
+ <splash src="res/screen/android/splash-port-xxhdpi.png" density="port-night-xxhdpi" />
+ <splash src="res/screen/android/splash-port-xxxhdpi.png" density="port-night-xxxhdpi" />
</platform>
```
@@ -343,6 +367,23 @@ The above looks like the following in `config.xml`:
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
```
+##### Dark Mode
+
+Since [Cordova-iOS@6.1.0](https://github.com/apache/cordova-ios), it is now possible to optionally specify different SplashScreen images to use when the app is running in dark mode. The luminosity of SplashScreen images can be defined in `config.xml` using the `~dark` and `~light` suffixes.
+
+```xml
+<!-- Default image to be used for all modes -->
+<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
+
+<!-- Image to use specifically for dark mode devices -->
+<splash src="res/screen/ios/Default@2x~universal~anyany~dark.png" />
+
+<!-- Image to use specifically for light mode devices -->
+<splash src="res/screen/ios/Default@2x~universal~anyany~light.png" />
+```
+
+**Note:** This works since iOS 13. iOS 12 and below will use the default SplashScreen without a luminosity suffix specified.
+
##### Quirks and Known Issues
1. **App on target may not reflect changes to images**