[Technical Questions] Customizing Onboarding View features from SpeziOnboarding

[kc224]

In what area do you have a technical challenge?

SwiftUI

Description

I previously created separate Swift files with non-functional front-end views of what I want to create but realized I should just be trying to customize the pre-existing Spezi files so I can preserve their functionality but just customize the front-end.

I’m a little lost on where I can begin customizing some of the built-in Spezi features (for example, changing the color of the title in the Onboarding View imported by SpeziOnboarding):

Reproduction

Current Onboarding View has built-in features (title, subtitle, etc)

Expected behavior

I'm hoping to customize the Onboarding View in a number of ways (change font, colors, remove subtitle, add logo images, etc)

Additional context

No response

Code of Conduct

• I agree to follow this course's Code of Conduct and Contributing Guidelines

[PSchmiedmayer]

Hi @kc224,

The Onboarding Views are customizable in a way that you can pass in a custom Title View that can e.g. have different colored titles or any other customizations. You can check out https://swiftpackageindex.com/stanfordspezi/spezionboarding/1.0.2/documentation/spezionboarding/onboardingview for the documentation around this. This initializer is the one you are searching for: https://swiftpackageindex.com/stanfordspezi/spezionboarding/1.0.2/documentation/spezionboarding/onboardingview/init(titleview:contentview:actionview:).

In the titleView closure you can then pass in a custom view that fits your needs, e.g. something like this:

struct CustomTitleView: View {
    var body: some View {
        // ...
    }
}

Then use that in your view:

struct Welcome: View {
    @Environment(OnboardingNavigationPath.self) private var onboardingNavigationPath
    
    var body: some View {
        OnboardingView(
            titleView: {
                CustomTitleView()
            },
            contentView: {
                OnboardingInformationView(areas: [
                    // ...
                ])
            },
            actionView: {
                OnboardingActionsView(/* ... */) {
                    // ...
                }
            }
        )
        .padding(.top, 24)
    }
}

If you want to change the color of a view. you can see an overview of the available options here: https://stackoverflow.com/questions/68398048/swiftui-difference-between-accent-foreground-and-tint-color#:~:text=Foreground%20color%20usually%20applies%20to,one%2Doff%20overrides%20on%20controls.

I would generally advise to not use a lot of different colors in the app and use the accent color as a great way to style your views: https://sarunw.com/posts/swiftui-accentcolor/