# Theme

The component carries no Nitpick branding by default. You choose three things in code: the color, the font and the place of the edge tab. Everything else is fixed, so the form looks right in every app and in every language.

## What you can set

| Option | What it sets |
|---|---|
| Color | The Send button, the chosen kind and the rim of the tab. `standard` (the system label color on the system background) or an accent color of your app. The component picks black or white on top of it |
| Font | A font that is already in your app, used for headings and buttons only. Running text stays the system font. Arabic, Hindi, Japanese, Korean and Chinese always use the system font |
| Place of the tab | The side, right or left (the physical side, also in an app that runs from right to left), and the vertical place of the middle of the tab as a fraction from 0 to 1 of the window height (default 0.5). The tab stays at least 60 points from the top and the bottom |
| Brand mark (optional) | A small mark with the Nitpick domain under the panel. Off by default |

Fixed, not options: background, text color, corner radius, the shape of the tab, and the red (`#FF3B30`) of the tap spot and the element frame.

Light and dark: SwiftUI takes the appearance of your app's window over when the panel opens and follows changes. Expo follows `useColorScheme()`, so the system setting or `Appearance.setColorScheme`. An app that handles light and dark only in a theme of its own gets the system setting.

Which kinds of feedback are on and the two texts (the sentence under Send and the thank-you) are not set in code. You change them in the dashboard, with the CLI or over MCP: see [Settings](/docs/settings).

## SwiftUI

```swift
var options = NitpickOptions(
    tabEdge: .right,
    tabVerticalPosition: 0.35,
    showsBrand: false
)
options.theme = NitpickTheme(color: .accent(Color("Brand")), fontName: "Inter-Regular")
Nitpick.configure(appKey: "npk_...", options: options)
```

`color` is `.standard` or `.accent(Color)`. `fontName` is the PostScript name of a font that is already in your app, or `nil` for the system font. `tabEdge` is `.right` or `.left`.

## Expo and React Native

```tsx
<NitpickProvider
  appKey="npk_..."
  options={{
    tabPosition: { side: 'right', top: 0.35 },
    brandMark: false
  }}
  theme={{ color: '#FF4A1C', fontFamily: 'Inter' }}
>
```

`color` is `'standard'` or `'#RRGGBB'`; any other value gives one line in the log and falls back to `standard`. The font must be loaded already, for example with `useFonts`; otherwise the system font is used.

## The note under Send

By default the form says: "Your feedback goes to the maker of this app." You can change it per language in the settings. Keep a short line like it: users should know where the report goes.