Hey folks, I am using Compose version `1.0.0-beta02` and `MaterialTheme.colors.isLight` does not cha...

# compose

[Yasin Kaçmaz]

Hey folks, I am using Compose version 1.0.0-beta02 and MaterialTheme.colors.isLight does not change when we give light and dark themes with a Boolean mutable state. It was working before. Is there anyone else with the same situation.

[Yasin Kaçmaz]

@Composable
fun JetflixTheme(isDarkTheme: Boolean = false) {
    val colors = if (isDarkTheme) DarkThemeColors else LightThemeColors
    MaterialTheme(colors = colors, content = content)
}

[Yasin Kaçmaz]

val systemTheme = isSystemInDarkTheme()
val isDarkTheme = remember { mutableStateOf(systemTheme) }
JetflixTheme(isDarkTheme = isDarkTheme.value) {
    // MyUiContent
}

[Yasin Kaçmaz]

When I change the value of isDarkTheme
MaterialTheme.colors.isLight does not change and so the color of my ui does not change too.

[MBegemot]

there is something broken in theming for sure, I'm cycling through three themes, it worked for ages now it doesen't, besides Images and Icons are not refreshed where in the past were ... I thing that someone is remembering more than it should. In the past something akin happened with dialogs and theming.

[Yasin Kaçmaz]

What a relief. I cycled thru everything I know just to fix the issue. Only thing that works okay is the isSystemInDarkTheme() . As now you cannot change dark theme inside your app

[Louis Pullen-Freilich [G]]

Yes, this is a known issue (https://issuetracker.google.com/issues/182635582) - for now calling .copy() before you pass colors to MaterialTheme is a workaround

[Samir Basnet]

I called .copy() but its not working @Louis Pullen-Freilich [G]

[Louis Pullen-Freilich [G]]

Can you share the code you are using?

[Samir Basnet]

@ExperimentalAnimationApi
@Composable
fun LoginScreen(navController: NavController, viewModel: UserViewModel) {
val loginState = viewModel.loginState.value

Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
var startAnimation by remember { mutableStateOf(false) }
LaunchedEffect(Unit) {
delay(5)
if (!startAnimation)
startAnimation = true
}

Image(
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop,
painter = painterResource(id = R.drawable.gradient_background),
contentDescription = null,
)
AnimatedVisibility(
visible = startAnimation,
enter = slideInVertically(animationSpec = TweenSpec(durationMillis = 900))
) {
Card(
modifier = Modifier
.padding(horizontal = 15.dp, vertical = 20.dp)
.fillMaxWidth()
.wrapContentHeight()
) {
Column(
modifier = Modifier.verticalScroll(rememberScrollState()),
horizontalAlignment = Alignment.CenterHorizontally
) {
MahalSectionHeader(
modifier = Modifier
.padding(top = 20.dp, start = 15.dp)
.align(Alignment.Start), label = "LOGIN"
)
val passwordFocusRequester = remember { FocusRequester() }
val focusManager = LocalFocusManager.current

MahalFirstTextField(
label = "Mobile Number",
keyboardType = KeyboardType.Phone,
leadingIcon = Icons.Filled.Phone,
nextFocusRequester = passwordFocusRequester
) {
viewModel.onLoginChange(it)
}

MahalPasswordField(
label = "Password",
imeAction = ImeAction.Done,
focusRequester = passwordFocusRequester,
focusManager = focusManager
) {
viewModel.onPasswordChange(it)
}

MahalTextButton(
modifier = Modifier
.align(Alignment.End)
.padding(end = 15.dp),
label = "Forgot password?",
performAction = { })
MahalSolidButton(label = "Login", apiState = loginState) {
//viewModel.loginUser()
navController.navigate("home")
}

val noAccount = with(AnnotatedString.Builder()) {
pushStyle(
SpanStyle(
color = MaterialTheme.colors.onSurface
)
)
append("Don't have an account? ")
pushStyle(
SpanStyle(
fontSize = 16.sp,
color = pinkA200,
)
)
append("SignUp")
toAnnotatedString()
}
ClickableText(
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(top = 10.dp)
.indication(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(true)
),
text = noAccount,
style = MaterialTheme.typography.subtitle2
) {
Timber.d("$it")
}

Text(
modifier = Modifier.padding(top = 15.dp),
text = "Or Connect With",
color = pink800,
style = MaterialTheme.typography.overline
)
Row(modifier = Modifier.wrapContentSize()) {
IconButton(onClick = { /*TODO*/ }) {
Icon(
modifier = Modifier.size(30.dp),
painter = painterResource(id = R.drawable.ic_facebook),
contentDescription = "Login via facebook",
tint = Color.Unspecified,
)
}
IconButton(
modifier = Modifier.padding(horizontal = 5.dp),
onClick = { /*TODO*/ }) {
Icon(
modifier = Modifier
.size(30.dp),
painter = painterResource(id = R.drawable.ic_twitter),
contentDescription = "Login via facebook",
tint = Color.Unspecified,
)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(
modifier = Modifier.size(30.dp),
painter = painterResource(id = R.drawable.ic_google),
contentDescription = "Login via facebook",
tint = Color.Unspecified,
)
}
}
Spacer(modifier = Modifier.padding(bottom = 20.dp))
}


}
}

MahalErrorSnackBar(apiState = loginState, modifier = Modifier.align(Alignment.TopCenter))

if (loginState is ApiState.Success)
navController.navigate("home")

}
}

