feat: rework system bar colors

android/src/main/kotlin/dev/msfjarvis/claw/android/MainActivity.kt

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2021-2022 Harsh Shandilya.
+ * Copyright © 2021-2023 Harsh Shandilya.
  * Use of this source code is governed by an MIT-style
  * license that can be found in the LICENSE file or at
  * https://opensource.org/licenses/MIT.
@@ -12,6 +12,7 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
+import androidx.core.view.WindowCompat
 import com.deliveryhero.whetstone.Whetstone
 import com.deliveryhero.whetstone.activity.ContributesActivityInjector
 import dev.msfjarvis.claw.android.ui.LobstersApp
@@ -30,6 +31,7 @@ class MainActivity : ComponentActivity() {
     super.onCreate(savedInstanceState)
     installSplashScreen()
     Whetstone.inject(this)
+    WindowCompat.setDecorFitsSystemWindows(window, false)
     setContent {
       LobstersApp(
         urlLauncher = urlLauncher,

android/src/main/kotlin/dev/msfjarvis/claw/android/ui/LobstersApp.kt

@@ -11,18 +11,14 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.stringResource
@@ -38,10 +34,10 @@ import androidx.navigation.navArgument
 import androidx.navigation.navDeepLink
 import androidx.paging.compose.collectAsLazyPagingItems
 import com.deliveryhero.whetstone.compose.injectedViewModel
-import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import dev.msfjarvis.claw.android.R
 import dev.msfjarvis.claw.android.ui.decorations.ClawNavigationBar
 import dev.msfjarvis.claw.android.ui.decorations.NavigationItem
+import dev.msfjarvis.claw.android.ui.decorations.TransparentSystemBars
 import dev.msfjarvis.claw.android.ui.lists.DatabasePosts
 import dev.msfjarvis.claw.android.ui.lists.NetworkPosts
 import dev.msfjarvis.claw.android.ui.navigation.Destinations
@@ -52,7 +48,6 @@ import dev.msfjarvis.claw.common.comments.HTMLConverter
 import dev.msfjarvis.claw.common.res.ClawIcons
 import dev.msfjarvis.claw.common.theme.LobstersTheme
 import dev.msfjarvis.claw.common.ui.decorations.ClawAppBar
-import dev.msfjarvis.claw.common.ui.surfaceColorAtNavigationBarElevation
 import dev.msfjarvis.claw.common.urllauncher.UrlLauncher
 import dev.msfjarvis.claw.common.user.UserProfile
 import kotlinx.collections.immutable.persistentListOf
@@ -71,7 +66,6 @@ fun LobstersApp(
   modifier: Modifier = Modifier,
   viewModel: ClawViewModel = injectedViewModel(),
 ) {
-  val systemUiController = rememberSystemUiController()
   val hottestListState = rememberLazyListState()
   val newestListState = rememberLazyListState()
   val savedListState = rememberLazyListState()
@@ -90,9 +84,6 @@ fun LobstersApp(
     dynamicColor = true,
     providedValues = arrayOf(LocalUriHandler provides urlLauncher),
   ) {
-    val currentUiMode = LocalConfiguration.current.uiMode
-    val systemBarsColor = MaterialTheme.colorScheme.surfaceColorAtNavigationBarElevation()
-    val backgroundColor = MaterialTheme.colorScheme.background
     val navItems =
       persistentListOf(
         NavigationItem(
@@ -121,23 +112,11 @@ fun LobstersApp(
         },
       )
 
-    SideEffect { systemUiController.setStatusBarColor(color = systemBarsColor) }
+    TransparentSystemBars()
-
-    // Track UI mode as a key to force a navbar color update when dark theme is toggled
-    LaunchedEffect(currentDestination, currentUiMode) {
-      val color =
-        if (navItems.none { item -> item.route == currentDestination }) {
-          backgroundColor
-        } else {
-          systemBarsColor
-        }
-      systemUiController.setNavigationBarColor(color = color)
-    }
 
     Scaffold(
       topBar = {
         ClawAppBar(
-          backgroundColor = systemBarsColor,
           navigationIcon = {
             if (navItems.none { it.route == currentDestination }) {
               IconButton(

android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/TransparentSystemBars.kt

@@ -0,0 +1,25 @@
+/*
+ * Copyright © 2023 Harsh Shandilya.
+ * Use of this source code is governed by an MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+package dev.msfjarvis.claw.android.ui.decorations
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.ui.graphics.Color
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+
+@Composable
+fun TransparentSystemBars() {
+  val systemUiController = rememberSystemUiController()
+  val useDarkIcons = !isSystemInDarkTheme()
+
+  DisposableEffect(systemUiController, useDarkIcons) {
+    systemUiController.setSystemBarsColor(color = Color.Transparent, darkIcons = useDarkIcons)
+
+    onDispose {}
+  }
+}

common/src/main/kotlin/dev/msfjarvis/claw/common/ui/decorations/ClawAppBar.kt

@@ -8,25 +8,21 @@ package dev.msfjarvis.claw.common.ui.decorations
 
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import dev.msfjarvis.claw.common.theme.LobstersTheme
 import dev.msfjarvis.claw.common.ui.preview.DevicePreviews
 import dev.msfjarvis.claw.common.ui.preview.ThemePreviews
-import dev.msfjarvis.claw.common.ui.surfaceColorAtNavigationBarElevation
 
 @Composable
 @OptIn(ExperimentalMaterial3Api::class)
 fun ClawAppBar(
-  backgroundColor: Color,
   modifier: Modifier = Modifier,
   navigationIcon: @Composable () -> Unit = {},
   title: @Composable () -> Unit = {},
@@ -35,7 +31,7 @@ fun ClawAppBar(
   TopAppBar(
     title = title,
     modifier = modifier.shadow(8.dp),
-    colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = backgroundColor),
+    colors = TopAppBarDefaults.smallTopAppBarColors(),
     navigationIcon = navigationIcon,
     actions = actions,
   )
@@ -47,7 +43,6 @@ fun ClawAppBar(
 fun ClawAppBarPreview() {
   LobstersTheme {
     ClawAppBar(
-      backgroundColor = MaterialTheme.colorScheme.surfaceColorAtNavigationBarElevation(),
       title = { Text("Claw", fontWeight = FontWeight.Bold) },
     )
   }