Skip to content

Commit 14d17c5

Browse files
authored
(docs): Add Information about how to use Dark Mode SplashScreens (#286)
1 parent f41610c commit 14d17c5

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ This plugin displays and hides a splash screen while your web application is lau
3838
- [Image Layout](#image-layout)
3939
- [`density`](#density)
4040
- [Image Sizing Table](#image-sizing-table)
41+
- [Dark Mode](#dark-mode)
4142
- [Example Android Configuration](#example-android-configuration)
4243
- [iOS-specific Information](#ios-specific-information)
4344
- [Launch Storyboard Images](#launch-storyboard-images)
@@ -47,6 +48,7 @@ This plugin displays and hides a splash screen while your web application is lau
4748
- [Size classes](#size-classes)
4849
- [Single-image launch screen](#single-image-launch-screen)
4950
- [Multi-image launch screen](#multi-image-launch-screen)
51+
- [Dark Mode](#dark-mode-1)
5052
- [Quirks and Known Issues](#quirks-and-known-issues)
5153
- [Windows-specific Information](#windows-specific-information)
5254
- [Preferences](#preferences)
@@ -177,6 +179,13 @@ If not all DPI images are considered, some devices might not show a SplashScreen
177179
| xxhdpi | 960x1600 | 1600x960 |
178180
| xxxhdpi | 1280x1920 | 1920x1280 |
179181

182+
#### Dark Mode (API 28+)
183+
184+
You can optionally provide an extra SplashScreen image to be used in dark/night mode when enabled on supported devices.
185+
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`
186+
187+
For more examples, please see [the Example Configuration](#example-android-configuration) section.
188+
180189
#### Example Android Configuration
181190

182191
```xml
@@ -194,6 +203,21 @@ If not all DPI images are considered, some devices might not show a SplashScreen
194203
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi" />
195204
<splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi" />
196205
<splash src="res/screen/android/splash-port-xxxhdpi.png" density="port-xxxhdpi" />
206+
207+
<!-- Dark Mode -->
208+
<splash src="res/screen/android/splash-land-hdpi.png" density="land-night-hdpi" />
209+
<splash src="res/screen/android/splash-land-ldpi.png" density="land-night-ldpi" />
210+
<splash src="res/screen/android/splash-land-mdpi.png" density="land-night-mdpi" />
211+
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-night-xhdpi" />
212+
<splash src="res/screen/android/splash-land-xxhdpi.png" density="land-night-xxhdpi" />
213+
<splash src="res/screen/android/splash-land-xxxhdpi.png" density="land-night-xxxhdpi" />
214+
215+
<splash src="res/screen/android/splash-port-hdpi.png" density="port-night-hdpi" />
216+
<splash src="res/screen/android/splash-port-ldpi.png" density="port-night-ldpi" />
217+
<splash src="res/screen/android/splash-port-mdpi.png" density="port-night-mdpi" />
218+
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-night-xhdpi" />
219+
<splash src="res/screen/android/splash-port-xxhdpi.png" density="port-night-xxhdpi" />
220+
<splash src="res/screen/android/splash-port-xxxhdpi.png" density="port-night-xxxhdpi" />
197221
</platform>
198222
```
199223

@@ -343,6 +367,23 @@ The above looks like the following in `config.xml`:
343367
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
344368
```
345369

370+
##### Dark Mode
371+
372+
Since [[email protected]](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.
373+
374+
```xml
375+
<!-- Default image to be used for all modes -->
376+
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
377+
378+
<!-- Image to use specifically for dark mode devices -->
379+
<splash src="res/screen/ios/Default@2x~universal~anyany~dark.png" />
380+
381+
<!-- Image to use specifically for light mode devices -->
382+
<splash src="res/screen/ios/Default@2x~universal~anyany~light.png" />
383+
```
384+
385+
**Note:** This works since iOS 13. iOS 12 and below will use the default SplashScreen without a luminosity suffix specified.
386+
346387
##### Quirks and Known Issues
347388

348389
1. **App on target may not reflect changes to images**

0 commit comments

Comments
 (0)