silk-widgets/com.varabyte.kobweb.silk.components.layout/Surface

Surface

@Composable
fun Surface(modifier: Modifier = Modifier, variant: CssStyleVariant<SurfaceKind>? = null, colorModeOverride: ColorMode? = null, ref: ElementRefScope<HTMLElement>? = null, content: @Composable () -> Unit)(source)

A container which encapsulates a SilkTheme-aware area.

This widget is a Div that is also responsible for setting the site's color look and feel.

You can also explicitly pass in a color mode, which, if set, will override the value for all of its children. In this way, you can nest child surfaces if you want some areas to have overridden color modes, which can be useful for things like areas that are always light or always dark regardless of the site's overall theme. See also ColorMode.current (for reading the color mode) and ColorMode.currentState if you need to change it.

All Silk apps expect to have a root Surface at or near the top of their layout.

@Composable
fun Surface(modifier: Modifier = Modifier, variant: CssStyleVariant<SurfaceKind>? = null, colorModeOverride: ColorMode? = null, contentAlignment: Alignment, ref: ElementRefScope<HTMLElement>? = null, content: @Composable BoxScope.() -> Unit)(source)

Deprecated

Rather than passing in the `contentAlignment` parameter here, instead remove it and make a `Box` be your first child (i.e. `Surface { Box(contentAlignment = ...) { ... } }`. This approach provides a more consistent API with Jetpack Compose and provide a default behavior experience that acts more like users expect (HTML elements that flow vertically).

A panel which encapsulates a SilkTheme-aware area.

This widget is similar to a Box except it also responsible for setting the site's color look and feel.

You can also explicitly pass in a color mode, which, if set, will override the value for all of its children. In this way, you can nest child surfaces if you want some areas to have overridden color modes, which can be useful for things like areas that are always light or always dark regardless of the site's overall theme. See also ColorMode.current (for reading the color mode) and ColorMode.currentState if you need to change it.

All Silk apps expect to have a root Surface at or near the top of their layout.