https://kotlinlang.org logo
#compose
Title
# compose
c

Cicero

08/31/2021, 3:10 PM
Hey, I was going to write a post here but I wrote it on Medium: Stripping theme.xml for a more compose approach
c

Colton Idle

08/31/2021, 3:15 PM
I'd be curious on how to setup a light/dark mode theme without having to rely on a library (material components) for importing it. In my pure compose app I don't have the mdc library and I don't use appcompat anymore.
j

Javier

08/31/2021, 3:16 PM
there are a lot of samples with dark theme in the official docs
c

Colton Idle

08/31/2021, 3:26 PM
Yeah, but from what I've seen the launch theme doesn't actually support dark mode. lol https://github.com/android/compose-samples/blob/main/JetNews/app/src/main/res/values/styles.xml#L20
c

Cicero

08/31/2021, 3:47 PM
Copy code
interface AppColorMode{
    val IsLight: Boolean
    val Primary: Color
    val Surface: Color
}

class LightMode: AppColorMode {
    override val IsLight = true
    override val Primary = Color(0xFFFFFFFF)
    override val Surface = Color(0xFF123123)
}

class DarkMode: AppColorMode {
    override val IsLight = false
    override val Primary = Color(0xFF000000)
    override val Surface: Color = Color(0xFF123123)
}

@Composable
fun Color(): AppColorMode{
    return when(LocalContext.current.resources.configuration.uiMode){
        Configuration.UI_MODE_NIGHT_MASK -> {
            LightMode()
        }
        Configuration.UI_MODE_NIGHT_NO -> {
            DarkMode()
        }
        else -> {
            LightMode()
        }
    }
}

@Composable
fun SystemUISetup() {

    val systemUiController = rememberSystemUiController()
    val isLightTheme = Color().IsLight
    val systemBarColor = Color().Surface.copy(alpha = 0.0f)
    val transparentColor: (Color) -> Color = { original ->
        systemBarColor.compositeOver(original)
    }

    SideEffect {
        systemUiController.setSystemBarsColor(
            color = Color.Transparent,
            darkIcons = isLightTheme
        )

        systemUiController.setStatusBarColor(
            color = Color.Transparent, darkIcons = isLightTheme,
            transformColorForLightContent = transparentColor
        )

        systemUiController.setNavigationBarColor(
            color = Color.Transparent,
            darkIcons = isLightTheme,
            navigationBarContrastEnforced = false,
            transformColorForLightContent = transparentColor
        )
    }
}
How does this look? @Colton Idle I didn't force the system too much but you can write your own material stuff, first app I did in compose had tons of colors and I couldn't use compose
c

Colton Idle

08/31/2021, 3:50 PM
I'm talking about the theme xml that is set on the activity. Which I thought your article was going to be about based on the title. Lol
c

Cicero

08/31/2021, 3:54 PM
It's about not using theme.xml
The article was about it 🤔
You can't just remove it but you can move your references to compose and kotlin code. There is reference/paragraph exactly about why you can't just remove it.
k

Kirill Grouchnikov

08/31/2021, 4:41 PM
So it's not about a more Kotlin approach. It's about a more "Compose" approach? If by that you mean remove as much XML "legacy" as possible.
👌🏽 1
c

Cicero

08/31/2021, 4:57 PM
I changed the title, also felt super misleading myself. What I also realized is that I could go more in depth what is happening line by line and what have I done with all the other resources you would host on theme.xml I'm just so used to not using it anymore that I forget how not usual this is
My personal projects have none to very little XML, I'm moving into a playing with my localization strings now which is a little bit more challenging but yes. Taking all XML off the project can be kind of fun, takes you places.