Theme

Setup your theme colors and splash screen colors.

Colors

tip

You can use the Material Theme Builder to generate a complete color palette.

Theme Builder

1. Go to Material Theme Builder
2. Customize your theme colors by uploading a seed picture, randomizing, or manually selecting colors.
3. Click on Pick your font and then Export theme button, select Jetpack Compose and download the zip file.
4. Replace the content of the Color.kt file in shared/src/commonMain/kotlin/com/zenithapps/mobilestack/ui/style/Color.kt with the downloaded Color.kt file. You can remove the mid/high contrast colors as KMP doesnt support them yet.
5. Done! Your app now uses the custom colors.

Manually

1. Go to shared/src/commonMain/kotlin/com/zenithapps/mobilestack/ui/style/Color.kt and replace the individual HEX values with your custom colors. ( Keep in mind that the colors should be in the format 0xFF000000 where FF is the alpha value.)

Dark mode

The app supports dark mode by default. You can customize the colors for dark mode in the Color.kt file.

tip

In case you wish to only work with light or dark theme, you can replace the isSystemInDarkTheme() value in shared/src/commonMain/kotlin/com/zenithapps/mobilestack/ui/style/Theme.kt. eg:

@Composable
fun MobileStackTheme(
    useDarkTheme: Boolean = false, // <- Change like this to only use light theme and vice versa.
    content: @Composable () -> Unit
)

Android Splash screen

By default the OS uses the app icon with the splash background color as the splash screen. To customize the splash background color:

1. Go to androidApp/src/main/res/ and replace the colors in all the styles.xml files with your desired splash background color. (values-night will be used for dark mode)