Theming

Using Modifier and color utilities for theming.

Color

KomoUI provides a KomoStyles class that manages the color scheme configuration. To customize the theme colors, simply override the KomoStyles class and assign it to your KomoTheme instance.

Create custom color class

object KomoLightStyles : KomoStyles {
    override val background: Color = Color(0xFFF7F3F9)
    override val foreground: Color = Color(0xFF374151)
    override val card: Color = Color(0xFFFFFFFF)
    override val cardForeground: Color = Color(0xFF374151)
    override val popover: Color = Color(0xFFFFFFFF)
    override val popoverForeground: Color = Color(0xFF374151)
    override val primary: Color = Color(0xFFA78BFA)
    override val primaryForeground: Color = Color(0xFFFFFFFF)
    override val secondary: Color = Color(0xFFE9D8FD)
    override val secondaryForeground: Color = Color(0xFF4B5563)
    override val muted: Color = Color(0xFFF3E8FF)
    override val mutedForeground: Color = Color(0xFF6B7280)
    override val accent: Color = Color(0xFFF3E5F5)
    override val accentForeground: Color = Color(0xFF374151)
    override val destructive: Color = Color(0xFFFCA5A5)
    override val destructiveForeground: Color = Color(0xFFFFFFFF)
    override val border: Color = Color(0xFFE9D8FD)
    override val input: Color = Color(0xFFE9D8FD)
    override val ring: Color = Color(0xFFA78BFA)
    override val chart1: Color = Color.Unspecified
    override val chart2: Color = Color.Unspecified
    override val chart3: Color = Color.Unspecified
    override val chart4: Color = Color.Unspecified
    override val chart5: Color = Color.Unspecified
    override val sidebar: Color = Color(0xFFE9D8FD)
    override val sidebarForeground: Color = Color(0xFF374151)
    override val sidebarPrimary: Color = Color(0xFFA78BFA)
    override val sidebarPrimaryForeground: Color = Color(0xFFFFFFFF)
    override val sidebarAccent: Color = Color(0xFFF3E5F5)
    override val sidebarAccentForeground: Color = Color(0xFF374151)
    override val sidebarBorder: Color = Color(0xFFE9D8FD)
    override val sidebarRing: Color = Color(0xFFA78BFA)
    override val snackbar = Color(0xFFF7F3F9)
}

Use the custom color scheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            KomoTheme(
                komoLightColors = KomoLightStyles,
            ) {
                // rest of your screen navigation or components
            }
        }
    }
}

Radius

KomoUI provides the KomoRadius class to define corner radius configurations used across components. To adjust the radius values, override the KomoRadius class and assign it to your KomoTheme.

Create custom radius class

object Radius : KomoRadius {
    override val radius: Dp = 4.dp
    override val sm: Dp = max(0.dp, radius - 4.dp)
    override val md: Dp = max(0.dp, radius - 2.dp)
    override val lg: Dp = radius
    override val xl: Dp = max(0.dp, radius + 4.dp)
    override val full: Dp = 999.dp
}

Use the custom radius

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            KomoTheme(
                komoRadius = Radius,
            ) {
                // rest of your screen navigation or components
            }
        }
    }
}

KomoUI ships built-in labels and accessibility descriptions in English — dialog close labels, sidebar toggle, "No results" text, search placeholders, and the calendar's month and weekday names. Override any of them with the KomoStrings class and pass it to KomoTheme's strings parameter. Unspecified fields keep their English defaults, so you only override what you translate.

Provide custom strings

val EnglishStrings = KomoStrings(
    closeDialog = "Close dialog",
    close = "Close",
    toggleSidebar = "Toggle Sidebar",
    noResults = "No result.",
    searchPlaceholder = "Search...",
    rowsSelected = { selected, total -> "$selected from $total selected rows." },
    monthNamesFull = listOf(
        "January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December",
    ),
    weekdayNamesShort = listOf("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"),
)

Month lists are indexed by ordinal: months JANUARY(0)..DECEMBER(11), weekdays MONDAY(0)..SUNDAY(6). The rowsSelected and pageIndicator fields are lambdas so counts can be interpolated per locale.

Use the custom strings

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            KomoTheme(
                strings = EnglishStrings,
            ) {
                // rest of your screen navigation or components
            }
        }
    }
}

Edit this page on GitHub