@rentlydev/rently-tuya 0.2.2 → 0.2.4

package/android/src/main/java/com/rentlytuya/dashboard/NavController.kt

@@ -149,7 +149,6 @@ fun NavController(
   }
 
   Column(modifier = Modifier.fillMaxSize()) {
-
     if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT ||
       (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE &&
         currentDestination.value != ScreenRoutes.DASHBOARD && currentDestination.value != ScreenRoutes.PLAYBACK && currentDestination.value != ScreenRoutes.ACTIVITY_HISTORY)
@@ -163,6 +162,7 @@ fun NavController(
           currentDestination.value == ScreenRoutes.DASHBOARD -> deviceName.value
           else -> currentDestination.value
         },
+        currentRoute = currentDestination.value,
         onTrailingIconClick = {
           when (currentDestination.value) {
             ScreenRoutes.PLAYBACK -> isDatePickerVisible.value = true
@@ -334,17 +334,19 @@ fun NavController(
 @Composable
 fun TopBar(
   title: String,
+  currentRoute: String = "",
   onBack: () -> Unit = {},
   onTrailingIconClick: () -> Unit = {}
 ) {
 
   val isSpecialTitle = title in listOf(ScreenRoutes.SETTINGS, ScreenRoutes.ACTIVITY_HISTORY, strings(id = R.string.deviceInformation), strings(id = R.string.activityStorage), strings(id = R.string.firmwareVersion), strings(id = R.string.updateFirmware))
+  val isDashboard = currentRoute == ScreenRoutes.DASHBOARD
 
   Box(
     modifier = Modifier
       .fillMaxWidth()
       .fillMaxHeight(0.075f)
-      .background(if (isSpecialTitle) LocalColor.Main.Light else LocalColor.Monochrome.Grey)
+      .background(if (isDashboard) LocalColor.Monochrome.DarkGrey else LocalColor.Main.Light)
   ) {
     IconButton(
       modifier = Modifier
@@ -360,9 +362,10 @@ fun TopBar(
       Image(
         modifier = Modifier.size(35.dp),
         painter = painterResource(
-          id = if (isSpecialTitle) R.drawable.ic_action_arrow_backward else R.drawable.ic_arrow_backward_white
+          id = if (isDashboard) R.drawable.ic_arrow_backward_white else R.drawable.ic_action_arrow_backward
         ),
-        contentDescription = "back"
+        contentDescription = "back",
+        colorFilter = if (isDashboard) null else ColorFilter.tint(color = LocalColor.Monochrome.BlackColor)
       )
     }
 
@@ -377,8 +380,7 @@ fun TopBar(
         title = title,
         semiBold = true,
         xl20 = true,
-        white = !isSpecialTitle,
-        black = isSpecialTitle
+        customColor = if (isDashboard) LocalColor.Monochrome.StaticWhite else LocalColor.Monochrome.BlackColor
       )
     }
     if (!isSpecialTitle || title == ScreenRoutes.PLAYBACK || title == ScreenRoutes.ACTIVITY_HISTORY) {
@@ -394,11 +396,7 @@ fun TopBar(
             id = if (title == ScreenRoutes.PLAYBACK || title == ScreenRoutes.ACTIVITY_HISTORY) R.drawable.ic_calendar else R.drawable.ic_setting
           ),
           contentDescription = "trailingIcon",
-          colorFilter = if (title == ScreenRoutes.ACTIVITY_HISTORY) {
-            ColorFilter.tint(color = LocalColor.Monochrome.Grey)
-          } else {
-            null
-          }
+          colorFilter = if (isDashboard) null else ColorFilter.tint(color = LocalColor.Monochrome.BlackColor)
         )
       }
     }

package/android/src/main/java/com/rentlytuya/dashboard/OfflineScreen.kt

@@ -17,6 +17,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import com.facebook.react.ReactApplication
@@ -63,7 +64,7 @@ fun OfflineScreen(
         modifier = Modifier
           .padding(bottom = 15.dp),
         title = strings(id = R.string.connectionFailed),
-        white = true,
+        customColor = LocalColor.Monochrome.StaticWhite,
         xl20 = true,
         bold = true,
         center = true
@@ -73,7 +74,7 @@ fun OfflineScreen(
         modifier = Modifier
           .padding(bottom = 10.dp),
         title = strings(id = R.string.pleaseCheckTheFollowing),
-        white = true,
+        customColor = LocalColor.Monochrome.StaticWhite,
         maxLines = 2
       )
 
@@ -81,7 +82,7 @@ fun OfflineScreen(
         modifier = Modifier
           .padding(start = 10.dp, bottom = 10.dp),
         title = strings(id = R.string.moveYourWiFi),
-        white = true,
+        customColor = LocalColor.Monochrome.StaticWhite,
         maxLines = 2
       )
 
@@ -93,7 +94,7 @@ fun OfflineScreen(
         } else {
           strings(id = R.string.pressTheDoorbellButtonFor15s)
         },
-        white = true,
+        customColor = LocalColor.Monochrome.StaticWhite,
         maxLines = 6
       )
 
@@ -102,7 +103,7 @@ fun OfflineScreen(
           modifier = Modifier
             .padding(start = 10.dp, top = 10.dp),
           title = strings(id = R.string.ensureTheHomeBaseIsPlugged),
-          white = true,
+          customColor = LocalColor.Monochrome.StaticWhite,
           maxLines = 4
         )
       }
@@ -111,7 +112,7 @@ fun OfflineScreen(
         modifier = Modifier
           .padding(top = 25.dp),
         title = strings(id = R.string.firstTimeUsingDoorbell),
-        white = true
+        customColor = LocalColor.Monochrome.StaticWhite
       )
 
       AnchorButton(
@@ -119,7 +120,7 @@ fun OfflineScreen(
           .padding(bottom = 20.dp),
         id = "Connect_Doorbell_To_WiFi",
         title = strings(id = R.string.connectDoorbellToWiFi),
-        primary = true,
+        customColor = LocalColor.Primary.Light,
         underLine = true,
         onClick = {
             KeylessModule.instance?.sendDataToJS(
@@ -146,7 +147,8 @@ fun OfflineScreen(
         xl20 = true,
         black = true,
         iconId = R.drawable.ic_retry,
-        textColor = LocalColor.Primary.Light,
+        textColor = LocalColor.Monochrome.StaticWhite,
+        backgroundColor = LocalColor.Monochrome.Black,
         borderColor = LocalColor.Primary.Light
       ) {
         onReConnect()
@@ -156,7 +158,7 @@ fun OfflineScreen(
         modifier = Modifier
           .padding(bottom = 5.dp),
         title = strings(id = R.string.contactSupport),
-        white = true,
+        customColor = LocalColor.Monochrome.StaticWhite,
         center = true,
         maxLines = 2
       )

package/android/src/main/java/com/rentlytuya/dashboard/Playback.kt

@@ -485,7 +485,7 @@ fun VideoItem(
       .height(78.dp)
       .padding(top = 10.dp)
       .shadow(1.dp)
-      .background(if (selectedItem.value == video) LocalColor.Secondary.Light else LocalColor.Monochrome.White)
+      .background(if (selectedItem.value == video) LocalColor.Main.Dark else LocalColor.Monochrome.White)
       .clickable {
           if (selectedItem.value == video) {
             currentSliderValue.intValue = 0
@@ -508,7 +508,7 @@ fun VideoItem(
     ) {
       Label(
         title = DateUtil.convertTimestampToTime(video.startTime).uppercase(),
-        primary = true,
+        customColor = if (selectedItem.value == video) LocalColor.Monochrome.StaticWhite else LocalColor.Monochrome.BlackColor,
         l = true,
         center = true,
         semiBold = true
@@ -520,7 +520,7 @@ fun VideoItem(
             endTime = video.endTime
           )
         }",
-        secondary = true,
+        customColor = if (selectedItem.value == video) LocalColor.Monochrome.StaticWhite else LocalColor.Primary.Secondary,
         semiBold = true,
         center = true,
         s = true,

package/android/src/main/java/com/rentlytuya/tuya/Tuya.kt

@@ -55,12 +55,13 @@ object Tuya {
   var continuousRecording: Boolean = false
   var eventRecording: Boolean = false
   var setSensitivityLow: Boolean = false
+  var darkThemeEnabled: Boolean = false
+  var useSystemSetting: Boolean = false
 
   // For navigation handling for AOSU charging
   var doorbellSetting: Boolean = false
 
   val scope = CoroutineScope(Dispatchers.IO + SupervisorJob())
-
   suspend fun login(
     uid: String,
     password: String,

package/android/src/main/java/com/rentlytuya/ui/theme/LocalColor.kt

@@ -1,46 +1,53 @@
 package com.rentlytuya.ui.theme
 
 import android.util.Log
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.graphics.Color
 import com.rentlytuya.tuya.Tuya.TAG
 
 object LocalColor {
 
   object Main {
-    var Light = Color(0xFFf3faff)
-    var Dark = Color(0xFF329ddc)
+    var Light by mutableStateOf(Color(0xFFf3faff))
+    var Dark by mutableStateOf(Color(0xFF329ddc))
   }
 
   object Primary {
-    var Light = Color(0xFF39a1e8)
-    var Secondary = Color(0xFF6a97b5)
-    var Dark = Color(0xFF329ddc)
-    var Medium = Color(0xFF008adc)
+    var Light by mutableStateOf(Color(0xFF39a1e8))
+    var Secondary by mutableStateOf(Color(0xFF6a97b5))
+    var Dark by mutableStateOf(Color(0xFF329ddc))
+    var Medium by mutableStateOf(Color(0xFF008adc))
   }
 
   object Secondary {
-    var White = Color(0xFFf3faff)
-    var Light = Color(0xFFd9edfb)
+    var Light by mutableStateOf(Color(0xFFd9edfb))
   }
 
   object Danger {
-    var Primary = Color(0xFFcb0000)
+    var Primary by mutableStateOf(Color(0xFFcb0000))
+    var Secondary by mutableStateOf(Color(0xFFEF4343))
   }
 
   object Monochrome {
-    var White = Color(0xFFFFFFFF)
-    var LightGrey = Color(0xFF80FFFFFF)
-    var Regular = Color(0xFF86858C)
-    var Medium = Color(0xFF3f4d59)
-    var Grey = Color(0xFF373737)
-    var Black = Color(0xFF000000)
-    var Brown = Color(0xFFB45309)
+    var White by mutableStateOf(Color(0xFFFFFFFF))
+    var BlackColor by mutableStateOf(Color(0xFF000000))
+    var LightGrey by mutableStateOf(Color(0xFF1A1A1A))
+    var DarkGrey by mutableStateOf(Color(0xFF1A1A1A))
+    var Regular by mutableStateOf(Color(0xFF86858C))
+    var Medium by mutableStateOf(Color(0xFF3f4d59))
+    var Grey by mutableStateOf(Color(0xFF373737))
+    var Black by mutableStateOf(Color(0xFF000000))
+    var Brown by mutableStateOf(Color(0xFFB45309))
+    var DatePickerBackground by mutableStateOf(Color(0xFF177BB5))
+    val StaticWhite = Color(0xFFFFFFFF)
   }
 
-  fun setTheme(flavour: String) {
+  fun setTheme(flavour: String, darkThemeEnabled: Boolean = false) {
     when (flavour.lowercase()) {
       "keyless" -> {
-        setSmartHomeTheme()
+        setSmartHomeTheme(darkThemeEnabled)
       }
 
       "progress" -> {
@@ -60,9 +67,15 @@ object LocalColor {
   }
 }
 
-private fun setSmartHomeTheme() {
-  LocalColor.Main.Light = Color(0xFFf3faff)
-  LocalColor.Main.Dark = Color(0xFF329ddc)
+private fun setSmartHomeTheme(darkThemeEnabled: Boolean = false) {
+  LocalColor.Main.Light = if (darkThemeEnabled) Color(0xFF1A1A1A) else Color(0xFFF9FAFB)
+  LocalColor.Main.Dark = Color(0xFF177BB5)
+  LocalColor.Primary.Secondary = if (darkThemeEnabled) Color(0xFFF9FAFB) else Color(0xFF374151)
+  LocalColor.Monochrome.White = if (darkThemeEnabled) Color(0xFF242526) else Color(0xFFFFFFFF)
+  LocalColor.Monochrome.Medium = if (darkThemeEnabled) Color(0xFFF9FAFB) else Color(0xFF3f4d59)
+  LocalColor.Monochrome.Regular = if (darkThemeEnabled) Color(0xFFD1D5DB) else Color(0xFF6B7280)
+  LocalColor.Monochrome.BlackColor = if (darkThemeEnabled) Color(0xFFF9FAFB) else Color(0xFF000000)
+  LocalColor.Monochrome.DatePickerBackground = if (darkThemeEnabled) Color(0xFF373737) else Color(0xFF177BB5)
 }
 
 private fun setProgressTheme() {

package/android/src/main/java/com/rentlytuya/ui/theme/Theme.kt

@@ -8,6 +8,7 @@ import androidx.compose.runtime.SideEffect
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.WindowCompat
+import com.rentlytuya.tuya.Tuya
 
 @Composable
 fun TuyaTheme(
@@ -16,6 +17,17 @@ fun TuyaTheme(
   dynamicColor: Boolean = true,
   content: @Composable () -> Unit
 ) {
+ 
+  val effectiveDark = if (Tuya.useSystemSetting) {
+    darkTheme
+  } else {
+    Tuya.darkThemeEnabled
+  }
+
+  // Modify this if other flavors needs to support dark theme
+  SideEffect {
+    LocalColor.setTheme("keyless", effectiveDark)
+  }
 
   val view = LocalView.current
   if (!view.isInEditMode) {
@@ -23,7 +35,7 @@ fun TuyaTheme(
       val window = (view.context as Activity).window
       // window.statusBarColor = LocalColor.Monochrome.Grey.toArgb()
       window.navigationBarColor = LocalColor.Monochrome.Grey.toArgb()
-      WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
+      WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = effectiveDark
     }
   }
 

package/ios/components/Alert.swift

@@ -10,8 +10,8 @@ func getAlert(
     primaryAction: @escaping () -> Void,
     secondaryAction: @escaping () -> Void = {}
 ) -> Alert {
-    
-    updateAlertBackgroundColor()
+    // This is commented out for supporting dark mode for system alerts and pickers.
+    // updateAlertBackgroundColor()
 
     return Alert(
         title: Text(title),
@@ -30,8 +30,7 @@ func getAlert(
 }
 
 func getAlertwithSingleButton(title: String, message: String) -> Alert {
-  
-  updateAlertBackgroundColor()
+  // updateAlertBackgroundColor()
   
   return Alert(
     title: Text(title),
@@ -44,7 +43,7 @@ func getAlertwithSingleButton(title: String, message: String) -> Alert {
 
 func getSuccessAlert(title: String, action: (() -> Void)? = nil) -> Alert {
   
-  updateAlertBackgroundColor()
+  // updateAlertBackgroundColor()
   
   if let action = action {
     return Alert(
@@ -62,8 +61,7 @@ func getSuccessAlert(title: String, action: (() -> Void)? = nil) -> Alert {
 }
 
 func getFailureAlert(title: String, action: (() -> Void)? = nil) -> Alert {
-  
-  updateAlertBackgroundColor()
+  // updateAlertBackgroundColor()
 
   if let action = action {
     return Alert(

package/ios/components/AnchorButton.swift

@@ -19,6 +19,7 @@ struct AnchorButton: View {
     var primary: Bool = false
     var secondary: Bool = false
     var black: Bool = false
+    var paleWhite: Bool = false
 
     // Font Weight
     var light: Bool = false
@@ -58,6 +59,7 @@ struct AnchorButton: View {
         if primary { return LocalColor.Primary.light }
         if secondary { return LocalColor.Main.dark }
         if black { return LocalColor.Monochrome.black }
+        if paleWhite { return LocalColor.Monochrome.paleWhite }
         return LocalColor.Primary.light
     }
 

package/ios/components/Button.swift

@@ -19,6 +19,9 @@ struct CustomButton: View {
     var secondary: Bool = false
     var tertiary: Bool = false
     var black: Bool = false
+
+    //disabled Button Color
+    var greyDisabled: Bool = false
     
     // Text/Border Color
     var textColor: Color = .black
@@ -42,7 +45,7 @@ struct CustomButton: View {
         if primary {
             return LocalColor.Primary.medium
         } else if secondary {
-            return Color(red: 0.953, green: 0.467, blue: 0.529)
+            return Color(hex: "#EF4343")
         } else if tertiary {
             return LocalColor.Monochrome.regular
         } else if black {
@@ -52,6 +55,18 @@ struct CustomButton: View {
         }
     }
 
+    var disabledButtonColor: Color? {
+        if greyDisabled {
+            return Color(hex: "#6B7280")
+        } else if black {
+          return LocalColor.Monochrome.black
+        }
+      else {
+        return LocalColor.Primary.light
+      }
+      
+    }
+
     var body: some View {
         
         let font: Font = {
@@ -97,7 +112,7 @@ struct CustomButton: View {
                     .frame(maxWidth: .infinity)
             }
             .padding()
-            .background(buttonColor)
+            .background( (Tuya.shared.darkThemefinal && !secondary) ? disabledButtonColor ?? buttonColor : buttonColor)
             .opacity(disabled ? 0.5 : 1)
             .cornerRadius(cornerRadius)
             .overlay(

package/ios/components/CustomDatePicker.swift

@@ -52,7 +52,7 @@ struct CustomDatePicker: View {
                         Spacer()
                     }
                     .frame(maxWidth: .infinity)
-                    .background(LocalColor.Main.dark)
+                    .background(Tuya.shared.darkThemefinal ? Color(hex: "#242526") : LocalColor.Main.dark)
 
                     HStack {
                         Button(action: {
@@ -70,7 +70,7 @@ struct CustomDatePicker: View {
                         Label(
                             title: formatMonthYear(date: displayedDate),
                             xl18: true,
-                            black: true,
+                            blackColor: true,
                             bold: true
                         )
 
@@ -93,7 +93,7 @@ struct CustomDatePicker: View {
                         VStack {
                             Spacer()
                             ProgressView()
-                                .progressViewStyle(CircularProgressViewStyle(tint: LocalColor.Monochrome.black))
+                                .progressViewStyle(CircularProgressViewStyle(tint: LocalColor.Monochrome.blackColor))
                             Spacer()
                         }
                         .frame(maxWidth: .infinity)
@@ -117,7 +117,7 @@ struct CustomDatePicker: View {
                             id: "DatePicker_Cancel",
                             title: "Cancel",
                             l: true,
-                            secondary: true,
+                            paleWhite: true,
                             center: true
                         ) {
                             onCancel()
@@ -205,7 +205,7 @@ struct CalendarView: View {
                             .font(.footnote)
                             .frame(width: 30, height: 30)
                             .background(isSelected ? LocalColor.Main.dark : LocalColor.Monochrome.transparent)
-                            .foregroundColor(isSelected ? LocalColor.Monochrome.white : (isAvailable ? LocalColor.Monochrome.black : LocalColor.Monochrome.regular))
+                            .foregroundColor(isSelected ? LocalColor.Monochrome.whiteColor : (isAvailable ? LocalColor.Monochrome.blackColor : LocalColor.Monochrome.greyColor))
                             .overlay(
                                 Circle()
                                     .stroke(isAvailable ? LocalColor.Main.dark : LocalColor.Monochrome.transparent, lineWidth: 1)

package/ios/components/Label.swift

@@ -22,7 +22,10 @@ struct Label: View {
     var lightGrey: Bool = false
     var grey: Bool = false
     var white: Bool = false
+    var whiteColor: Bool = false
     var black: Bool = false
+    var blackColor: Bool = false
+    var greyColor: Bool = false
     var customColor: Color? = nil
     
     // Font Weight Options
@@ -58,8 +61,10 @@ struct Label: View {
             if secondary { return LocalColor.Primary.secondary }
             if lightGrey { return LocalColor.Monochrome.regular }
             if grey { return LocalColor.Monochrome.medium }
-            if white { return LocalColor.Monochrome.white }
+            if white { return LocalColor.Monochrome.whiteColor }
             if black { return LocalColor.Monochrome.black }
+            if blackColor { return LocalColor.Monochrome.blackColor }
+            if greyColor { return LocalColor.Monochrome.greyColor }
             return LocalColor.Primary.light
         }()
         

package/ios/dashboard/AdvanceSettings.swift

@@ -64,11 +64,11 @@ struct StorageSettings: View {
             VStack(alignment: .leading) {
                 Text("Note:")
                     .font(.custom(LocalFont.FontFamily.bold, size: LocalFont.FontSize.L))
-                    .foregroundColor(LocalColor.Monochrome.black)
+                    .foregroundColor(LocalColor.Monochrome.greyColor)
                 +
                 Text(" Formatting will delete all recorded activities on the SD Card.")
                     .font(.custom(LocalFont.FontFamily.semiBold, size: LocalFont.FontSize.L))
-                    .foregroundColor(LocalColor.Monochrome.black)
+                    .foregroundColor(LocalColor.Monochrome.greyColor)
                 Spacer()
                 HStack {
                     Spacer()
@@ -76,7 +76,7 @@ struct StorageSettings: View {
                         id: "FormatSDCard",
                         title: "Format",
                         secondary: true,
-                        textColor: LocalColor.Monochrome.white,
+                        textColor: LocalColor.Monochrome.whiteColor,
                         semiBold: true,
                         disabled: tuya.sdCardStatus == 4
                     ) {
@@ -107,7 +107,7 @@ struct Item: View {
                     id: title,
                     title: title,
                     l: true,
-                    black: true,
+                    grey: true,
                     semiBold: true
                 )
                 Spacer()
@@ -116,7 +116,7 @@ struct Item: View {
                         id: value,
                         title: value,
                         l: true,
-                        black: true,
+                        lightGrey: true,
                         medium: true,
                         right: true,
                         maxLines: 3

package/ios/dashboard/Dashboard.swift

@@ -146,7 +146,7 @@ struct Dashboard: View {
         }
         
         if tuya.isConnected {
-            tuya.enableMute(enable: false, type: .preview)
+            tuya.enableMute(enable: tuya.doorbell_setting ?? false, type: .preview)
         }
 
         orientationManager.updateOrientationFlag()
@@ -237,7 +237,8 @@ struct DoorbellControls: View {
                             title: tuya.isMicOn ? "Tap to mute" : "Tap to speak",
                             l: true,
                             tertiary: !tuya.isMicOn,
-                            textColor: LocalColor.Monochrome.white,
+                            greyDisabled: !tuya.isMicOn,
+                            textColor: Color.white,
                             medium: tuya.isMicOn,
                             semiBold: true,
                             cornerRadius: 40,

package/ios/dashboard/FirmwareSettings.swift

@@ -15,13 +15,13 @@ struct FirmwareSettings: View {
           if tuya.isFirmwareUpdateInProgress {
             ZStack {
               Circle()
-                .stroke(LocalColor.Primary.medium.opacity(0.2), lineWidth: 6)
+                .stroke(LocalColor.Main.dark.opacity(0.2), lineWidth: 6)
                 .frame(width: 132, height: 132)
                 .padding(20)
               
               Circle()
                 .trim(from: 0.0, to: CGFloat(tuya.firmwareUpdateProgress) / 100)
-                .stroke(LocalColor.Primary.medium, style: StrokeStyle(lineWidth: 6, lineCap: .round))
+                .stroke(LocalColor.Main.dark, style: StrokeStyle(lineWidth: 6, lineCap: .round))
                 .rotationEffect(.degrees(-90))
                 .frame(width: 132, height: 132)
                 .padding(20)
@@ -43,7 +43,7 @@ struct FirmwareSettings: View {
             Spacer()
             Label(title: tuya.firmwareUpdateProgress >= 50 && tuya.firmwareUpdateProgress < 100 ? "Please keep the doorbell powered on while we complete this update. Thank you for your patience." : "This might take a few minutes. During this time you will not be able to use your video doorbell.",
                   l: true,
-                  black: true,
+                  blackColor: true,
                   center: true)
             .padding(20)
           }
@@ -61,26 +61,26 @@ struct FirmwareSettings: View {
                 Label(
                   title: "Current Firmware Version:",
                   l: true,
-                  black: true,
+                  grey: true,
                   semiBold: true
                 )
                 Label(
                   title: (tuya.firmwareNewVersion != nil) ? "New Version Available:" : "",
                   l: true,
-                  black: true,
+                  grey: true,
                   semiBold: true
                 )
                 VStack(alignment: .leading, spacing: 0) {
                   Label(
                     title: Tuya.shared.whatsNew != nil ? "What's new?" : "",
                     l: true,
-                    black: true,
+                    grey: true,
                     semiBold: true
                   )
                   Label(
                     title: Tuya.shared.whatsNew ?? "",
                     l: true,
-                    black: true,
+                    grey: true,
                     semiBold: true
                   )
                   .padding(12)
@@ -91,13 +91,14 @@ struct FirmwareSettings: View {
                 Label(
                   title: Tuya.shared.firmwareVersion ?? "",
                   l: true,
-                  black: true,
+                  lightGrey: true,
                   semiBold: true
                 )
                 
                 Label(
                   title: Tuya.shared.firmwareNewVersion ?? "",
                   l: true,
+                  lightGrey: true,
                   semiBold: true
                 )
                 Spacer()
@@ -146,7 +147,8 @@ struct FirmwareSettings: View {
               id: "UpdateFirmware",
               title: "Update Firmware",
               l: true,
-              textColor: LocalColor.Monochrome.white,
+              greyDisabled: tuya.isAutomaticUpdateEnabled || !tuya.isFirmwareUpdateAvailable || tuya.isFirmwareUpdateInProgress,
+              textColor: LocalColor.Monochrome.whiteColor,
               medium: true,
               semiBold: true,
               disabled: tuya.isAutomaticUpdateEnabled || !tuya.isFirmwareUpdateAvailable || tuya.isFirmwareUpdateInProgress,