ui: dark mode improvements (#322)

Applies dark mode improvements from session w/ Ale

Signed-off-by: Andrea Gottardo <andrea@gottardo.me>

android/src/main/java/com/tailscale/ipn/ui/theme/Theme.kt

@@ -86,28 +86,28 @@ private val LightColors =
 
 private val DarkColors =
     darkColorScheme(
-        primary = Color(0xFF3f5eb3), // blue-600
+        primary = Color(0xFF4B70CC), // blue-500
         onPrimary = Color(0xFFFFFFFF), // white
         primaryContainer = Color(0xFFf0f5ff), // blue-0
         onPrimaryContainer = Color(0xFF3f5eb3), // blue-600
-        error = Color(0xFF940822), // red-600
+        error = Color(0xFFB22D30), // red-500
         onError = Color(0xFFFFFFFF), // white
         errorContainer = Color(0xFFfff6f4), // red-0
         onErrorContainer = Color(0xFF940822), // red-600
         surfaceDim = Color(0xFF1f1e1e), // gray-900
         surface = Color(0xFF232222), // gray-800
-        background = Color(0xFF1f1e1e), // gray-900
+        background = Color(0xFF181717), // gray-1000
         surfaceBright = Color(0xFF444342), // gray-600
-        surfaceContainerLowest = Color(0xFF232222), // gray-800
-        surfaceContainerLow = Color(0xFF2e2d2d), // gray-700
-        surfaceContainer = Color(0xFF2e2d2d), // gray-700
-        surfaceContainerHigh = Color(0xFF2e2d2d), // gray-700
-        surfaceContainerHighest = Color(0xFF444342), // gray-600
+        surfaceContainerLowest = Color(0xFF1f1e1e), // gray-900
+        surfaceContainerLow = Color(0xFF232222), // gray-800
+        surfaceContainer = Color(0xFF181717), // gray-1000
+        surfaceContainerHigh = Color(0xFF232222), // gray-800
+        surfaceContainerHighest = Color(0xFF2e2d2d), // gray-700
         surfaceVariant = Color(0xFF1f1e1e), // gray-900
         onSurface = Color(0xFFfaf9f8), // gray-0
         onSurfaceVariant = Color(0xFFafacab), // gray-400
         outline = Color(0xFF706E6D), // gray-500
-        outlineVariant = Color(0xFF444342), // gray-600
+        outlineVariant = Color(0xFF2E2D2D), // gray-700
         inverseSurface = Color(0xFFEDEBEA), // gray-200
         inverseOnSurface = Color(0xFF000000), // black
         scrim = Color(0xAA000000), // black
@@ -144,13 +144,13 @@ val ColorScheme.off: Color
   @Composable
   get() =
       if (isSystemInDarkTheme()) {
-        Color(0xFFAFACAB) // gray-400
+        Color(0xFF444342) // gray-600
       } else {
         Color(0xFFD9D6D5) // gray-300
       }
 
 val ColorScheme.link: Color
-  get() = onPrimaryContainer
+  get() = primary
 
 /**
  * Main color scheme for list items, uses onPrimaryContainer color for leading and trailing icons.

android/src/main/java/com/tailscale/ipn/ui/view/MainView.kt

@@ -48,6 +48,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.platform.LocalFocusManager
@@ -94,7 +95,11 @@ data class MainViewNavigation(
 
 @OptIn(ExperimentalPermissionsApi::class)
 @Composable
-fun MainView(loginAtUrl: (String) -> Unit, navigation: MainViewNavigation, viewModel: MainViewModel = viewModel()) {
+fun MainView(
+    loginAtUrl: (String) -> Unit,
+    navigation: MainViewNavigation,
+    viewModel: MainViewModel = viewModel()
+) {
   LoadingIndicator.Wrap {
     Scaffold(contentWindowInsets = WindowInsets.Companion.statusBars) { paddingInsets ->
       Column(
@@ -194,9 +199,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
               modifier = Modifier.clickable { navAction() },
               colors =
                   if (active) MaterialTheme.colorScheme.primaryListItem
-                  else
-                      ListItemDefaults.colors(
-                          containerColor = MaterialTheme.colorScheme.surfaceContainerLowest),
+                  else ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surface),
               overlineContent = {
                 Text(
                     stringResource(R.string.exit_node),
@@ -238,10 +241,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) {
 @Composable
 fun SettingsButton(action: () -> Unit) {
   IconButton(modifier = Modifier.size(24.dp), onClick = { action() }) {
-    Icon(
-        Icons.Outlined.Settings,
-        null,
-    )
+    Icon(Icons.Outlined.Settings, null, tint = MaterialTheme.colorScheme.onSurfaceVariant)
   }
 }
 
@@ -251,7 +251,8 @@ fun StartingView() {
       modifier = Modifier.fillMaxSize(),
       verticalArrangement = Arrangement.Center,
       horizontalAlignment = Alignment.CenterHorizontally) {
-        TailscaleLogoView(animated = true, usesOnBackgroundColors = false, Modifier.size(40.dp))
+        TailscaleLogoView(
+            animated = true, usesOnBackgroundColors = false, Modifier.size(40.dp).alpha(0.3f))
       }
 }
 
@@ -286,8 +287,7 @@ fun ConnectView(
               textAlign = TextAlign.Center)
           Spacer(modifier = Modifier.size(1.dp))
           selfNode?.let {
-            PrimaryActionButton(
-                onClick = { loginAtUrlAction(it.nodeAdminUrl) }) {
+            PrimaryActionButton(onClick = { loginAtUrlAction(it.nodeAdminUrl) }) {
               Text(
                   text = stringResource(id = R.string.open_admin_console),
                   fontSize = MaterialTheme.typography.titleMedium.fontSize)
@@ -356,7 +356,8 @@ fun PeerList(
 ) {
   val peerList = viewModel.peers.collectAsState(initial = emptyList<PeerSet>())
   val searchTermStr by viewModel.searchTerm.collectAsState(initial = "")
-  val showNoResults = remember { derivedStateOf { searchTermStr.isNotEmpty() && peerList.value.isEmpty() } }.value
+  val showNoResults =
+      remember { derivedStateOf { searchTermStr.isNotEmpty() && peerList.value.isEmpty() } }.value
   val netmap = viewModel.netmap.collectAsState()
 
   val focusManager = LocalFocusManager.current