[Samir Basnet]

package com.view9.mahal.theme

import android.graphics.Color
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable

private val DarkColorPalette = darkColors(
primary = pink800,
primaryVariant = pink800,
secondary = darkGray,
surface = darkGray
)

private val LightColorPalette = lightColors(
primary = pink800,
primaryVariant = pink800,
secondary = white,
surface = white

/* Other default colors to override
background = Color.White,
surface = Color.White,
onPrimary = Color.White,
onSecondary = Color.Black,
onBackground = Color.Black,
onSurface = Color.Black,
*/
)

@Composable
fun MahalTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}

MaterialTheme(
colors = colors.copy(),
typography = typography,
shapes = shapes,
content = content
)
}

[Samir Basnet]

@Louis Pullen-Freilich [G] isn't the card color supposed to be dark gray when switched to dark mode? but it does not change

[Louis Pullen-Freilich [G]]

What's the error? This looks like it should work

[Louis Pullen-Freilich [G]]

Oh, I see

[Louis Pullen-Freilich [G]]

Is the card inside the theme? I don't see where you are calling the theme here

[Samir Basnet]

class MahalActivity : AppCompatActivity() {

private val viewModel:UserViewModel by viewModels()


@ExperimentalAnimationApi
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MahalTheme {
val navController = rememberNavController()
SetUpNavHost(navController)
}
}
}


@ExperimentalAnimationApi
@Composable
private fun SetUpNavHost(navController: NavHostController) {
NavHost(navController = navController, startDestination = "splash") {
composable("splash") { SplashScreen(navController) }
composable("login") { LoginScreen(navController,viewModel) }
composable("signup") { SignUpScreen(navController,viewModel) }
composable("home") { HomeScreen() }
}

}
}

[Louis Pullen-Freilich [G]]

Seems like it should work, is it just the card colour that didn't change? Or every colour

[Samir Basnet]

Seems like the isSystemDarkMode() not working. Wait i will Log and check

[Samir Basnet]

@Louis Pullen-Freilich [G] i was using AppCompatActivity instead of ComponentActivity. That was the issue. Man i wasted a lot of time😢

[Louis Pullen-Freilich [G]]

Hm, AppCompatActivity should still work though here

[Samir Basnet]

Don't know about that but using ComponentActivity made everything normal. With AppCompatActivity even the isSystemThemeDark() function returned false every time