IssueTracker

Issue: TopAppBar Color Transition Bug When Switching Themes

Description

When switching between light and dark themes, TopAppBar transitions its color with an unnecessary animation, even if containerColor and scrolledContainerColor are set to the same color.

This creates an inconsistent UI experience, as all other UI elements update instantly when the theme changes, except for TopAppBar, which has a delayed transition.

Expected Behavior

If containerColor and scrolledContainerColor are identical, TopAppBar should update its color instantly when switching themes, without an animation.

Observed Behavior

• Even when both colors are the same, TopAppBar still animates its color change.
• This animation lags behind the rest of the theme transition, making it visually inconsistent.
• The issue originates from the following code in TopAppBar source:

val colorTransitionFraction by
    remember(scrollBehavior) {
        derivedStateOf {
            val overlappingFraction = scrollBehavior?.state?.overlappedFraction ?: 0f
            if (overlappingFraction > 0.01f) 1f else 0f
        }
    }

val appBarContainerColor by
    animateColorAsState(
        targetValue = colors.containerColor(colorTransitionFraction),
        animationSpec = spring(stiffness = Spring.StiffnessMediumLow)
    )

Since colorTransitionFraction animates between 0 and 1, the app bar's background transitions unnecessarily, even when no actual color change is needed.

Steps to Reproduce

1. Create a TopAppBar with containerColor and scrolledContainerColor set to the same color from MaterialTheme.colorScheme.primary.
2. Toggle the app theme between light mode and dark mode.
3. Observe that the TopAppBar fades its color instead of updating instantly, unlike the rest of the UI.

Environment

• Device/Emulator: Pixel 8 (emulator)
• Android Version: API 34
• Compose (material3) Version: 1.3.1