Iconsanimated

Theme sun ↔ moon

A sun whose rays retract as a crescel mask slides in to form a moon — for light/dark toggles.

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun ThemeToggle(dark: Boolean, onToggle: () -> Unit) {
    val p by animateFloatAsState(if (dark) 1f else 0f, tween(450, easing = EaseInOut), label = "theme")
    val color = LocalContentColor.current
    Canvas(Modifier.size(40.dp).clickable(onClick = onToggle)) {
        val c = center; val r = 7.dp.toPx()
        // Rays shrink as we approach the moon.
        repeat(8) { i ->
            val a = (i * 45f) * PI.toFloat() / 180f
            val inner = r + 3.dp.toPx(); val outer = inner + 4.dp.toPx() * (1f - p)
            drawLine(
                color.copy(alpha = 1f - p), Offset(c.x + cos(a) * inner, c.y + sin(a) * inner),
                Offset(c.x + cos(a) * outer, c.y + sin(a) * outer), 2.dp.toPx(), StrokeCap.Round,
            )
        }
        drawCircle(color, r, c)
        // A background-coloured circle slides in to carve the crescent.
        drawCircle(MaterialTheme.colorScheme.background, r, Offset(c.x + r * p, c.y - r * 0.5f * p))
    }
}