From 04c53fcc27196aa03a58ba021d82e5487c10b0a1 Mon Sep 17 00:00:00 2001 From: Szymon Chmal Date: Mon, 9 Mar 2026 17:10:49 +0100 Subject: [PATCH] docs: add activityBackgroundTint --- .../development/developing-live-activities.md | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/website/docs/ios/development/developing-live-activities.md b/website/docs/ios/development/developing-live-activities.md index c5f40910..9319d306 100644 --- a/website/docs/ios/development/developing-live-activities.md +++ b/website/docs/ios/development/developing-live-activities.md @@ -20,6 +20,32 @@ const variants = { } ``` +To customize the system Lock Screen chrome, pass an object with `content` and `activityBackgroundTint`: + +```typescript +const variants = { + lockScreen: { + activityBackgroundTint: '#101828', + content: ( + + Your content here + + ), + }, +} +``` + +`activityBackgroundTint` is applied via SwiftUI's `activityBackgroundTint(...)` modifier on iOS. Voltra currently accepts the same color formats handled by the native iOS parser: + +- Hex colors such as `#RGB`, `#RGBA`, `#RRGGBB`, and `#RRGGBBAA` +- `rgb(...)` and `rgba(...)` +- `hsl(...)` and `hsla(...)` +- Named colors: `red`, `orange`, `yellow`, `green`, `mint`, `teal`, `cyan`, `blue`, `indigo`, `purple`, `pink`, `brown`, `white`, `gray`, `black`, `clear`, `transparent`, `primary`, `secondary` + +Use `clear` or `transparent` to make the Live Activity background transparent. + +If the string cannot be parsed as one of those formats, iOS ignores the tint. + ### Dynamic Island The `island` variant defines how your Live Activity appears in the Dynamic Island (available on iPhone 14 Pro and later). The Dynamic Island has three display states: @@ -47,6 +73,8 @@ const variants = { } ``` +`keylineTint` uses the same iOS color parser and accepted formats as `activityBackgroundTint`. + ### Supplemental Activity Families (iOS 18+, watchOS 11+) The `supplementalActivityFamilies` variant defines how your Live Activity appears on Apple Watch Smart Stack and CarPlay displays. This variant is optional and works seamlessly with your existing lock screen and Dynamic Island variants.