Implemented dark/light mode UI on settings screen

app/src/main/java/com/vpn/fastestvpnservice/MainActivity.kt

@@ -110,7 +110,7 @@ open class MainActivity : DockActivity(), ConnectivityReceiver.ConnectivityRecei
 //                    finish()
 
                 // true false
-                isDarkTheme.value = true
+//                isDarkTheme.value = true
                 FastestVPNTheme(isDarkTheme.value) {
 //                        window.statusBarColor = colorResource(id = R.color.blue_text).toArgb()
                     val navController = rememberNavController()

app/src/main/java/com/vpn/fastestvpnservice/screensTV/SettingsScreenTV.kt

@@ -32,6 +32,8 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.selection.selectable
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.DarkMode
 import androidx.compose.material3.DockedSearchBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -236,11 +238,10 @@ fun SettingsTV(navHostController: NavHostController) {
                     icon = R.drawable.notification3x,
                     text = "Notifications",
                     onClick = { navHostController.navigate(ScreenTV.NotificationTV.route) },
-                    isLastRow = true
                 )
-//                AddRowDarkLightThemeTV(
-//                    icon = Icons.Default.DarkMode,
-//                    text = "Theme")
+                AddRowDarkLightThemeTV(
+                    icon = Icons.Default.DarkMode,
+                    text = "Theme")
             }
         }
     }
@@ -272,8 +273,10 @@ fun ColumnScope.AddRowSettingsTV(
             .fillMaxWidth()
             .padding(top = 5.dp, end = 27.dp)
             .clip(RoundedCornerShape(4.dp))
-            .background(if (isRowFocused) MaterialTheme.colorScheme.inverseOnSurface
-            else MaterialTheme.colorScheme.onBackground)
+            .background(
+                if (isRowFocused) MaterialTheme.colorScheme.inverseOnSurface
+                else MaterialTheme.colorScheme.onBackground
+            )
             .onKeyEvent {
                 if (isLastRow) {
                     if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionDown) {
@@ -285,17 +288,19 @@ fun ColumnScope.AddRowSettingsTV(
                         isSecondItemPressed.value = true
                     }
                     false
-                } else { false }
+                } else {
+                    false
+                }
             }
             .onFocusChanged {
                 isRowFocused = it.isFocused
             }
             .height(61.dp)
-            .pointerInput(Unit) {
-                detectTapGestures {
-                    onClick()
-                }
-            }
+//            .pointerInput(Unit) {
+//                detectTapGestures {
+//                    onClick()
+//                }
+//            }
             .clickable {
                 onClick()
             },
@@ -356,6 +361,7 @@ fun ColumnScope.AddRowSettingsTV(
     }
 }
 
