change background color surface light/dark jetpack compose-CodePudding

I'm trying to start with jetpack compose and it's getting complicated to be able to change the background automatically according to the theme chosen by the user (light dark).

I am editing the colors from theme.kt

private val DarkColorScheme = darkColorScheme(
primary = Purple80,
secondary = PurpleGrey80,
tertiary = Pink80,
surface = Color(0xFF0BB000),
background = Color(0xFF0BB000),
onBackground = Color(0xFF0BB000))

The problem is that when I run the app, the background color is still grey.

I think the problem is that my app doesn't take the colors from the theme, since I tried to set it directly, but it doesn't change the background color either.

Surface ( color = MaterialTheme.colorScheme.background)

If anyone has any ideas why it doesn't change color automatically and point me to it, I'd appreciate it.

I can set the palette again from my activity and change it, it depends on the mode chosen by the user, but it is not an optimal solution and it looks ugly.

I leave my activity.kt

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        TruequeGualeguaychuTheme {
            Surface ( color = MaterialTheme.colorScheme.background){
                Text(
                    modifier = Modifier
                        .fillMaxSize()
                        .wrapContentHeight(),
                    textAlign = TextAlign.Center,
                    text = "Hello Android!",
                )
            }
        }
    }
}

}

It should have a green background but it does not take the color declared in ( background = Color(0xFF0BB000) )

CodePudding user response：

I have implemented similar functions before,but it's at Jb-compose desktop.Provide a reference:

MainApp.kt:

@OptIn(ExperimentalMaterialApi::class)
@Composable
@Preview
fun launchApp() {
  MaterialTheme(
    colors = darkColors(
                primary = MyColor.primaryColor,
                primaryVariant = MyColor.primaryColor,
                secondary = MyColor.primaryColor,
                secondaryVariant = MyColor.primaryColor,
                background = MyColor.darkBackgroundColor,
                surface = MyColor.darkBackgroundColor,
                onPrimary = Color.White,
                onSecondary = Color.White,
                onBackground = Color.White,
                onSurface = Color.White,
                error = Color.Red,
                one rror = Color.White
            ),
        ){
           //...
                 }
}

Main.kt:

fun main(args: Array<String>) = application {
    Window(
        onCloseRequest = ::exitApplication,
        icon = painterResource("icon/xx.ico"),
        title = "xx ${RuntimeContext.APP_VERSION}",
    ) {
        MainApp.launchApp()

    }
}

I hope this is helpful.

CodePudding user response：

val Colors.myBackgroundColor get() = if (isLight) Color.White else Color.Black

you can create color like this and use this color in Surface background color.

    Surface(modifier = Modifier
        .fillMaxSize()
        .background(color = MaterialTheme.colors.myBackgroundColor)) {
// your code 
}

CodePudding user response：

The part it looks like you're missing is the hinted at in @vaspike's answer. All views that should utilize your custom theme should derive from an instance of the theme. For example:

@Composable
fun MyTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = LightColors, // A list of key/values I define.
        content = content
    )
}

@Composable
fun HomePage(){
    MyTheme(){
        // composables that use the theme.
    }
}

This comes from the example found here, https://developer.android.com/codelabs/jetpack-compose-theming#3

CodePudding user response：

the idea to declare the colors only once in the theme. After this it changes only depending on the mode in which the phone is (light or dark) Without having to modify each component individually