Design in the Garage

One design, chosen and tuned in the Garage, is what every SDK draws: the launcher and the bar, the chat window, the components, the booking sheet and the call screen — on your website and in every app. Nothing in your code names a colour or a font. A saved change reaches a website on its next page load and an app the next time it starts.

What to do, in order

1. Open the Garage: Agent → Embed & Widgets → Appearance.
2. Pick a design from the row under the stage (23 of them), and the surface to preview: In-app (iPhone or Android) or Website, light or dark.
3. Tune the whole look on the rail's tabs — Paint (accent, neutral tone, light or dark), Body (roundness, launcher shape, shadow), Typeface, Rims (launcher glyph, icon style), Lights (motion, glass), Interior (bubbles, frame, density).
4. Tune each surface: the Chat tab (window size, title and subtitle, avatar, header, background, booked calls, earlier messages, New conversation button, starters, placeholder, timestamps) and the Call tab (background, avatar and its shape, end button, buttons on a call, captions, timer, ringtone, the words for each moment). The preview follows each choice.
5. Save design. Under Setup: what visitors get, opens on, call audio, your logo, heading and loader.
6. Restart your app to see it (a website reloads). → Every surface draws the new design; the booking sheet uses the chat window's colours, fonts and corners.
7. Draw your own screens beside the SDK's from the same tokens, if you need to (below).

Every control, tab by tab, with what each changes: The Garage → Tuning.

The code, platform by platform

Nothing is needed for the SDK's own surfaces. This is for a screen of yours that should match them.

if let tokens = GraineInApp.shared.theme {                       // the device's light or dark, resolved
    print(tokens.colors.accent, tokens.colors.surface)           // "#RRGGBB" strings
}
 
final class ThemeWatcher: GraineListener {
    func onTheme(_ tokens: GraineThemeTokens?) {                  // the session arrived, or light/dark changed
        print("Accent now \(tokens?.colors.accent ?? "default")")
    }
}

Troubleshooting