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
- Manually
- Go to Material Theme Builder
- Customize your theme colors by uploading a seed picture, randomizing, or manually selecting colors.
- Click on
Pick your font
and thenExport theme
button, select Jetpack Compose and download the zip file. - Unzip the downloaded zip file and replace
shared/src/commonMain/kotlin/com/zenithapps/mobilestack/ui/style/Color.kt
with theColor.kt
from the unzipped folder. - Done! Your app now uses the custom colors.
KMP doesn't support mid/high contrast colors yet, so you can remove them from the Color.kt
file.
- 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 format0xFF000000
whereFF
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:
- Go to
androidApp/src/main/res/
and replace the colors in all thestyles.xml
files with your desired splash background color. (values-night
will be used for dark mode)