Theming

Brand color in one line

DSTheme.brand(primary:) replaces the primary and accent colors and derives the hover and muted tints. Apply it once, at the root of your app.

import SwiftUI
import SwiftDS

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .dsTheme(.brand(primary: Color(hex: "#234134")))
        }
    }
}

You can also pass primaryHover, primaryMuted and primaryFG (text on primary fills, white by default) when the derived values don't fit your brand.

Customize any token

Start from DSTheme.default and change the properties you need. Every component inside the modified view uses the new values.

var theme = DSTheme.default
theme.primary = Color(hex: "#234134")
theme.accent = Color(hex: "#234134")
theme.success = Color(hex: "#16A34A")
theme.background = Color(hex: "#F7F7F5")

ContentView()
    .dsTheme(theme)

Override a single component

Buttons, icon buttons, links, chips, toggles, checkboxes, radios, sliders, steppers and spinners also take a color: argument that tints only that instance.

DSButton("Continue", color: Color(hex: "#234134")) { next() }
DSToggle("Notifications", isOn: $enabled, color: DSColor.success)
DSLink("Docs", color: Color(hex: "#234134")) { openDocs() }

Reading the theme in your own views

struct BrandHeader: View {
    @Environment(\.dsTheme) private var theme
    @Environment(\.colorScheme) private var scheme

    var body: some View {
        Text("Welcome")
            .dsTextStyle(.title)
            .foregroundStyle(theme.primary)
            .padding(DSSpacing.md)
            .background(scheme == .dark ? theme.surfaceDark : theme.surface)
    }
}

DSColor constants (and Color.dsPrimary etc.) always hold the default sand palette. Use them for fixed colors; read dsTheme when the color should follow the app's theme.

Theme properties

Default values are listed on the Colors page. The theme also offers primaryShadow(), glowShadow() and errorShadow(), which follow the theme colors.