I had an error when trying to change to the dark theme in android studio, when trying to change the theme (with code) the change of state does not occur, both the text and the background do not change
this is the code:
@Composable
fun MyCompnent(){
Row(modifier = Modifier
.background(MaterialTheme.colors.background)
.padding(8.dp)) {
MyImageView()
MyTexts()
}
}
@Composable
fun MyTexts(){
Column(modifier = Modifier.padding(start = 5.dp)) {
MyText(
"HELLO",
MaterialTheme.colors.primary,
MaterialTheme.typography.subtitle1
)
Spacer(modifier = Modifier.height(9.dp))
MyText(
"WORLD",
MaterialTheme.colors.onBackground,
MaterialTheme.typography.subtitle2
)
}
}
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun PreviewComposable(){
MyCompnent()
}
package com.example.tomasardiles.ui.theme
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 = Purple200,
primaryVariant = Purple700,
secondary = Teal200,
onBackground = white
)
private val LightColorPalette = lightColors(
primary = Purple500,
primaryVariant = Purple700,
secondary = Teal200,
onBackground = black
)
package com.example.tomasardiles.ui.theme
import androidx.compose.ui.graphics.Color
val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
val white = Color.White
val black = Color.Black
I did the code following a course, what I expected was that the background would change to black and the word "WORLD" to white
CodePudding user response:
**Update update
Once it goes dark mode once the UI mode seems to work?
**Update
I had to manually flip it to dark mode in my preview. I did not find the uiMode to work:
@Preview
@Composable
fun DefaultPreview() {
MyApplicationTheme(darkTheme = true) {
Surface {
Greeting("Android")
}
}
}
Look at defining your theme.
@Composable
fun MyTheme(useDarkTheme : Boolean, content : @Composable () -> Unit){
MaterialTheme(colors : Colors = if(useDarkTheme) darkPalette else lightPalette, content = content)
}
CodePudding user response:
Try updating your Theme
file with an AppTheme
composable function like:
package com.example.tomasardiles.ui.theme
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 = Purple200,
primaryVariant = Purple700,
secondary = Teal200,
onBackground = white
)
private val LightColorPalette = lightColors(
primary = Purple500,
primaryVariant = Purple700,
secondary = Teal200,
onBackground = black
)
@Composable
fun AppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}
MaterialTheme(
colorScheme = colors
)
}
and then in your MainActivity
file add this AppTheme
:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
AppTheme {
MyCompnent()
}
}
}