pref: 优化动态取色顶栏颜色

This commit is contained in:
HuanCheng65 2023-09-27 15:47:20 +08:00
parent 27486515bd
commit 0154bcbfdd
No known key found for this signature in database
GPG Key ID: 5EC9DD60A32C7360
8 changed files with 183 additions and 34 deletions

View File

@ -21,6 +21,7 @@ import com.huanchengfly.tieba.post.App
import com.huanchengfly.tieba.post.R import com.huanchengfly.tieba.post.R
import com.huanchengfly.tieba.post.rememberPreferenceAsState import com.huanchengfly.tieba.post.rememberPreferenceAsState
import com.huanchengfly.tieba.post.utils.ThemeUtil import com.huanchengfly.tieba.post.utils.ThemeUtil
import com.huanchengfly.tieba.post.utils.appPreferences
import com.huanchengfly.tieba.post.utils.compose.darken import com.huanchengfly.tieba.post.utils.compose.darken
@Stable @Stable
@ -108,21 +109,165 @@ private fun getDynamicColor(
} }
} }
@Composable
private fun getDynamicTopBarColor(
tonalPalette: TonalPalette,
isNightMode: Boolean,
): Color {
val topBarUsePrimaryColor =
LocalContext.current.appPreferences.toolbarPrimaryColor && !isNightMode
val primaryColor = if (isNightMode) {
tonalPalette.primary80
} else {
tonalPalette.primary40
}
val backgroundColor = if (isNightMode) {
tonalPalette.neutralVariant10
} else {
tonalPalette.neutralVariant99
}
return if (topBarUsePrimaryColor) {
primaryColor
} else {
backgroundColor
}
}
@Composable
private fun getDynamicOnTopBarColor(
tonalPalette: TonalPalette,
isNightMode: Boolean,
): Color {
val topBarUsePrimaryColor =
LocalContext.current.appPreferences.toolbarPrimaryColor && !isNightMode
val onPrimaryColor = if (isNightMode) {
tonalPalette.primary20
} else {
tonalPalette.primary100
}
val onBackgroundColor = if (isNightMode) {
tonalPalette.neutralVariant90
} else {
tonalPalette.neutralVariant10
}
return if (topBarUsePrimaryColor) {
onPrimaryColor
} else {
onBackgroundColor
}
}
@Composable
private fun getDynamicOnTopBarSecondaryColor(
tonalPalette: TonalPalette,
isNightMode: Boolean,
): Color {
val topBarUsePrimaryColor =
LocalContext.current.appPreferences.toolbarPrimaryColor && !isNightMode
val primaryColor = if (isNightMode) {
tonalPalette.primary20
} else {
tonalPalette.primary80
}
val backgroundColor = if (isNightMode) {
tonalPalette.neutralVariant70
} else {
tonalPalette.neutralVariant40
}
return if (topBarUsePrimaryColor) {
primaryColor
} else {
backgroundColor
}
}
@Composable
private fun getDynamicOnTopBarActiveColor(
tonalPalette: TonalPalette,
isNightMode: Boolean,
): Color {
val topBarUsePrimaryColor =
LocalContext.current.appPreferences.toolbarPrimaryColor && !isNightMode
val primaryColor = if (isNightMode) {
tonalPalette.primary0
} else {
tonalPalette.primary100
}
val backgroundColor = if (isNightMode) {
tonalPalette.neutralVariant100
} else {
tonalPalette.neutralVariant0
}
return if (topBarUsePrimaryColor) {
primaryColor
} else {
backgroundColor
}
}
@Composable
private fun getDynamicTopBarSurfaceColor(
tonalPalette: TonalPalette,
isNightMode: Boolean,
): Color {
val topBarUsePrimaryColor =
LocalContext.current.appPreferences.toolbarPrimaryColor && !isNightMode
val primaryColor = if (isNightMode) {
tonalPalette.primary30
} else {
tonalPalette.primary90
}
val backgroundColor = if (isNightMode) {
tonalPalette.neutralVariant20
} else {
tonalPalette.neutralVariant95
}
return if (topBarUsePrimaryColor) {
primaryColor
} else {
backgroundColor
}
}
@Composable
private fun getDynamicOnTopBarSurfaceColor(
tonalPalette: TonalPalette,
isNightMode: Boolean,
): Color {
val topBarUsePrimaryColor =
LocalContext.current.appPreferences.toolbarPrimaryColor && !isNightMode
val primaryColor = if (isNightMode) {
tonalPalette.primary90
} else {
tonalPalette.primary10
}
val backgroundColor = if (isNightMode) {
tonalPalette.neutralVariant70
} else {
tonalPalette.neutralVariant30
}
return if (topBarUsePrimaryColor) {
primaryColor
} else {
backgroundColor
}
}
@Composable @Composable
private fun getLightDynamicColor(tonalPalette: TonalPalette): ExtendedColors { private fun getLightDynamicColor(tonalPalette: TonalPalette): ExtendedColors {
return ExtendedColors( return ExtendedColors(
theme = "dynamic", theme = "dynamic",
isNightMode = false, isNightMode = false,
primary = tonalPalette.primary40, primary = tonalPalette.primary40,
textOnPrimary = tonalPalette.primary100, textOnPrimary = tonalPalette.primary90,
accent = tonalPalette.secondary40, accent = tonalPalette.secondary40,
onAccent = tonalPalette.secondary100, onAccent = tonalPalette.secondary100,
topBar = tonalPalette.neutralVariant99, topBar = getDynamicTopBarColor(tonalPalette, false),
onTopBar = tonalPalette.neutralVariant10, onTopBar = getDynamicOnTopBarColor(tonalPalette, false),
onTopBarSecondary = tonalPalette.neutralVariant40, onTopBarSecondary = getDynamicOnTopBarSecondaryColor(tonalPalette, false),
onTopBarActive = tonalPalette.neutralVariant0, onTopBarActive = getDynamicOnTopBarActiveColor(tonalPalette, false),
topBarSurface = tonalPalette.neutralVariant95, topBarSurface = getDynamicTopBarSurfaceColor(tonalPalette, false),
onTopBarSurface = tonalPalette.neutralVariant30, onTopBarSurface = getDynamicOnTopBarSurfaceColor(tonalPalette, false),
bottomBar = tonalPalette.neutralVariant99, bottomBar = tonalPalette.neutralVariant99,
bottomBarSurface = tonalPalette.neutralVariant95, bottomBarSurface = tonalPalette.neutralVariant95,
onBottomBarSurface = tonalPalette.neutralVariant30, onBottomBarSurface = tonalPalette.neutralVariant30,
@ -149,16 +294,15 @@ private fun getDarkDynamicColor(tonalPalette: TonalPalette): ExtendedColors {
theme = "dynamic", theme = "dynamic",
isNightMode = true, isNightMode = true,
primary = tonalPalette.primary80, primary = tonalPalette.primary80,
textOnPrimary = tonalPalette.primary20, textOnPrimary = tonalPalette.primary10,
accent = tonalPalette.secondary80, accent = tonalPalette.secondary80,
onAccent = tonalPalette.secondary20, onAccent = tonalPalette.secondary20,
topBar = tonalPalette.neutralVariant10, topBar = getDynamicTopBarColor(tonalPalette, true),
onTopBar = tonalPalette.neutralVariant90, onTopBar = getDynamicOnTopBarColor(tonalPalette, true),
onTopBarSecondary = tonalPalette.neutralVariant70, onTopBarSecondary = getDynamicOnTopBarSecondaryColor(tonalPalette, true),
onTopBarActive = tonalPalette.neutralVariant100, onTopBarActive = getDynamicOnTopBarActiveColor(tonalPalette, true),
topBarSurface = tonalPalette.neutralVariant20, topBarSurface = getDynamicTopBarSurfaceColor(tonalPalette, true),
onTopBarSurface = tonalPalette.neutralVariant70, onTopBarSurface = getDynamicOnTopBarSurfaceColor(tonalPalette, true),
bottomBar = tonalPalette.neutralVariant10,
bottomBarSurface = tonalPalette.neutralVariant20, bottomBarSurface = tonalPalette.neutralVariant20,
onBottomBarSurface = tonalPalette.neutralVariant70, onBottomBarSurface = tonalPalette.neutralVariant70,
text = tonalPalette.neutralVariant90, text = tonalPalette.neutralVariant90,

View File

@ -57,7 +57,7 @@ import androidx.compose.material.rememberScaffoldState
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
@ -676,7 +676,7 @@ fun ForumPage(
}, },
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(horizontal = 16.dp) .padding(16.dp)
// enable event when scroll image. // enable event when scroll image.
.scrollable( .scrollable(
orientation = Orientation.Vertical, orientation = Orientation.Vertical,
@ -719,7 +719,7 @@ fun ForumPage(
val menuState = rememberMenuState() val menuState = rememberMenuState()
val interactionSource = remember { MutableInteractionSource() } val interactionSource = remember { MutableInteractionSource() }
var currentSortType by remember { var currentSortType by remember {
mutableStateOf( mutableIntStateOf(
getSortType( getSortType(
context, context,
forumName forumName
@ -780,7 +780,7 @@ fun ForumPage(
} }
}, },
selectedContentColor = ExtendedTheme.colors.primary, selectedContentColor = ExtendedTheme.colors.primary,
unselectedContentColor = ExtendedTheme.colors.onTopBarSecondary, unselectedContentColor = ExtendedTheme.colors.textSecondary,
interactionSource = interactionSource, interactionSource = interactionSource,
) { ) {
Row( Row(
@ -812,7 +812,7 @@ fun ForumPage(
} }
}, },
selectedContentColor = ExtendedTheme.colors.primary, selectedContentColor = ExtendedTheme.colors.primary,
unselectedContentColor = ExtendedTheme.colors.onTopBarSecondary unselectedContentColor = ExtendedTheme.colors.textSecondary
) { ) {
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
@ -881,7 +881,7 @@ fun LoadingPlaceholder(
forumName = forumName, forumName = forumName,
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(horizontal = 16.dp) .padding(16.dp)
) )
Row(modifier = Modifier.height(48.dp)) { Row(modifier = Modifier.height(48.dp)) {
repeat(2) { repeat(2) {

View File

@ -120,7 +120,7 @@ fun HistoryPage(
pagerState.animateScrollToPage(0) pagerState.animateScrollToPage(0)
} }
}, },
selectedContentColor = ExtendedTheme.colors.primary, selectedContentColor = ExtendedTheme.colors.onTopBar,
unselectedContentColor = ExtendedTheme.colors.onTopBarSecondary unselectedContentColor = ExtendedTheme.colors.onTopBarSecondary
) )
Tab( Tab(
@ -136,7 +136,7 @@ fun HistoryPage(
pagerState.animateScrollToPage(1) pagerState.animateScrollToPage(1)
} }
}, },
selectedContentColor = ExtendedTheme.colors.primary, selectedContentColor = ExtendedTheme.colors.onTopBar,
unselectedContentColor = ExtendedTheme.colors.onTopBarSecondary unselectedContentColor = ExtendedTheme.colors.onTopBarSecondary
) )
} }

View File

@ -122,12 +122,16 @@ fun SearchBox(
contentColor: Color = ExtendedTheme.colors.onTopBarSurface, contentColor: Color = ExtendedTheme.colors.onTopBarSurface,
onClick: () -> Unit, onClick: () -> Unit,
) { ) {
Box(modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)) { Box(
modifier = modifier
.background(ExtendedTheme.colors.topBar)
.padding(horizontal = 16.dp, vertical = 8.dp)
) {
Surface( Surface(
color = backgroundColor, color = backgroundColor,
contentColor = contentColor, contentColor = contentColor,
shape = RoundedCornerShape(6.dp), shape = RoundedCornerShape(6.dp),
modifier = modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.clickable(onClick = onClick) .clickable(onClick = onClick)
) { ) {

View File

@ -29,6 +29,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.ButtonDefaults import androidx.compose.material.ButtonDefaults
import androidx.compose.material.ContentAlpha
import androidx.compose.material.Icon import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme import androidx.compose.material.MaterialTheme
import androidx.compose.material.ProvideTextStyle import androidx.compose.material.ProvideTextStyle
@ -224,6 +225,7 @@ fun SearchPage(
Box( Box(
modifier = Modifier modifier = Modifier
.height(64.dp) .height(64.dp)
.background(ExtendedTheme.colors.topBar)
.padding(horizontal = 16.dp, vertical = 8.dp) .padding(horizontal = 16.dp, vertical = 8.dp)
) { ) {
SearchTopBar( SearchTopBar(
@ -553,7 +555,7 @@ private fun SearchTopBar(
placeholder = { placeholder = {
Text( Text(
text = stringResource(id = R.string.hint_search), text = stringResource(id = R.string.hint_search),
color = ExtendedTheme.colors.textDisabled color = ExtendedTheme.colors.onTopBarSurface.copy(alpha = ContentAlpha.disabled)
) )
}, },
modifier = Modifier modifier = Modifier

View File

@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyListScope import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
@ -1108,8 +1107,7 @@ fun ThreadPage(
forumName forumName
) )
) )
}, }
modifier = Modifier.statusBarsPadding()
) )
}, },
) { ) {

View File

@ -63,6 +63,7 @@ object ThemeUtil {
const val KEY_CUSTOM_STATUS_BAR_FONT_DARK = "custom_status_bar_font_dark" const val KEY_CUSTOM_STATUS_BAR_FONT_DARK = "custom_status_bar_font_dark"
const val KEY_CUSTOM_TOOLBAR_PRIMARY_COLOR = "custom_toolbar_primary_color" const val KEY_CUSTOM_TOOLBAR_PRIMARY_COLOR = "custom_toolbar_primary_color"
const val KEY_TRANSLUCENT_THEME_BACKGROUND_PATH = "translucent_theme_background_path" const val KEY_TRANSLUCENT_THEME_BACKGROUND_PATH = "translucent_theme_background_path"
const val KEY_USE_DYNAMIC_COLOR_THEME = "useDynamicColorTheme"
const val THEME_TRANSLUCENT = "translucent" const val THEME_TRANSLUCENT = "translucent"
const val THEME_TRANSLUCENT_LIGHT = "translucent_light" const val THEME_TRANSLUCENT_LIGHT = "translucent_light"

View File

@ -3,10 +3,9 @@ package com.huanchengfly.tieba.post.utils.compose
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.graphics.toArgb
import com.huanchengfly.tieba.post.App import com.huanchengfly.tieba.post.App
import com.huanchengfly.tieba.post.dataStore
import com.huanchengfly.tieba.post.getBoolean
import com.huanchengfly.tieba.post.utils.ColorUtils import com.huanchengfly.tieba.post.utils.ColorUtils
import com.huanchengfly.tieba.post.utils.ThemeUtil import com.huanchengfly.tieba.post.utils.ThemeUtil
import com.huanchengfly.tieba.post.utils.appPreferences
fun Color.darken(i: Float = 0.1F): Color { fun Color.darken(i: Float = 0.1F): Color {
return Color(ColorUtils.getDarkerColor(toArgb(), i)) return Color(ColorUtils.getDarkerColor(toArgb(), i))
@ -16,10 +15,11 @@ fun Color.calcStatusBarColor(): Color {
val context = App.INSTANCE val context = App.INSTANCE
var darkerStatusBar = true var darkerStatusBar = true
val isToolbarPrimaryColor = val isToolbarPrimaryColor =
context.dataStore.getBoolean(ThemeUtil.KEY_CUSTOM_TOOLBAR_PRIMARY_COLOR, false) context.appPreferences.toolbarPrimaryColor
if (ThemeUtil.isTranslucentTheme() || !isToolbarPrimaryColor) { val isDynamicColor = context.appPreferences.useDynamicColorTheme
if (ThemeUtil.isTranslucentTheme() || !isToolbarPrimaryColor || isDynamicColor) {
darkerStatusBar = false darkerStatusBar = false
} else if (!context.dataStore.getBoolean("status_bar_darker", true)) { } else if (!context.appPreferences.statusBarDarker) {
darkerStatusBar = false darkerStatusBar = false
} }
return if (darkerStatusBar) darken() else this return if (darkerStatusBar) darken() else this