Tweak color scheme throughout preferences

* Update color scheme to use `neutral` colors (fix #5194)
* Separate icon selector in IconPackPreference
* Use preferenceGroupColor() for container colors
* Migrate from `*background` to `*surface` colors
This commit is contained in:
SuperDragonXD
2025-02-15 07:49:37 +08:00
parent a0b5a17ca8
commit f798ea9a66
20 changed files with 100 additions and 101 deletions
@@ -79,17 +79,17 @@ private fun delinearized(rgbComponent: Float): Int {
@Composable
fun dev.kdrag0n.monet.theme.ColorScheme.toComposeColorScheme(isDark: Boolean): ColorScheme = remember(this, isDark) {
val neutralVariant4 = neutralVariant(40).setLuminance(4f)
val neutralVariant6 = neutralVariant(40).setLuminance(6f)
val neutralVariant12 = neutralVariant(40).setLuminance(12f)
val neutralVariant17 = neutralVariant(40).setLuminance(17f)
val neutralVariant22 = neutralVariant(40).setLuminance(22f)
val neutralVariant24 = neutralVariant(40).setLuminance(24f)
val neutralVariant87 = neutralVariant(40).setLuminance(87f)
val neutralVariant92 = neutralVariant(40).setLuminance(92f)
val neutralVariant94 = neutralVariant(40).setLuminance(94f)
val neutralVariant96 = neutralVariant(40).setLuminance(96f)
val neutralVariant98 = neutralVariant(40).setLuminance(98f)
val neutral4 = neutral(40).setLuminance(4f)
val neutral6 = neutral(40).setLuminance(6f)
val neutral12 = neutral(40).setLuminance(12f)
val neutral17 = neutral(40).setLuminance(17f)
val neutral22 = neutral(40).setLuminance(22f)
val neutral24 = neutral(40).setLuminance(24f)
val neutral87 = neutral(40).setLuminance(87f)
val neutral92 = neutral(40).setLuminance(92f)
val neutral94 = neutral(40).setLuminance(94f)
val neutral96 = neutral(40).setLuminance(96f)
val neutral98 = neutral(40).setLuminance(98f)
if (isDark) {
darkColorScheme(
@@ -104,9 +104,9 @@ fun dev.kdrag0n.monet.theme.ColorScheme.toComposeColorScheme(isDark: Boolean): C
onSecondaryContainer = secondary(90),
tertiary = tertiary(80),
onTertiary = tertiary(20),
background = neutralVariant6,
background = neutral6,
onBackground = neutral(90),
surface = neutralVariant6,
surface = neutral6,
onSurface = neutral(90),
surfaceVariant = neutralVariant(30),
onSurfaceVariant = neutralVariant(80),
@@ -115,14 +115,13 @@ fun dev.kdrag0n.monet.theme.ColorScheme.toComposeColorScheme(isDark: Boolean): C
outline = neutralVariant(60),
outlineVariant = neutralVariant(30),
scrim = neutral(0),
surfaceBright = neutralVariant24,
surfaceDim = neutralVariant6,
surfaceContainerHighest = neutralVariant22,
surfaceContainerHigh = neutralVariant17,
surfaceContainer = neutralVariant12,
surfaceBright = neutral24,
surfaceDim = neutral6,
surfaceContainerHighest = neutral22,
surfaceContainerHigh = neutral17,
surfaceContainer = neutral12,
surfaceContainerLow = neutralVariant(10),
surfaceContainerLowest = neutralVariant4,
surfaceContainerLowest = neutral4,
surfaceTint = primary(80),
)
} else {
@@ -140,9 +139,9 @@ fun dev.kdrag0n.monet.theme.ColorScheme.toComposeColorScheme(isDark: Boolean): C
onTertiary = tertiary(100),
tertiaryContainer = tertiary(90),
onTertiaryContainer = tertiary(10),
background = neutral(95),
background = neutral94,
onBackground = neutralVariant(10),
surface = neutral(95),
surface = neutral94,
onSurface = neutralVariant(10),
surfaceVariant = neutralVariant(90),
onSurfaceVariant = neutralVariant(30),
@@ -151,14 +150,13 @@ fun dev.kdrag0n.monet.theme.ColorScheme.toComposeColorScheme(isDark: Boolean): C
outline = neutralVariant(50),
outlineVariant = neutralVariant(80),
scrim = neutral(0),
surfaceBright = neutralVariant98,
surfaceDim = neutralVariant87,
surfaceContainerHighest = neutralVariant(90),
surfaceContainerHigh = neutralVariant92,
surfaceContainer = neutralVariant94,
surfaceContainerLow = neutralVariant96,
surfaceContainerLowest = neutralVariant(100),
surfaceBright = neutral98,
surfaceDim = neutral87,
surfaceContainerHighest = neutral(90),
surfaceContainerHigh = neutral92,
surfaceContainer = neutral98,
surfaceContainerLow = neutral96,
surfaceContainerLowest = neutral(100),
surfaceTint = primary(40),
)
}
@@ -66,7 +66,7 @@ fun <T> DraggablePreferenceGroup(
var isAnyDragging by remember { mutableStateOf(false) }
val color by animateColorAsState(
targetValue = if (!isAnyDragging) preferenceGroupColor() else MaterialTheme.colorScheme.background,
targetValue = if (!isAnyDragging) preferenceGroupColor() else MaterialTheme.colorScheme.surface,
label = "card background animation",
)
@@ -58,7 +58,7 @@ fun RgbColorSlider(
) {
Text(text = label)
CompositionLocalProvider(
LocalContentColor provides MaterialTheme.colorScheme.onBackground,
LocalContentColor provides MaterialTheme.colorScheme.onSurface,
) {
val valueText = snapSliderValue(rgbRange.start, value.toFloat(), step)
.roundToInt().toString()
@@ -136,7 +136,7 @@ fun HsbColorSlider(
) {
Text(text = label)
CompositionLocalProvider(
LocalContentColor provides MaterialTheme.colorScheme.onBackground,
LocalContentColor provides MaterialTheme.colorScheme.onSurface,
) {
val valueText = snapSliderValue(range.start, value, step)
Text(
@@ -55,7 +55,7 @@ fun PreferenceCategory(
title = {
Text(
text = label,
color = if (isSelected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onBackground,
color = if (isSelected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface,
)
},
description = {
@@ -98,10 +98,10 @@ fun SliderPreference(
) {
Text(
text = label,
color = MaterialTheme.colorScheme.onBackground,
color = MaterialTheme.colorScheme.onSurface,
)
CompositionLocalProvider(
LocalContentColor provides MaterialTheme.colorScheme.onBackground,
LocalContentColor provides MaterialTheme.colorScheme.onSurface,
) {
val value = snapSliderValue(valueRange.start, sliderValue, step)
Text(
@@ -21,6 +21,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import app.lawnchair.ui.theme.preferenceGroupColor
@Composable
fun ButtonSection(
@@ -31,7 +32,7 @@ fun ButtonSection(
gridLayout: @Composable () -> Unit,
) {
val backgroundColor by animateColorAsState(
targetValue = if (isSelected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surfaceContainer,
targetValue = if (isSelected) MaterialTheme.colorScheme.primary else preferenceGroupColor(),
animationSpec = tween(durationMillis = 300),
)
@@ -61,7 +61,7 @@ fun Chip(
) {
val shape = RoundedCornerShape(8.dp)
val textColor = lerp(
MaterialTheme.colorScheme.onBackground,
MaterialTheme.colorScheme.onSurface,
MaterialTheme.colorScheme.primary,
selectedProgress,
)
@@ -28,6 +28,7 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import app.lawnchair.ui.theme.preferenceGroupColor
fun LazyListScope.preferenceGroupItems(
count: Int,
@@ -96,7 +97,7 @@ fun PreferenceGroupItem(
Surface(
modifier = modifier.padding(horizontal = 16.dp),
shape = shape,
tonalElevation = 1.dp,
color = preferenceGroupColor(),
) {
content()
}
@@ -10,14 +10,12 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.rounded.ArrowBack
@@ -56,9 +54,7 @@ fun PreferenceSearchScaffold(
Scaffold(
modifier = modifier,
topBar = {
Surface(
color = MaterialTheme.colorScheme.background,
) {
Surface {
SearchBar(
value,
onValueChange,
@@ -66,7 +62,6 @@ fun PreferenceSearchScaffold(
placeholder = placeholder,
actions = actions,
)
Spacer(modifier = Modifier.requiredHeight(16.dp))
}
},
bottomBar = { BottomSpacer() },
@@ -89,13 +84,13 @@ private fun SearchBar(
modifier = modifier
.zIndex(1f)
.statusBarsPadding()
.padding(top = 8.dp)
.padding(vertical = 8.dp)
.padding(horizontal = 16.dp)
.fillMaxWidth()
.height(56.dp)
.background(
color = MaterialTheme.colorScheme.surfaceContainerHighest,
shape = RoundedCornerShape(100),
shape = CircleShape,
),
) {
ClickableIcon(
@@ -86,7 +86,7 @@ fun TopBar(
},
scrollBehavior = scrollBehavior,
colors = TopAppBarDefaults.topAppBarColors().copy(
scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainerHighest,
),
)
}
@@ -25,6 +25,7 @@ import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import app.lawnchair.ui.preferences.LocalIsExpandedScreen
import app.lawnchair.ui.theme.preferenceGroupColor
import kotlin.math.abs
import kotlinx.coroutines.launch
@@ -60,7 +61,7 @@ fun TwoTabPreferenceLayout(
modifier = Modifier
.padding(horizontal = 16.dp)
.clip(CircleShape)
.background(MaterialTheme.colorScheme.surfaceContainer),
.background(preferenceGroupColor()),
) {
Tab(
label = firstPageLabel,
@@ -108,7 +109,7 @@ private fun RowScope.Tab(
val selectedProgress = 1f - abs(currentOffset - page).coerceIn(0f, 1f)
val shape = CircleShape
val textColor = lerp(
MaterialTheme.colorScheme.onBackground,
MaterialTheme.colorScheme.onSurface,
MaterialTheme.colorScheme.onPrimaryContainer,
selectedProgress,
)
@@ -47,7 +47,7 @@ fun AppDrawerLayoutSettings(
Row(
modifier = modifier
.fillMaxWidth()
.background(MaterialTheme.colorScheme.background)
.background(MaterialTheme.colorScheme.surface)
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceEvenly,
) {
@@ -298,7 +298,7 @@ private fun VariantDropdown(
TextButton(
onClick = { showVariants = true },
colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.onBackground),
colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.onSurface),
contentPadding = VariantButtonContentPadding,
) {
AndroidText(
@@ -64,7 +64,7 @@ fun HomeLayoutSettings(
Row(
modifier = modifier
.fillMaxWidth()
.background(MaterialTheme.colorScheme.background)
.background(MaterialTheme.colorScheme.surface)
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceEvenly,
) {
@@ -35,7 +35,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
@@ -51,7 +51,6 @@ import androidx.compose.runtime.rememberCoroutineScope
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.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
@@ -74,6 +73,7 @@ import app.lawnchair.ui.preferences.components.layout.Chip
import app.lawnchair.ui.preferences.components.layout.NestedScrollStretch
import app.lawnchair.ui.preferences.components.layout.PreferenceGroup
import app.lawnchair.ui.preferences.components.layout.PreferenceLayout
import app.lawnchair.ui.theme.preferenceGroupColor
import app.lawnchair.util.Constants
import app.lawnchair.util.getThemedIconPacksInstalled
import app.lawnchair.util.isPackageInstalled
@@ -190,23 +190,24 @@ fun IconPackPreferences(
verticalAlignment = Alignment.Top,
modifier = Modifier.animateContentSize(),
) { page ->
when (page) {
0 -> {
PreferenceGroup {
Column {
when (page) {
0 -> {
IconPackGrid(
adapter = iconPackAdapter,
false,
)
SwitchPreference(
adapter = prefs.tintIconPackBackgrounds.getAdapter(),
label = stringResource(id = R.string.themed_icon_pack_tint),
)
PreferenceGroup {
SwitchPreference(
adapter = prefs.tintIconPackBackgrounds.getAdapter(),
label = stringResource(id = R.string.themed_icon_pack_tint),
)
}
}
}
1 -> {
val packageManager = context.packageManager
PreferenceGroup {
1 -> {
val packageManager = context.packageManager
val themedIconsAvailable = packageManager
.getThemedIconPacksInstalled(LocalContext.current)
.any { packageManager.isPackageInstalled(it) } ||
@@ -219,32 +220,34 @@ fun IconPackPreferences(
true,
)
}
ListPreference(
enabled = themedIconsAvailable,
label = stringResource(id = R.string.themed_icon_title),
entries = ThemedIconsState.entries.map {
ListPreferenceEntry(
value = it,
label = { stringResource(id = it.labelResourceId) },
)
},
value = ThemedIconsState.getForSettings(
themedIcons = themedIconsAdapter.state.value,
drawerThemedIcons = drawerThemedIconsEnabled,
),
onValueChange = {
themedIconsAdapter.onChange(newValue = it.themedIcons)
drawerThemedIconsAdapter.onChange(newValue = it.drawerThemedIcons)
PreferenceGroup {
ListPreference(
enabled = themedIconsAvailable,
label = stringResource(id = R.string.themed_icon_title),
entries = ThemedIconsState.entries.map {
ListPreferenceEntry(
value = it,
label = { stringResource(id = it.labelResourceId) },
)
},
value = ThemedIconsState.getForSettings(
themedIcons = themedIconsAdapter.state.value,
drawerThemedIcons = drawerThemedIconsEnabled,
),
onValueChange = {
themedIconsAdapter.onChange(newValue = it.themedIcons)
drawerThemedIconsAdapter.onChange(newValue = it.drawerThemedIcons)
iconPackAdapter.onChange(newValue = iconPackAdapter.state.value)
themedIconPackAdapter.onChange(newValue = themedIconPackAdapter.state.value)
},
description = if (themedIconsAvailable.not()) {
stringResource(id = R.string.lawnicons_not_installed_description)
} else {
null
},
)
iconPackAdapter.onChange(newValue = iconPackAdapter.state.value)
themedIconPackAdapter.onChange(newValue = themedIconPackAdapter.state.value)
},
description = if (themedIconsAvailable.not()) {
stringResource(id = R.string.lawnicons_not_installed_description)
} else {
null
},
)
}
}
}
}
@@ -293,10 +296,10 @@ fun IconPackGrid(
horizontalArrangement = Arrangement.spacedBy(space = padding),
contentPadding = PaddingValues(horizontal = padding),
modifier = Modifier
.padding(bottom = 6.dp, top = 6.dp)
.padding(bottom = 6.dp)
.fillMaxWidth(),
) {
itemsIndexed(iconPacksLocal, { _, item -> item.packageName }) { index, item ->
items(iconPacksLocal, { it.packageName }) { item ->
IconPackItem(
item = item,
selected = item.packageName == adapter.state.value,
@@ -341,7 +344,7 @@ fun IconPackItem(
Surface(
onClick = onClick,
shape = MaterialTheme.shapes.large,
color = if (selected) MaterialTheme.colorScheme.surfaceContainerHighest else Color.Transparent,
color = if (selected) MaterialTheme.colorScheme.primaryContainer else preferenceGroupColor(),
modifier = modifier,
) {
Column(
@@ -164,7 +164,7 @@ fun IconPickerGrid(
text = category.title,
modifier = Modifier
.fillMaxWidth()
.background(MaterialTheme.colorScheme.background)
.background(MaterialTheme.colorScheme.surface)
.padding(16.dp),
style = MaterialTheme.typography.titleSmall,
color = MaterialTheme.colorScheme.primary,
@@ -45,6 +45,7 @@ import app.lawnchair.ui.preferences.components.DraggableSwitchPreference
import app.lawnchair.ui.preferences.components.controls.ClickablePreference
import app.lawnchair.ui.preferences.components.layout.PreferenceGroupHeading
import app.lawnchair.ui.preferences.components.layout.PreferenceLayout
import app.lawnchair.ui.theme.isSelectedThemeDark
import com.android.launcher3.R
@Composable
@@ -135,7 +136,7 @@ private fun LauncherPopupPreview(optionsList: List<LauncherOptionPopupItem>) {
.padding(horizontal = 16.dp)
.fillMaxSize()
.clip(MaterialTheme.shapes.large),
color = MaterialTheme.colorScheme.surfaceContainer,
color = if (isSelectedThemeDark) MaterialTheme.colorScheme.surfaceContainer else MaterialTheme.colorScheme.surfaceDim,
) {
val enabledItems = optionsList.filter { it.isEnabled }
Column(
@@ -216,7 +216,7 @@ private fun SponsorDisclaimer(
modifier = modifier,
) {
CompositionLocalProvider(
LocalContentColor provides MaterialTheme.colorScheme.onBackground,
LocalContentColor provides MaterialTheme.colorScheme.onSurface,
LocalTextStyle provides MaterialTheme.typography.bodyLarge,
) {
Text(
@@ -59,8 +59,8 @@ fun LawnchairTheme(
@Composable
fun ComponentActivity.EdgeToEdge() {
val darkTheme = isSelectedThemeDark
val scrimColor = MaterialTheme.colorScheme.background.copy(alpha = 0.95f).toArgb()
val contentColor = MaterialTheme.colorScheme.onBackground.toArgb()
val scrimColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.95f).toArgb()
val contentColor = MaterialTheme.colorScheme.onSurface.toArgb()
LaunchedEffect(darkTheme) {
val statusBarStyle = SystemBarStyle.auto(
@@ -220,7 +220,6 @@ class ComposeBottomSheet<T>(context: Context) : AbstractSlideInView<T>(context,
.widthIn(max = 640.dp)
.fillMaxWidth(),
shape = backgroundShape,
color = MaterialTheme.colorScheme.background,
) {
Box(