<!-- AI agents: this is the Markdown version of an AppNorth documentation page. Index: https://www.appnorth.app/llms.txt -->

# Appearance

Pass an `AppNorthTheme` to the native views. The default primary color is SwiftUI's `.accentColor`; optional color pairs follow the screen's current light or dark appearance.

## Use your app colors {#theme}

Leave optional colors unset to keep the native defaults. For explicit light/dark values, use `AppNorthColorPair(light:dark:)`. A single-color pair uses that color in both appearances.

```swift title="ThemedCommunity.swift"
import SwiftUI
import AppNorth

struct ThemedCommunity: View {
    let client: AppNorthClient

    private var theme: AppNorthTheme {
        AppNorthTheme(
            primary: .accentColor,
            secondary: AppNorthColorPair(
                light: Color(white: 0.95),
                dark: Color(white: 0.12)
            ),
            tertiary: AppNorthColorPair(light: .white, dark: .black),
            text: AppNorthColorPair(.primary)
        )
    }

    var body: some View {
        AppNorthView(client: client, theme: theme)
    }
}
```

`primary` supplies tint and action accents. `secondary` supplies surfaces such as community rows and chat input backgrounds; `tertiary` supplies chat background. `text` overrides text where the views consume it. Status badges use the server's status color. Theme fields are not a global replacement for every system color.

Pass the same theme to `AppNorthChatView` or `AppNorthIdeaDetailView` when presenting them separately. Use your existing SwiftUI `.preferredColorScheme` if your app has an appearance override; there is no separate SDK theme-mode setting.

## Choose controls {#controls}

Use `AppNorthUIConfiguration` for `showsOpenClosedFilter`, `upvoteIcon`, `translateButton`, and `showsChatButton`. Icon choices are `.arrowUp` (default), `.thumbsUp`, `.chevronUp`, or `.systemName("...")` with a valid SF Symbol name. See [language](/docs/language#translation) for translation controls.

The watermark is determined by the project's `widgetConfig()` response. It is not a local theme flag. The SDK has no remote font or remote color configuration API.

## Verify {#verify}

1. Open community, idea detail, and chat in light and dark appearances.
2. Check text, status badges, buttons, focus, and disabled states with your chosen colors. Aim for at least 4.5:1 text contrast.
3. Increase Dynamic Type and turn on VoiceOver; confirm labels remain usable and text does not disappear into overridden surfaces.
4. If your app changes appearance at runtime, switch it while an SDK screen is open.