# Defining a Custom Color Schemes

### 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:

```swift
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.

```swift
@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:

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

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

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

> MaterialUIKit comes with the `MaterialClassic` theme by default.