Tweak Lawnchair preferences style

- Migrate preference groups from tint-based to surface-role based - Tweak top app bar colors - Tweak fonts - Use custom background for PreferenceDashboard - Use darker color for light theme surface and background colors
2025-01-15 20:37:13 +08:00
parent 05f4dbbbef
commit ebd28fa4d8
8 changed files with 136 additions and 93 deletions
@@ -140,9 +140,9 @@ fun dev.kdrag0n.monet.theme.ColorScheme.toComposeColorScheme(isDark: Boolean): C
            onTertiary = tertiary(100),
            tertiaryContainer = tertiary(90),
            onTertiaryContainer = tertiary(10),
-            background = neutralVariant98,
+            background = neutral(95),
            onBackground = neutralVariant(10),
-            surface = neutralVariant98,
+            surface = neutral(95),
            onSurface = neutralVariant(10),
            surfaceVariant = neutralVariant(90),
            onSurfaceVariant = neutralVariant(30),
@@ -2,7 +2,7 @@ package app.lawnchair.ui.preferences.components

 import android.view.HapticFeedbackConstants
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
@@ -41,6 +41,7 @@ import app.lawnchair.ui.preferences.components.layout.ExpandAndShrink
 import app.lawnchair.ui.preferences.components.layout.PreferenceGroup
 import app.lawnchair.ui.preferences.components.layout.PreferenceGroupHeading
 import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate
+import app.lawnchair.ui.theme.preferenceGroupColor
 import app.lawnchair.ui.util.addIf
 import com.android.launcher3.R
 import com.android.launcher3.Utilities
