Style your Application

SharedKit (SwiftyLaunch Module) - Style your App

Apps generated with SwiftyLaunch come with a set UI elements, SwiftUI View Styles and modifiers allowing you to easily make your app look great.

Throughout the app we use accent color, so by even changing the accent color, you can your change your app's whole vibe.

Default Accent Color Example

Orange Accent Color Example

To change the Accent Color, go to Targets/App/Resources/Assets.xcassets and change the color of the AccentColor asset.

Change Accent Color

Note, that you'll also have to change the color in the RevenueCat dashboard for the Paywall to match the style of the app.

Accent Background

You see that some of the views in the image have a faded accent color background. This is achieved by using the .accentBackground modifier.

extension View {
	public func accentBackground(strong: Bool = false) -> some View { }
}

strong: If true, the accent background will be more prominent.

Just attach it to any view you want to have an accent background.

Styling of UI elements

We also include a couple of pre-defined styles that are used throughout the app, like the .cta() button style, which makes the button prominent and colors it with the accent color.

Button("Conifrm") { }
    .buttonStyle(.cta())

Following styles are available:

Button Styles (.cta(), .secondary()). Read more.
TextField Style (CommonTextField()). Read more.
Checkmark Toggle Style (CheckToggleStyle()). Read more.

UI Components

The generated app will also include two additional UI components:

Hero View Component

HeroView is a view that contains a big, accent-colored SF Symbol icon, a title, and a subtitle. Useful for a big, prominent view in your app.

View Definition

public struct HeroView: View {
 
	public init(
		sfSymbolName: String,
		title: LocalizedStringKey,
		subtitle: LocalizedStringKey? = nil,
		size: HeroViewSize = .large,
		bounceOnAppear: Bool = false
	) {
	}
}

sfSymbolName: The name of the SF Symbol to use.
title: The title of the view.
subtitle (Optional): The subtitle of the view.
size (Optional): The size of the view, .large or .small. Default is .large.
bounceOnAppear (Optional): If true, the view will bounce when it appears. Default is false.

Usage Example

HeroView(
    symbol: "theatermask.and.paintbrush.fill",
    title: "Welcome to SwiftyLaunch!",
    subtitle: "The best way to build your app idea."
)

HeroView Example 1

In-App Examples

Examples of HeroView being used within the generated app:

HeroView Example 2

Profile Image Component

ProfileImage takes in a URL of an image and displays it in a circular frame. If the URL fails to load an image, will show a placeholder image.

View Definition

public struct ProfileImage: View {
	public init(url: URL?, width: CGFloat) {
		self.url = url
		self.width = width
	}
}

url: URL of the image to display. (On nill will always show the placeholder image)
width: Width of the image. The height will also be the same as the width.

Usage Example

ProfileImage(url: URL(string: "https://picsum.photos/id/237/200/300")!, width: 100)

ProfileImage Example

Overview Button Styles (CTA, Secondary)