Defining a Custom Color Schemes

Define and apply custom color schemes to personalize the appearance.

Overview

Define custom color schemes to personalize the appearance of your app’s user interface components. Use the MUIKitColorScheme protocol to establish a set of colors for various UI elements, including backgrounds, titles, and highlights. Customize the color scheme globally by setting MaterialUIKit.configuration.colorScheme to your custom theme.

Create Your Custom Color Schemes

Implement the MUIKitColorScheme protocol to specify the color properties for different UI elements. For example:

struct AppleClassic: MUIKitColorScheme {
    var accent: Color = Color.blue
    var tonal: Color = Color.white.opacity(0.9)
    var onError: Color = Color.red
    var primaryBackground: Color = Color(uiColor: .systemBackground)
    var secondaryBackground: Color = Color(uiColor: .secondarySystemBackground)
    var tertiaryBackground: Color = Color(uiColor: .tertiarySystemBackground)
    var highlight: Color = Color.blue
    var primaryTitle: Color = .primary
    var secondaryTitle: Color = .secondary
    var separator: Color = Color.gray.opacity(0.4)
    var outline: Color = Color.gray.opacity(0.6)
    var onDisabled: Color = Color.gray.opacity(0.6)
}

Apply Your Custom Theme Globally

Assign your custom theme in the MaterialUIKit.configuration.colorScheme property to apply it across your app.

@main
struct MyApp: App {
    init() {
        MaterialUIKit.configuration.colorScheme = AppleClassic()
    }
}

Access Theme Colors in SwiftUI

Use your defined colors directly in SwiftUI views by accessing them through .materialUI prefix, such as .materialUIAccent or .materialUIPrimaryBackground. For example:

Text("Hello World")
    .foregroundColor(.materialUIPrimaryTitle)

You can access various theme colors in your SwiftUI views with the following properties:

Property Name	Description
materialUIAccent	Defines the accent color for emphasis throughout the UI.
materialUITonal	Provides a tonal color variant used for nuanced shading.
materialUIPrimaryBackground	Specifies the primary background color for main UI elements.
materialUISecondaryBackground	Sets the secondary background color for secondary UI elements.
materialUITertiaryBackground	Defines the tertiary background color for additional layers.
materialUIHighlight	Sets the color used to highlight titles in accent color.
materialUIPrimaryTitle	Specifies the primary color for main titles and headings.
materialUISecondaryTitle	Defines the color for secondary titles and subheadings.
materialUIOnError	Provides the color used for error messages and alert indicators.
materialUISeparator	Sets the color for dividers and separators between UI elements.
materialUIOnDisabled	Defines the color for disabled or inactive UI elements.
materialUIOutline	Specifies the color used for outlines and strokes around elements.

MaterialUIKit comes with the MaterialClassic theme by default.