@@ -64,8 +65,8 @@ fun <T> DraggablePreferenceGroup(
    var localItems = items
    var isAnyDragging by remember { mutableStateOf(false) }

-    val elevation by animateDpAsState(
-        targetValue = if (!isAnyDragging) 1.dp else 0.dp,
+    val color by animateColorAsState(
+        targetValue = if (!isAnyDragging) preferenceGroupColor() else MaterialTheme.colorScheme.background,
        label = "card background animation",
    )

@@ -78,7 +79,7 @@ fun <T> DraggablePreferenceGroup(
        Surface(
            modifier = Modifier.padding(horizontal = 16.dp),
            shape = MaterialTheme.shapes.large,
-            tonalElevation = elevation,
+            color = color,
        ) {
            ReorderableColumn(
                modifier = Modifier,
@@ -119,7 +120,9 @@ fun <T> DraggablePreferenceGroup(
                            }
                        }
                        AnimatedVisibility(!isAnyDragging && index != localItems.lastIndex) {
-                            HorizontalDivider()
+                            HorizontalDivider(
+                                Modifier.padding(start = 50.dp, end = 16.dp),
+                            )
                        }
                    }
                }
@@ -20,7 +20,6 @@ import androidx.annotation.DrawableRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -29,7 +28,6 @@ import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
@@ -49,8 +47,6 @@ fun PreferenceCategory(
 ) {
    PreferenceTemplate(
        modifier = modifier
-            .padding(horizontal = 16.dp)
-            .clip(MaterialTheme.shapes.large)
            .clickable { onNavigate() }
            .background(
                if (isSelected) MaterialTheme.colorScheme.surfaceColorAtElevation(4.dp) else Color.Transparent,
@@ -76,7 +72,7 @@ fun PreferenceCategory(
                    painter = painterResource(id = iconResource),
                    contentDescription = null,
                    modifier = Modifier.size(24.dp),
-                    tint = MaterialTheme.colorScheme.primary,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
                )
            }
        },
@@ -29,10 +29,13 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.heading
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import app.lawnchair.ui.theme.dividerColor
+import app.lawnchair.ui.theme.preferenceGroupColor

@Composable
 fun PreferenceGroup(
@@ -44,6 +47,7 @@ fun PreferenceGroup(
    dividerStartIndent: Dp = 0.dp,
    dividerEndIndent: Dp = 0.dp,
    dividersToSkip: Int = 0,
+    dividerColor: Color = dividerColor(),
    content: @Composable () -> Unit,
 ) {
    Column(
@@ -53,7 +57,7 @@ fun PreferenceGroup(
        Surface(
            modifier = Modifier.padding(horizontal = 16.dp),
            shape = MaterialTheme.shapes.large,
-            tonalElevation = 1.dp,
+            color = preferenceGroupColor(),
        ) {
            if (showDividers) {
                DividerColumn(
@@ -61,6 +65,7 @@ fun PreferenceGroup(
                    endIndent = dividerEndIndent,
                    content = content,
                    dividersToSkip = dividersToSkip,
+                    color = dividerColor,
                )
            } else {
                Column {
@@ -82,8 +82,8 @@ fun PreferenceTemplate(
            ) {
                Column(Modifier.weight(1f)) {
                    CompositionLocalProvider(
-                        LocalContentColor provides MaterialTheme.colorScheme.onBackground,
-                        LocalTextStyle provides MaterialTheme.typography.bodyLarge,
+                        LocalContentColor provides MaterialTheme.colorScheme.onSurface,
+                        LocalTextStyle provides MaterialTheme.typography.titleMedium,
                    ) {
                        title()
                    }
@@ -22,8 +22,10 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.LargeTopAppBar
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -61,6 +63,9 @@ fun TopBar(
                }
            },
            scrollBehavior = scrollBehavior,
+            colors = TopAppBarDefaults.topAppBarColors().copy(
+                scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
+            ),
        )
    } else {
        LargeTopAppBar(
@@ -80,6 +85,9 @@ fun TopBar(
                }
            },
            scrollBehavior = scrollBehavior,
+            colors = TopAppBarDefaults.topAppBarColors().copy(
+                scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
+            ),
        )
    }
 }
@@ -41,11 +41,14 @@ import app.lawnchair.ui.preferences.components.AnnouncementPreference
 import app.lawnchair.ui.preferences.components.controls.PreferenceCategory
 import app.lawnchair.ui.preferences.components.controls.WarningPreference
 import app.lawnchair.ui.preferences.components.layout.ClickableIcon
+import app.lawnchair.ui.preferences.components.layout.DividerColumn
 import app.lawnchair.ui.preferences.components.layout.PreferenceDivider
 import app.lawnchair.ui.preferences.components.layout.PreferenceLayout
 import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate
 import app.lawnchair.ui.preferences.data.liveinfo.SyncLiveInformation
 import app.lawnchair.ui.preferences.navigation.Routes
+import app.lawnchair.ui.theme.isSelectedThemeDark
+import app.lawnchair.ui.theme.preferenceGroupColor
 import app.lawnchair.ui.util.addIf
 import app.lawnchair.util.isDefaultLauncher
 import app.lawnchair.util.restartLauncher
@@ -72,94 +75,119 @@ fun PreferencesDashboard(

        if (BuildConfig.APPLICATION_ID.contains("nightly") || BuildConfig.DEBUG) {
            PreferencesDebugWarning()
-            Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(8.dp))
        }

        if (!context.isDefaultLauncher()) {
            PreferencesSetDefaultLauncherWarning()
-            Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(8.dp))
        }

-        PreferenceCategory(
-            label = stringResource(R.string.general_label),
-            description = stringResource(R.string.general_description),
-            iconResource = R.drawable.ic_general,
-            onNavigate = { onNavigate(Routes.GENERAL) },
-            isSelected = currentRoute.contains(Routes.GENERAL),
-        )
-
-        PreferenceCategory(
-            label = stringResource(R.string.home_screen_label),
-            description = stringResource(R.string.home_screen_description),
-            iconResource = R.drawable.ic_home_screen,
-            onNavigate = { onNavigate(Routes.HOME_SCREEN) },
-            isSelected = currentRoute.contains(Routes.HOME_SCREEN),
-        )
-
-        PreferenceCategory(
-            label = stringResource(id = R.string.smartspace_widget),
-            description = stringResource(R.string.smartspace_widget_description),
-            iconResource = R.drawable.ic_smartspace,
-            onNavigate = { onNavigate(Routes.SMARTSPACE) },
-            isSelected = currentRoute.contains(Routes.SMARTSPACE),
-        )
-
-        PreferenceCategory(
-            label = stringResource(R.string.dock_label),
-            description = stringResource(R.string.dock_description),
-            iconResource = R.drawable.ic_dock,
-            onNavigate = { onNavigate(Routes.DOCK) },
-            isSelected = currentRoute.contains(Routes.DOCK),
-        )
-
-        PreferenceCategory(
-            label = stringResource(R.string.app_drawer_label),
-            description = stringResource(R.string.app_drawer_description),
-            iconResource = R.drawable.ic_app_drawer,
-            onNavigate = { onNavigate(Routes.APP_DRAWER) },
-            isSelected = currentRoute.contains(Routes.APP_DRAWER),
-        )
-
-        PreferenceCategory(
-            label = stringResource(R.string.search_bar_label),
-            description = stringResource(R.string.drawer_search_description),
-            iconResource = R.drawable.ic_search,
-            onNavigate = { onNavigate("${Routes.SEARCH}/0") },
-            isSelected = currentRoute.contains(Routes.SEARCH),
-        )
-
-        PreferenceCategory(
-            label = stringResource(R.string.folders_label),
-            description = stringResource(R.string.folders_description),
-            iconResource = R.drawable.ic_folder,
-            onNavigate = { onNavigate(Routes.FOLDERS) },
-            isSelected = currentRoute.contains(Routes.FOLDERS),
-        )
-
-        PreferenceCategory(
-            label = stringResource(id = R.string.gestures_label),
-            description = stringResource(R.string.gestures_description),
-            iconResource = R.drawable.ic_gestures,
-            onNavigate = { onNavigate(Routes.GESTURES) },
-            isSelected = currentRoute.contains(Routes.GESTURES),
-        )
-
-        if (LawnchairApp.isRecentsEnabled || BuildConfig.DEBUG) {
+        PreferenceCategoryGroup {
            PreferenceCategory(
-                label = stringResource(id = R.string.quickstep_label),
-                description = stringResource(id = R.string.quickstep_description),
-                iconResource = R.drawable.ic_quickstep,
-                onNavigate = { onNavigate(Routes.QUICKSTEP) },
-                isSelected = currentRoute.contains(Routes.QUICKSTEP),
+                label = stringResource(R.string.general_label),
+                description = stringResource(R.string.general_description),
+                iconResource = R.drawable.ic_general,
+                onNavigate = { onNavigate(Routes.GENERAL) },
+                isSelected = currentRoute.contains(Routes.GENERAL),
+            )
+
+            PreferenceCategory(
+                label = stringResource(R.string.home_screen_label),
+                description = stringResource(R.string.home_screen_description),
+                iconResource = R.drawable.ic_home_screen,
+                onNavigate = { onNavigate(Routes.HOME_SCREEN) },
+                isSelected = currentRoute.contains(Routes.HOME_SCREEN),
+            )
+
+            PreferenceCategory(
+                label = stringResource(id = R.string.smartspace_widget),
+                description = stringResource(R.string.smartspace_widget_description),
+                iconResource = R.drawable.ic_smartspace,
+                onNavigate = { onNavigate(Routes.SMARTSPACE) },
+                isSelected = currentRoute.contains(Routes.SMARTSPACE),
+            )
+
+            PreferenceCategory(
+                label = stringResource(R.string.dock_label),
+                description = stringResource(R.string.dock_description),
+                iconResource = R.drawable.ic_dock,
+                onNavigate = { onNavigate(Routes.DOCK) },
+                isSelected = currentRoute.contains(Routes.DOCK),
+            )
+
+            PreferenceCategory(
+                label = stringResource(R.string.app_drawer_label),
+                description = stringResource(R.string.app_drawer_description),
+                iconResource = R.drawable.ic_app_drawer,
+                onNavigate = { onNavigate(Routes.APP_DRAWER) },
+                isSelected = currentRoute.contains(Routes.APP_DRAWER),
+            )
+
+            PreferenceCategory(
+                label = stringResource(R.string.search_bar_label),
+                description = stringResource(R.string.drawer_search_description),
+                iconResource = R.drawable.ic_search,
+                onNavigate = { onNavigate("${Routes.SEARCH}/0") },
+                isSelected = currentRoute.contains(Routes.SEARCH),
+            )
+
+            PreferenceCategory(
+                label = stringResource(R.string.folders_label),
+                description = stringResource(R.string.folders_description),
+                iconResource = R.drawable.ic_folder,
+                onNavigate = { onNavigate(Routes.FOLDERS) },
+                isSelected = currentRoute.contains(Routes.FOLDERS),
+            )
+
+            PreferenceCategory(
+                label = stringResource(id = R.string.gestures_label),
+                description = stringResource(R.string.gestures_description),
+                iconResource = R.drawable.ic_gestures,
+                onNavigate = { onNavigate(Routes.GESTURES) },
+                isSelected = currentRoute.contains(Routes.GESTURES),
+            )
+
+            if (LawnchairApp.isRecentsEnabled || BuildConfig.DEBUG) {
+                PreferenceCategory(
+                    label = stringResource(id = R.string.quickstep_label),
+                    description = stringResource(id = R.string.quickstep_description),
+                    iconResource = R.drawable.ic_quickstep,
+                    onNavigate = { onNavigate(Routes.QUICKSTEP) },
+                    isSelected = currentRoute.contains(Routes.QUICKSTEP),
+                )
+            }
+
+            PreferenceCategory(
+                label = stringResource(R.string.about_label),
+                description = "${context.getString(R.string.derived_app_name)} ${BuildConfig.MAJOR_VERSION}",
+                iconResource = R.drawable.ic_about,
+                onNavigate = { onNavigate(Routes.ABOUT) },
+                isSelected = currentRoute.contains(Routes.ABOUT),
            )
        }
+    }
+}

-        PreferenceCategory(
-            label = stringResource(R.string.about_label),
-            description = "${context.getString(R.string.derived_app_name)} ${BuildConfig.MAJOR_VERSION}",
-            iconResource = R.drawable.ic_about,
-            onNavigate = { onNavigate(Routes.ABOUT) },
-            isSelected = currentRoute.contains(Routes.ABOUT),
+@Composable
+fun PreferenceCategoryGroup(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val color = preferenceGroupColor()
+
+    Surface(
+        modifier = modifier.padding(horizontal = 16.dp),
+        shape = MaterialTheme.shapes.large,
+        color = color,
+        tonalElevation = if (isSelectedThemeDark) 1.dp else 0.dp,
+    ) {
+        DividerColumn(
+            content = content,
+            startIndent = (-16).dp,
+            endIndent = (-16).dp,
+            color = MaterialTheme.colorScheme.surface,
+            thickness = 2.dp,
        )
    }
 }
@@ -59,5 +59,8 @@ fun Context.getSystemAccent(darkTheme: Boolean): Int {
    }
 }

+@Composable
+fun preferenceGroupColor() = (if (isSelectedThemeDark) MaterialTheme.colorScheme.surfaceContainer else MaterialTheme.colorScheme.surfaceBright)
+
@Composable
 fun dividerColor() = MaterialTheme.colorScheme.outlineVariant