error when trying to switch to dark theme in android studio

Question

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

Have you tried wrapping the MyComponent in the MaterialTheme lambda? — Kerry, Dec 29 '22 at 02:56
no i haven't tried,i don't understand what you mean but thanks — Tomas Ardiles, Dec 29 '22 at 20:08
@Composable fun MyCompnent(){ MaterialTheme{ Row(modifier = Modifier .background(MaterialTheme.colors.background) .padding(8.dp)) { MyImageView() MyTexts() } } } — Kerry, Dec 29 '22 at 20:57
thanks I made the change in my component but still no change in the result — Tomas Ardiles, Dec 29 '22 at 21:29
Looks like you are not the only one that has this problem : https://stackoverflow.com/questions/72806571/android-jetpack-compose-preview-ui-mode-night-yes-does-not-show-dark-background — Kerry, Dec 30 '22 at 15:05

Kerry · Answer 1 · 2022-12-30T16:18:32.090

0

**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)
}

edited Dec 30 '22 at 16:18

answered Dec 29 '22 at 21:36

Kerry

283
2
16

you mean this #Composable fun TomasardilesTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: #Composable () -> Unit) { val colors = if (darkTheme) { DarkColorPalette } else { LightColorPalette } MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) } – Tomas Ardiles Dec 30 '22 at 08:44
# = @ tetera pe – Tomas Ardiles Dec 30 '22 at 08:45

score 0 · Answer 2 · answered Dec 30 '22 at 16:32

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

error when trying to switch to dark theme in android studio

2 Answers2