topBar = {
TopAppBar(
title = { Text("Norm Calculator") },
actions = {
IconButton(onClick = onThemeToggle) {
Icon(
imageVector = if (isDarkMode) Icons.Default.WbSunny else Icons.Default.NightsStay,
contentDescription = "Toggle Theme"
)
}
}
)
}
This is the way im using the TopAppBar, it is the only control that fades to the color and it looks extremely jank;
I have tried specifying colors but that made no difference
Defined my own TopBar like this:
fun CompactTopAppBar(
title: String,
isDarkMode: Boolean,
currentLang: String,
onThemeToggle: () -> Unit,
onLangToggle: () -> Unit
) {
Surface(
modifier = Modifier.fillMaxWidth()
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(24.dp)
.padding(horizontal = 12.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = title,
style = MaterialTheme.typography.titleLarge.copy(fontSize = 24.sp),
color = MaterialTheme.colorScheme.onSurface
)
Row(verticalAlignment = Alignment.CenterVertically) {
IconButton(
onClick = onThemeToggle,
modifier = Modifier.size(24.dp)
) {
Icon(
imageVector = if (isDarkMode) Icons.Default.WbSunny else Icons.Default.NightsStay,
contentDescription = stringResource(R.string.toggle_theme),
modifier = Modifier.size(20.dp)
)
}
TextButton(
onClick = onLangToggle,
contentPadding = PaddingValues()
) {
Text(
text = if (currentLang == "en") "SI" else "EN",
style = MaterialTheme.typography.labelLarge.copy(fontSize = 18.sp),
color = MaterialTheme.colorScheme.onSurface
)
}
}
}
}
}
It works well enough for me without any color transitions/crossfades