+
 @Composable
 fun ColumnScope.AddTextSettingsTV(
     text: String,
@@ -390,8 +396,10 @@ fun ColumnScope.AddRowSwitchTV(icon: Int, text: String, focusRequester3: FocusRe
             .fillMaxWidth()
             .padding(top = 5.dp, end = 27.dp)
             .clip(RoundedCornerShape(4.dp))
-            .background(if (isRowFocused) MaterialTheme.colorScheme.inverseOnSurface
-            else MaterialTheme.colorScheme.onBackground)
+            .background(
+                if (isRowFocused) MaterialTheme.colorScheme.inverseOnSurface
+                else MaterialTheme.colorScheme.onBackground
+            )
 //            .focusRequester(focusRequester3)
             .onFocusChanged {
                 isRowFocused = it.isFocused
@@ -516,8 +524,10 @@ fun ColumnScope.AddRowSettingsColumnTV(
             .fillMaxWidth()
             .padding(top = 5.dp, end = 27.dp)
             .clip(RoundedCornerShape(4.dp))
-            .background(if (isFirstRowFocused) MaterialTheme.colorScheme.inverseOnSurface
-            else MaterialTheme.colorScheme.onBackground)
+            .background(
+                if (isFirstRowFocused) MaterialTheme.colorScheme.inverseOnSurface
+                else MaterialTheme.colorScheme.onBackground
+            )
             .height(61.dp)
 //            .onKeyEvent {
 //                when (it.key) {
@@ -558,7 +568,7 @@ fun ColumnScope.AddRowSettingsColumnTV(
 //            }
             .clickable {
                 isSheetOpen = true
-                       }
+            }
         ,
         horizontalArrangement = Arrangement.Start,
         verticalAlignment = Alignment.CenterVertically
@@ -667,8 +677,10 @@ fun ColumnScope.AddRowSettingsColumnTV(
                             Row(
                                 modifier = Modifier
                                     .fillMaxWidth()
-                                    .background(if (isButtonFocused && isFocusedAnyItem) MaterialTheme.colorScheme.inverseOnSurface
-                                    else Color.Transparent)
+                                    .background(
+                                        if (isButtonFocused && isFocusedAnyItem) MaterialTheme.colorScheme.inverseOnSurface
+                                        else Color.Transparent
+                                    )
                                     .padding(start = 2.dp)
                                     .onFocusChanged {
                                         if (it.isFocused) {
@@ -791,8 +803,10 @@ fun ColumnScope.AddRowSettingsSmartTV(
             .fillMaxWidth()
             .padding(top = 5.dp, end = 27.dp)
             .clip(RoundedCornerShape(4.dp))
-            .background(if (isRowFocused) MaterialTheme.colorScheme.inverseOnSurface
-            else MaterialTheme.colorScheme.onBackground)
+            .background(
+                if (isRowFocused) MaterialTheme.colorScheme.inverseOnSurface
+                else MaterialTheme.colorScheme.onBackground
+            )
 //            .onKeyEvent {
 //                when (it.key) {
 //                    Key.DirectionLeft -> {
@@ -921,8 +935,10 @@ fun ColumnScope.AddRowSettingsSmartTV(
                         Row(
                             modifier = Modifier
                                 .fillMaxWidth()
-                                .background(if (isButtonFocused && isAnyItemFocused) MaterialTheme.colorScheme.inverseOnSurface
-                                else Color.Transparent)
+                                .background(
+                                    if (isButtonFocused && isAnyItemFocused) MaterialTheme.colorScheme.inverseOnSurface
+                                    else Color.Transparent
+                                )
                                 .padding(start = 2.dp)
                                 .onFocusChanged {
                                     if (it.isFocused) {
@@ -1128,26 +1144,42 @@ fun AddRowDarkLightThemeTV(
     val context = LocalContext.current
     val basePreferenceHelper = BasePreferenceHelper(context)
     val selectedtheme = remember { mutableStateOf(basePreferenceHelper.getTheme()) }
+    var isSelectedTheme by remember { mutableStateOf(themesList[0]) }
     val isSystemInDarkTheme = isSystemInDarkTheme()
     val systemTheme by remember { mutableStateOf(isSystemInDarkTheme) }
+    var isRowFocused by remember { mutableStateOf(false) }
+    var isButtonFocused by remember { mutableStateOf(false) }
+    var isAnyItemFocused by remember { mutableStateOf(false) }
 
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(top = 40.dp, end = 27.dp)
-            .background(Color.Transparent)
-            .pointerInput(Unit) {
-                detectTapGestures {
-                    isThemeSheetOpen = true
+            .padding(top = 5.dp, end = 27.dp)
+            .clip(RoundedCornerShape(4.dp))
+            .background(
+                if (isRowFocused) MaterialTheme.colorScheme.inverseOnSurface
+                else MaterialTheme.colorScheme.onBackground
+            )
+            .onFocusChanged {
+                isRowFocused = it.isFocused
+            }
+            .focusable()
+            .clickable {
+                isThemeSheetOpen = true
+            }
+            .onKeyEvent {
+                if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionDown) {
+                    isSecondItemPressed.value = true
                 }
+                false
             }
-            .height(24.dp),
+            .height(61.dp),
         horizontalArrangement = Arrangement.Start,
         verticalAlignment = Alignment.CenterVertically
     ) {
 
         Surface(
-            modifier = Modifier.padding(start = 0.dp),
+            modifier = Modifier.padding(start = 20.dp),
             color = Color.Transparent
         ) {
             Image(
@@ -1158,19 +1190,19 @@ fun AddRowDarkLightThemeTV(
                     .size(24.dp)
                     .weight(1f),
                 colorFilter = ColorFilter.tint(
-                    MaterialTheme.colorScheme.inversePrimary)                )
+                    MaterialTheme.colorScheme.primary)                )
         }
 
         Surface(
-            modifier = Modifier.padding(start = 0.dp),
+            modifier = Modifier.padding(start = 18.dp),
             color = Color.Transparent
         ) {
             Text(text = text,
                 style = MaterialTheme.typography.titleMedium,
-                color = MaterialTheme.colorScheme.inversePrimary,
+                color = MaterialTheme.colorScheme.primary,
                 maxLines = 1,
                 modifier = Modifier
-                    .padding(start = 18.dp, end = 0.dp)
+                    .padding(start = 0.dp, end = 0.dp)
                     .weight(1f)
             )
         }
@@ -1178,7 +1210,7 @@ fun AddRowDarkLightThemeTV(
 
         Surface(
             modifier = Modifier
-                .padding(start = 15.dp)
+                .padding(end = 20.dp)
                 .align(Alignment.CenterVertically),
             color = Color.Transparent
 
@@ -1187,11 +1219,11 @@ fun AddRowDarkLightThemeTV(
                 painter = painterResource(id = R.drawable.frontarrow3x),
                 contentDescription = "Front_Arrow",
                 modifier = Modifier
-                    .padding(start = 0.dp, end = 0.dp)
+                    .padding(start = 0.dp, end = 3.dp)
                     .size(10.dp, 18.dp)
                     .weight(1f),
                 colorFilter = ColorFilter.tint(
-                    MaterialTheme.colorScheme.inversePrimary
+                    MaterialTheme.colorScheme.primary
                 )
             )
         }
@@ -1203,13 +1235,14 @@ fun AddRowDarkLightThemeTV(
             onDismissRequest = { isThemeSheetOpen = false
             },
             sheetState = sheetState,
-            containerColor = Color.White,
+            containerColor = MaterialTheme.colorScheme.onBackground,
+            dragHandle = {}
         ) {
             Box(modifier = Modifier
                 .background(Color.Transparent)
                 .fillMaxWidth()
                 .height(250.dp)
-                .padding(start = 0.dp, top = 10.dp),
+                .padding(start = 0.dp, top = 25.dp),
             ) {
 
                 Log.d("test_theme", "systemTheme -> $systemTheme")
@@ -1221,18 +1254,27 @@ fun AddRowDarkLightThemeTV(
                     AddTextSettings(
                         text = "Theme",
                         size = 18.sp,
-                        color = MaterialTheme.colorScheme.inversePrimary,
+                        color = MaterialTheme.colorScheme.primary,
                         bottomPadding = 20.dp,
                         startPadding = 16.dp,
                         style = MaterialTheme.typography.titleSmall
                     )
                     themesList.forEach { theme ->
-
+                        isButtonFocused = isSelectedTheme == theme
                         Row(
                             modifier = Modifier
                                 .fillMaxWidth()
-                                .background(Color.Transparent)
+                                .background(
+                                    if (isButtonFocused && isAnyItemFocused) MaterialTheme.colorScheme.inverseOnSurface
+                                    else Color.Transparent
+                                )
                                 .padding(start = 2.dp)
+                                .onFocusChanged {
+                                    if (it.isFocused) {
+                                        isSelectedTheme = theme
+                                    }
+                                    isAnyItemFocused = it.isFocused
+                                }
                                 .selectable(
                                     selected = theme == selectedtheme.value,
                                     onClick = {
@@ -1283,7 +1325,7 @@ fun AddRowDarkLightThemeTV(
                             Text(text = theme,
                                 modifier = Modifier.padding(start = 12.dp),
                                 style = MaterialTheme.typography.bodySmall,
-                                color = MaterialTheme.colorScheme.inversePrimary
+                                color = MaterialTheme.colorScheme.primary
                             )
                         }
                     }