Location>code7788 >text

Jetpack Compose learning (12) - Material Theme theme color switching

Popularity：637 ℃/2024-07-27 15:50:37

Original: EnglishJetpack Compose learning (12) - Material Theme theme color switching-Stars-One's grocery nest

I've been studying the Jetpack Compose M3 theme switching effect.

For previous posts in this series, check out this category linkJetpack compose learning

How to generate a theme

First of all, we need to know that M3 provides an online site for developers to quickly generate themes, details can be found in -Material Theme Builder

However, it may require a bit of magic to access, the page is as follows

And the upper right corner, you can quickly export the theme file (since we are Compose, so choose to export compose can be)

You will get a theme file named kt, as shown below

After that, we can set the current theme to use as needed (via MaterialTheme's colorScheme parameter).

  • Bright color themes start with lightColorScheme.
  • darkColorScheme is a dark color theme.

coding

If we need to change the light or dark theme, we just need to change the colorScheme parameter.

object MyThemeStyle{
    var isDark = mutableStateOf(false)

    val LightColorPalette = lightColorScheme(

    )

    val DarkColorPalette = darkColorScheme(

    )
}

@Composable
fun App() {
    var isDark by remember { }

	//Based on current selection,Make changes to light and dark themes
    MaterialTheme(
        colorScheme = if (isDark) DarkColorPalette else LightColorPalette
    ) {
		Box{
			Button(onClick = {
                 =()
            }){
                Text("Change Theme")
            }
		}
	}

Of course, the above code, if you restart the software, will be restored to the default.We can save the configuration and read it every time we start the software.

  • Desktop: configuration is saved in a file, I use the Properties file.
  • Android: Just save the configuration via SharePreference etc.

clarification

It should be noted that we in the MaterialTheme components in the other Composable, the layout to use Surface, you can trigger the corresponding font color settings, icon color settings (change the theme will also automatically change the theme), with the other layout of the @Composable, there is no such automatic change of the color of the effect!

primary and onPrimary means that the bottom of the background color is primary, and onPrimary corresponds to the background of the text or icon icon color, a few other theme colors are also similar to the principle, and will not go into detail!

sample code above, we just set up the theme color, other shapes, typography (font size) we are still using the default

Here are a few other common objects to add to the MaterialTheme.

Setting the Shape

you can use this object to set the component background for the rounded rectangle, such as the following sample code

@Composable
Surface((,)){
	
}

Setting the color

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ClickText(content: String, onclick: () -> Unit) {
    Text(content, color = , modifier =  {
        ()
    }.pointerHoverIcon(, false))
}

Setting the font size

The font size can also be set using theto set it, as in the following code.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ClickText(content: String, onclick: () -> Unit) {
    Text(content, color = , modifier =  {
        ()
    }.pointerHoverIcon(, false))
}

consultation

  • Material Theme BuilderTools for generating theme colors
  • Compose hit the nail on the head Material Design 3 | Jetpack Compose | Android Developers
<Previous Next>