streetsofboston
10/02/2020, 8:47 PMzoha131
10/02/2020, 8:49 PMText
for that?streetsofboston
10/02/2020, 8:50 PMZach Klippenstein (he/him) [MOD]
10/02/2020, 8:50 PMText
is already kind of material, it interacts with material colorsstreetsofboston
10/02/2020, 8:51 PMZach Klippenstein (he/him) [MOD]
10/02/2020, 8:52 PMstreetsofboston
10/02/2020, 8:52 PMZach Klippenstein (he/him) [MOD]
10/02/2020, 8:53 PMstreetsofboston
10/02/2020, 8:55 PMSean McQuillan [G]
10/02/2020, 9:03 PM@Preview
the easiest way to do this by surrounding the call with Surface
which both applies a background and specifies a (onSurface I believe) contrasting contentColor.
Note that applying a MaterialTheme
is not enough to set the contentColor
Text
is the right composable.Zach Klippenstein (he/him) [MOD]
10/02/2020, 9:06 PMSean McQuillan [G]
10/02/2020, 9:06 PMMaterialTheme
a definition of theming values used by the material system
Emphasis
and Material Components, the Material system for modifying contentColor (this is used by ProvideEmphasis
, Surface
etc and will call through to set content color – it reads from MaterialTheme
and the current contentColor as appropriate)
contentColor
an ambient that describes the "default" color to make things in the current call position to contrast with the background. This is used by both Material and Foundation.
(edit: done making edits 🙂 )streetsofboston
10/02/2020, 9:27 PMSurface { … }
did the trickSean McQuillan [G]
10/02/2020, 9:30 PMThemedPreview
that does exactly this (apply a theme & surface) – probably a good pattern to consider.
@Preview
@Composable
fun MyPreview() {
ThemedPreview { MyComposable }
}
streetsofboston
10/02/2020, 9:33 PM@Composable
fun WearOSPrototypeTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
themeColors: Colors = if (darkTheme) DarkColorPalette else LightColorPalette,
themeParameters: ThemeParameters = ThemeParameters(themeColors, null, null),
content: @Composable() () -> Unit
) {
val (tColors, tTypography, tShapes) = themeParameters
MaterialTheme(
colors = tColors ?: MaterialTheme.colors,
typography = tTypography ?: MaterialTheme.typography,
shapes = tShapes ?: MaterialTheme.shapes
) {
Surface(content = content)
}
}
For the preview, you can call it like this
WearOSPrototypeTheme(darkTheme = true) { ... }
(or provide the themeColors
instead).
For the actual app:
WearOSPrototypeTheme(themeParameters = createMdcTheme(ContextAmbient.current))
Sean McQuillan [G]
10/02/2020, 9:34 PMstreetsofboston
10/02/2020, 9:34 PMSean McQuillan [G]
10/02/2020, 9:35 PMSurface
streetsofboston
10/02/2020, 9:36 PMSean McQuillan [G]
10/02/2020, 9:36 PMstreetsofboston
10/02/2020, 9:40 PMSean McQuillan [G]
10/02/2020, 9:41 PMcontentColor
is an ambient, which means it's value is derived by some parent that set the ambient.
Surface
has the effect of specifying contentColor
(as does e.g. Toolbar
last I checked).contentColor
is the foundation level API, and Surface
which is in Material modifies itstreetsofboston
10/02/2020, 9:45 PM- Surface colors affect surfaces of components, such as cards, sheets, and menus.
- The background color appears behind scrollable content.
https://material.io/design/color/the-color-system.html#color-theme-creation