feat: adds support for light and dark mode background colors. closes #…

…343
timbru31 · Dec 7, 2021 · 9ef0a33 · 9ef0a33
1 parent e656f63
commit 9ef0a33
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -150,7 +150,19 @@ await lottie.splashscreen.once(event: LottieEvent).then(event => console.log(eve
     <preference name="LottieHideTimeout" value="?" /> <!-- CAUTION: iOS reads this value in **SECONDS**, Android reads this value in **MILLISECONDS**>
 ```
 
--   `LottieBackgroundColor` (String, default `#ffffff`). Background color of the overlay. Can be used with alpha values, too. (For more information see the [8 digits notation of RGB notation](https://drafts.csswg.org/css-color/#hex-notation))
+-   `LottieBackgroundColorLight` (String, default `#ffffff`). Background color of the overlay in light. Can be used with alpha values, too. (For more information see the [8 digits notation of RGB notation](https://drafts.csswg.org/css-color/#hex-notation))
+
+```xml
+    <preference name="LottieBackgroundColorLight" value="#fff000a3" />
+```
+
+-   `LottieBackgroundColorDark` (String, default `#ffffff`). Background color of the overlay in dark mode. Can be used with alpha values, too. (For more information see the [8 digits notation of RGB notation](https://drafts.csswg.org/css-color/#hex-notation))
+
+```xml
+    <preference name="LottieBackgroundColorDark" value="#fff000a3" />
+```
+
+-   `LottieBackgroundColor` (String, default `#ffffff`). Background color of the overlay as a fallback if there are no dark or light mode colors defined. Can be used with alpha values, too. (For more information see the [8 digits notation of RGB notation](https://drafts.csswg.org/css-color/#hex-notation))
 
 ```xml
     <preference name="LottieBackgroundColor" value="#fff000a3" />

diff --git a/src/android/LottieSplashScreen.kt b/src/android/LottieSplashScreen.kt
@@ -144,17 +144,7 @@ class LottieSplashScreen : CordovaPlugin() {
     private fun getAnimationLocation(location: String?): String? {
         var animationLocation = location
         if (animationLocation.isNullOrBlank()) {
-            val nightMode: Boolean = cordova.context.resources.configuration.uiMode and
-                Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES
-
-            animationLocation = when {
-                nightMode -> preferences.getString("LottieAnimationLocationDark", "")
-                else -> preferences.getString("LottieAnimationLocationLight", "")
-            }
-
-            if (animationLocation.isNullOrBlank()) {
-                animationLocation = preferences.getString("LottieAnimationLocation", "")
-            }
+            animationLocation = getUIModeDependentPreference("LottieAnimationLocation")
         }
         return animationLocation
     }
@@ -223,7 +213,7 @@ class LottieSplashScreen : CordovaPlugin() {
         )
 
         val color = ColorHelper.parseColor(
-            preferences.getString(
+            getUIModeDependentPreference(
                 "LottieBackgroundColor",
                 "#ffffff"
             )
@@ -347,6 +337,22 @@ class LottieSplashScreen : CordovaPlugin() {
         }
     }
 
+    private fun getUIModeDependentPreference(preferenceBaseName: String, defaultValue: String? = ""): String {
+        val nightMode: Boolean = cordova.context.resources.configuration.uiMode and
+            Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES
+
+        var preferenceValue: String
+        preferenceValue = when {
+            nightMode -> preferences.getString("""${preferenceBaseName}Dark""", defaultValue)
+            else -> preferences.getString("""${preferenceBaseName}Light""", defaultValue)
+        }
+
+        if (preferenceValue.isBlank()) {
+            preferenceValue = preferences.getString(preferenceBaseName, defaultValue)
+        }
+        return preferenceValue
+    }
+
     companion object {
         private const val LOG_TAG = "LottieSplashScreen"
     }

diff --git a/src/ios/LottieSplashScreen.swift b/src/ios/LottieSplashScreen.swift
@@ -118,7 +118,8 @@ import Lottie
         animationViewContainer = UIView(frame: (parentView?.bounds)!)
         animationViewContainer?.layer.zPosition = 1
 
-        let backgroundColor = commandDelegate?.settings["LottieBackgroundColor".lowercased()] as? String
+        let backgroundColor = getUIModeDependentPreference(basePreferenceName: "LottieBackgroundColor", defaultValue: "#ffffff")
+
         animationViewContainer?.autoresizingMask = [
             .flexibleWidth, .flexibleHeight, .flexibleTopMargin, .flexibleLeftMargin, .flexibleBottomMargin, .flexibleRightMargin
         ]
@@ -130,17 +131,7 @@ import Lottie
         if location != nil {
             animationLocation = location!
         } else {
-            if #available(iOS 12.0, *) {
-                if viewController.traitCollection.userInterfaceStyle == .dark {
-                    animationLocation = commandDelegate?.settings["LottieAnimationLocationDark".lowercased()] as? String ?? ""
-                } else {
-                    animationLocation = commandDelegate?.settings["LottieAnimationLocationLight".lowercased()] as? String ?? ""
-                }
-            }
-
-            if animationLocation.isEmpty {
-                animationLocation = commandDelegate?.settings["LottieAnimationLocation".lowercased()] as? String ?? ""
-            }
+            animationLocation = getUIModeDependentPreference(basePreferenceName: "LottieAnimationLocation")
         }
 
         if isRemote(remote: remote) {
@@ -277,6 +268,22 @@ import Lottie
         )
     }
 
+    private func getUIModeDependentPreference(basePreferenceName: String, defaultValue: String? = "") -> String {
+        var preferenceValue = ""
+        if #available(iOS 12.0, *) {
+            if viewController.traitCollection.userInterfaceStyle == .dark {
+                preferenceValue = commandDelegate?.settings[(basePreferenceName + "Dark").lowercased()] as? String ?? defaultValue
+            } else {
+                preferenceValue = commandDelegate?.settings[(basePreferenceName + "Light").lowercased()] as? String ?? defaultValue
+            }
+        }
+
+        if preferenceValue.isEmpty {
+            preferenceValue = commandDelegate?.settings[basePreferenceName.lowercased()] as? String ?? defaultValue
+        }
+        return preferenceValue
+    }
+
     @objc private func deviceOrientationChanged() {
         animationView?.center = CGPoint(x: UIScreen.main.bounds.midX, y: UIScreen.main.bounds.midY)
     }