AUI

Themes and Style

Style

Components use style to specify how the component should look in the application.

val customStyle = Style(
	backgroundColor = Color.Black, // Component Color
	color = Color.White, // Any Inner Component Color

	margin = PaddingValues(50.dp),
)

Some components may not use all the style options available.
And all the components use a default style located in org.android.ui.styles.DefaultStyles.
And for the components color the components use the contexts theme color map if there is no other color specified in Style.

ThemeProvider

The ThemeProvider gives components a map of preset colors to use.
If there is no ThemeProvider in the application a default theme will be used when calling useTheme()

For custom themes use the ThemeProvider and give it a custom theme as argument. It is also possible to use the ThemeProvider without a specified Theme.
If there is no Theme specified the ThemeProvider will use a default theme with dark mode set to system theme mode.

ThemeProvider { ... } // Default Theme and system default as dark mode

To use a custom theme, create the theme

val customTheme = Theme(
	dark = true,
	background = ThemeColorSet(
		lightColor = Color.LightGray,
		darkColor = Color.DarkGray
	),
	fallbackColorSet = ThemeColorSet(
		lightColor = Color.Blue,
		darkColor = Color.Yellow
	),
	colors = HashMap<ThemeKeysType, ThemeColorSet>().apply {
		put("myColor", ThemeColorSet(
			lightColor = Color.DarkGray,
			darkColor = Color.LightGray
		))
	}
)

The themes colors use a color set to separate dark and light colors.
To make sure that there is always a background color and a fallback color available a static color set is specified as background and tfallbackColorSet.
All other color sets are added to the colors map.

By default the theme has a color map with color set

  • primary
  • success
  • error
  • background
  • outline
  • text
  • dark text

To use the custom theme in the ThemeProvider add the theme as an argument.

ThemeProvider(customTheme) { ... }
Getting the Theme context

The AUI components use the theme to get the components colors.
To get the theme in the current context use the function useTheme()

val theme = useTheme()

val isDark = theme.dark
val bg = theme.background // Gets background color
val color = theme.getColor("primary") // Gets primary color

// Getting a color set
val colorSet = theme.getColorSet("primary") // Gets primary color set

It is possible to get the hole color set by the theme.
But if only the color is needed, calling getColor("name") will return the dark color if theme is dark theme or the light color if the theme is light theme.

To set if the theme should use dark or light mode, use the theme.dark.

val theme = useTheme()
var value by remember { mutableStateOf(theme.dark) }

Button(onClick = {
	value = !value
	theme.dark = value
})