Theme

Theme

The Theme struct is a pivotal component of SwiftRUI, specifically crafted to provide a unified and customizable color scheme for the user interface in SwiftUI applications. By default, Theme is implicitly applied to all components within SwiftRUI, ensuring a consistent look and feel throughout your app.

Table of Contents

• Default Application
• Usages

Default Application

• Automatic Integration: Theme is automatically used in all SwiftRUI components. If no specific colors are stated in your component, the Theme’s default or customized colors will be applied.
• Consistent Aesthetics: This default application helps maintain a cohesive visual experience, with consistent color usage across all UI elements.

Usages (Customization of Theme)

Modifying the Theme allows you to easily change the color scheme of the SwiftUI Components. If your app also used Theme, it will also affecting all components that use Theme colors.

1. Create Colors and Fonts Theme

Example of colors and fonts theme. For more informations vists:

import SwiftUI
import SwiftRUI

let colorsTheme = ColorTheme(
    accent: Color.blue
)

let fontsTheme = FontTheme(
    body: Font.body
)

2. Create Theme object

This theme object can be injected into the environment. This allows all the SwiftRUI components to use this styles.

import SwiftRUI

let theme = Theme(
    colors: colorsTheme,
    fonts: fontsTheme
)

3. Applying Theme

You can easily apply the your custom theme to your entire application or compomenets.

1. Declare the custom theme at the top level of your app using .environment. Refer to Theme API to see the parameter that you can change. You can use

1. .environment(\.theme, theme)
2. .applyThemeEnvironment(theme)

import SwiftUI
import SwiftRUI

@main
struct SwiftRUIExampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .applyThemeEnvironment(theme)
        }
    }
}

Example using `.envinoment`

@main
struct SwiftRUIExampleApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .applyThemeEnvironment(theme)
        }
    }
}

6. Apply in Preview

#Preview {
    ContentView()
        .applyThemeEnvironment(theme)
}

5. (Optional) Usage of Theme on your components or app

Leverage the Theme within individual components or across all your app by accessing the theme properties directly. This ensures that your components are always in sync with the overall color scheme of your app.

@Environment(\.theme) var theme: Theme

var body: some View {
    Text("SwiftRUI Rocks!")
        .foregroundColor(theme.primaryColor)
}

Preview Theme

If you are using SwiftRUI components, for you to view the theme in preview. You have to apply the environment. For this, we had create for you to apply easily .applyThemeEnvironment(theme) else you can use .environment(\.theme, theme).

#Preview {
    LanguageSelectionScreen()
        .applyThemeEnvironment(theme)
}

API References:

Theme()

Initializes a new theme with specified colors. - Parameters: - accentColor: The color used for accenting or highlighting elements in the UI. Default is blue. - primaryColor: The primary color of the UI, used in major elements like headers or primary buttons. Default is black. - secondaryColor: The secondary color of the UI, used in elements of lesser importance. Default is white. - backgroundColor: The general background color of the UI. Default is white. - errorBackgroundColor: The background color used for displaying error states or messages. Default is red. - warningBackgroundColor: The background color used for warning states or messages. Default is yellow. - successBackgroundColor: The background color used for success states or messages. Default is green. - onPrimaryColor: The color used for text or icons on top of primaryColor elements. Default is white.

    public init(accentColor: Color = .blue,
                primaryColor: Color = .black,
                secondaryColor: Color = .white,
                backgroundColor: Color = .white,
                errorBackgroundColor: Color = .red,
                warningBackgroundColor: Color = .yellow,
                successBackgroundColor: Color = .green,
                onPrimaryColor: Color = .white)

Contributing

We encourage contributions to the Theme struct and SwiftRUI as a whole. Whether it’s suggesting enhancements, reporting bugs, or improving documentation, your input is invaluable in refining SwiftRUI for the developer community.