Theme

Theme and Brightness

AppKickstarter is designed to enhance the user interface on mobile devices by utilizing two key values: theme and brightness.

The theme refers to the current color palette in use, which can either be the default palette provided by the app or a palette selected by the user in their settings.

Brightness, on the other hand, determines whether the UI is displayed in light, dark, or system mode. By default, the brightness is set to 'system', allowing the app to match the system's current brightness setting, but users have the option to customize this in their settings to either 'light' or 'dark' mode.

For example, imagine you support two color palettes in your application, Blue Chill and Medium Carmine:

Blue Chill Palette color

val BlueChillColors = { useDarkTheme ->
    if (useDarkTheme) {
        CustomColors(
            background = blueChill950, 
            ...
        )
    } else {
        CustomColors(
            background = blueChill50, 
            ...
        )    
    }
}

Medium Carmine Palette color

val MediumCarmineColors = { useDarkTheme ->
    if (useDarkTheme) {
        CustomColors(
            background = mediumCarmine950, 
            ...
        )
    } else {
        CustomColors(
            background = mediumCarmine50, 
            ...
        )    
    }
}

In the KickstarterTheme function, you have to update to this:

val customColors = when (selectedTheme) {
    "BlueChill" -> BlueChillColors(useDarkTheme)
    "MediumCarmine" -> MediumCarmine(useDarkTheme)
    else -> throw IllegalStateException("$selectedTheme theme does not exist")
}

KickstarterTheme is the cornerstone of AppKickstarter's approach to creating a fully customized design system. This component is responsible for generating the fonts, colors, and other essential design elements that define the look and feel of the app.

Fonts

Creating custom fonts within the KickstarterTheme involves leveraging the font resources stored in the resources module of your application. These resources are accessible through dynamically generated identifiers during the compilation process, ensuring that your app can efficiently load and use these fonts at runtime.

Access Values

Accessing the values defined by KickstarterTheme is straightforward and allows for the application of consistent design principles throughout the app. The following are examples of how to access various design elements:

• Colors: KickstarterTheme.colors.background to access the background color.

• Typography: KickstarterTheme.typography.title for accessing the style of titles.

• Elevation: KickstarterTheme.elevation.pressed to get the elevation value for pressed UI elements.

• Shapes: KickstarterTheme.shapes.badge to define the shape of badges or similar elements.

These elements can be easily integrated into the app's UI components, ensuring that the design remains consistent across different sections of the app.

Save Theme and Brightness

Saving the theme and brightness settings chosen by the user is crucial for providing a personalized app experience. AppKickstarter facilitates this by storing these preferences in PreferenceLocalDataSource. This ensures that the user's choices are preserved across app sessions, thereby maintaining the customized look and feel of the app according to the user's preferences.

Default Values

When the app is first launched, or when no user preferences have been set, PreferenceLocalDataSource is initialized with default values for both the theme and brightness. This initialization process is essential for defining the app's basic visual identity and ensuring that there is a default user experience that is visually appealing and user-friendly. The default theme is typically a well-designed color palette that aligns with the app's branding, while the default brightness setting is 'system', allowing the app to adapt to the current system settings of the user's device.

In cacheModule:

PreferenceLocalDataSource(
    settings = get(),
    defaultThemeName = "shark",
    defaultThemeBrightnessName = "system"
)

To support only light or dark modes, change the defaultThemeBrightnessName from "system" to the desired setting.

To change the app's color palette, simply update the defaultThemeName with the name of the desired color scheme.

Tutorial to update theme to your needs

Update theme