Theming

Theming

In order to customize the theme, you need to re-use the TUITheme ready-made theme, and you can change the color using it.

First, you need to create TUIColor and pass it to the TUITheme, here is how it is implemented:

@Composable fun TUITheme(
  darkTheme: Boolean = isSystemInDarkTheme(),
  lightColors: TUIColors = defaultLightColors,
  darkColors: TUIColors = defaultDarkColors,
  content: @Composable () -> Unit,
) {
  val colors = if (darkTheme) darkColors else lightColors

  CompositionLocalProvider(
    LocalTUITypography provides extendedTypography, LocalTUIColors provides colors
  ) {
    MaterialTheme(
      content = content, shapes = Shapes
    )
  }
}

As you can see, we are just using CompositionLocalProvider to provide the colors and typography, but you can change the colors only, and you can refer to the colors in the composition using TUITheme companion object, it has the following:

object TUITheme {
  val typography: TUITypography
    @Composable
    get() = LocalTUITypography.current
  val colors: TUIColors
    @Composable
    get() = LocalTUIColors.current
}

Here are the TUIColor parameters you can change:

class TUIColors(
  val primary: Color,
  val onPrimary: Color,
  val primaryAlt: Color,
  val onPrimaryAlt: Color,
  val secondary: Color,
  val onSecondary: Color,
  val secondaryAlt: Color,
  val onSecondaryAlt: Color,
  val tertiary: Color,
  val onTertiary: Color,
  val tertiaryAlt: Color,
  val onTertiaryAlt: Color,
  val success: Color,
  val onSuccess: Color,
  val success10: Color,
  val success20: Color,
  val error: Color,
  val onError: Color,
  val error10: Color,
  val warning: Color,
  val onWarning: Color,
  val warning10: Color,
  val background: Color,
  val onBackground: Color,
  val utilityOutline: Color,
  val utilityDisabledContent: Color,
  val utilityDisabledBackground: Color,
  val utilityLink: Color,
  val inputBackground: Color,
  val inputText: Color,
  val inputDim: Color,
  val surface: Color,
  val surface50: Color,
  val onSurface: Color,
  val surfaceVariant: Color,
  val surfaceVariantHover: Color,
  val constantLight: Color,
  val constantDark: Color,
  val inputTextDim: Color,
  val surfaceHover: Color,
  val primaryAltHover:Color,
)

Here is how the colors are used and derived:

---

Custom Theme

If you want a custom theme, then you have to implement the theme using CompositionLocalProvider to provide your own colors, typography and shapes; you can follow this guide in order to implement your custom design.

TUI Tarka Kit is a custom design, so if you are changing everything, then you are implementing your own custom design, so there is no need to use ours.