Home > Software engineering >  error when trying to switch to dark theme in android studio
error when trying to switch to dark theme in android studio

Time:12-31

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()
            }
        }
    }
  • Related