compose for desktop's Window component setting background transparency

Question

I don't konwn how to set Window component background transparency in compose for desktop. I using Windows11 System

Window(
        onCloseRequest =::exitApplication,
        state = widowState,
        icon = icon,
        undecorated = true,
        transparent = true,
        resizable = false
    ){
        Box(
        modifier = Modifier
            .clip(shape = RoundedCornerShape(app_common_rounded_corner))
            .fillMaxSize()
            .background(dark_primary)
        ){}
    }

I tried to set "transparent = true", after that I used a Box component in Window component and set Box's Modifier.clip().background(), but I found Window component's corner background is black instead of transparent

Answer 1

// maybe you can try this?
@Composable
fun ThemeWindow(
    onCloseRequest: () -> Unit,
    state: WindowState,
    title: String = "Title",
    isDark: Boolean = false,
    alwaysOnTop: Boolean = false,
    elevation: Dp = 4.dp,
    radius: Dp = 16.dp,
    border: BorderStroke? = null,
    content: @Composable FrameWindowScope.() -> Unit,
) {
    Window(
        onCloseRequest = onCloseRequest,
        resizable = false,
        undecorated = true,
        transparent = true,
        alwaysOnTop = alwaysOnTop,
        title = title,
        state = state,
    ) {
        YourTheme( // this should be your theme
            isDark = isDark,
        ) {
            Surface(
                elevation = elevation,
                shape = RoundedCornerShape(radius),
                border = border,
                modifier = Modifier.fillMaxSize().padding(radius), // reserve rounded corners padding
            ) {
                [email protected]{ // if you need window drag, please use it to wrap around `content()`
                    content()
                }
                
                //content()
            }
        }
    }
}