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.rememberPreferenceAsState
import com.huanchengfly.tieba.post.utils.ThemeUtil
import com.huanchengfly.tieba.post.utils.appPreferences
import com.huanchengfly.tieba.post.utils.compose.darken
@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
private fun getLightDynamicColor(tonalPalette: TonalPalette): ExtendedColors {
return ExtendedColors(
theme = "dynamic",
isNightMode = false,
primary = tonalPalette.primary40,
textOnPrimary = tonalPalette.primary100,
textOnPrimary = tonalPalette.primary90,
accent = tonalPalette.secondary40,
onAccent = tonalPalette.secondary100,
topBar = tonalPalette.neutralVariant99,
onTopBar = tonalPalette.neutralVariant10,
onTopBarSecondary = tonalPalette.neutralVariant40,
onTopBarActive = tonalPalette.neutralVariant0,
topBarSurface = tonalPalette.neutralVariant95,
onTopBarSurface = tonalPalette.neutralVariant30,
topBar = getDynamicTopBarColor(tonalPalette, false),
onTopBar = getDynamicOnTopBarColor(tonalPalette, false),
onTopBarSecondary = getDynamicOnTopBarSecondaryColor(tonalPalette, false),
onTopBarActive = getDynamicOnTopBarActiveColor(tonalPalette, false),
topBarSurface = getDynamicTopBarSurfaceColor(tonalPalette, false),
onTopBarSurface = getDynamicOnTopBarSurfaceColor(tonalPalette, false),
bottomBar = tonalPalette.neutralVariant99,
bottomBarSurface = tonalPalette.neutralVariant95,
onBottomBarSurface = tonalPalette.neutralVariant30,
@ -149,16 +294,15 @@ private fun getDarkDynamicColor(tonalPalette: TonalPalette): ExtendedColors {
theme = "dynamic",
isNightMode = true,
primary = tonalPalette.primary80,
textOnPrimary = tonalPalette.primary20,
textOnPrimary = tonalPalette.primary10,
accent = tonalPalette.secondary80,
onAccent = tonalPalette.secondary20,
topBar = tonalPalette.neutralVariant10,
onTopBar = tonalPalette.neutralVariant90,
onTopBarSecondary = tonalPalette.neutralVariant70,
onTopBarActive = tonalPalette.neutralVariant100,
topBarSurface = tonalPalette.neutralVariant20,
onTopBarSurface = tonalPalette.neutralVariant70,
bottomBar = tonalPalette.neutralVariant10,
topBar = getDynamicTopBarColor(tonalPalette, true),
onTopBar = getDynamicOnTopBarColor(tonalPalette, true),
onTopBarSecondary = getDynamicOnTopBarSecondaryColor(tonalPalette, true),
onTopBarActive = getDynamicOnTopBarActiveColor(tonalPalette, true),
topBarSurface = getDynamicTopBarSurfaceColor(tonalPalette, true),
onTopBarSurface = getDynamicOnTopBarSurfaceColor(tonalPalette, true),
bottomBarSurface = tonalPalette.neutralVariant20,
onBottomBarSurface = tonalPalette.neutralVariant70,
text = tonalPalette.neutralVariant90,

View File

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

View File

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

View File

@ -122,12 +122,16 @@ fun SearchBox(
contentColor: Color = ExtendedTheme.colors.onTopBarSurface,
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(
color = backgroundColor,
contentColor = contentColor,
shape = RoundedCornerShape(6.dp),
modifier = modifier
modifier = Modifier
.fillMaxWidth()
.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.KeyboardOptions
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.ContentAlpha
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.ProvideTextStyle
@ -224,6 +225,7 @@ fun SearchPage(
Box(
modifier = Modifier
.height(64.dp)
.background(ExtendedTheme.colors.topBar)
.padding(horizontal = 16.dp, vertical = 8.dp)
) {
SearchTopBar(
@ -553,7 +555,7 @@ private fun SearchTopBar(
placeholder = {
Text(
text = stringResource(id = R.string.hint_search),
color = ExtendedTheme.colors.textDisabled
color = ExtendedTheme.colors.onTopBarSurface.copy(alpha = ContentAlpha.disabled)
)
},
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.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.items
@ -1108,8 +1107,7 @@ fun ThreadPage(
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_TOOLBAR_PRIMARY_COLOR = "custom_toolbar_primary_color"
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_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.toArgb
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.ThemeUtil
import com.huanchengfly.tieba.post.utils.appPreferences
fun Color.darken(i: Float = 0.1F): Color {
return Color(ColorUtils.getDarkerColor(toArgb(), i))
@ -16,10 +15,11 @@ fun Color.calcStatusBarColor(): Color {
val context = App.INSTANCE
var darkerStatusBar = true
val isToolbarPrimaryColor =
context.dataStore.getBoolean(ThemeUtil.KEY_CUSTOM_TOOLBAR_PRIMARY_COLOR, false)
if (ThemeUtil.isTranslucentTheme() || !isToolbarPrimaryColor) {
context.appPreferences.toolbarPrimaryColor
val isDynamicColor = context.appPreferences.useDynamicColorTheme
if (ThemeUtil.isTranslucentTheme() || !isToolbarPrimaryColor || isDynamicColor) {
darkerStatusBar = false
} else if (!context.dataStore.getBoolean("status_bar_darker", true)) {
} else if (!context.appPreferences.statusBarDarker) {
darkerStatusBar = false
}
return if (darkerStatusBar) darken() else this