# Using ColorTokensKit on watchOS

Every token gives its dark stop on Apple Watch, so your watch app gets dark-mode contrast as is.

Your watch app gets the palette with no extra code. watchOS always draws in the dark appearance, so every token gives its dark stop, and text keeps the palette's [dark-mode contrast](https://colortokenskit.com/basics/how-accessible/index.md).

```swift
Text("3 nights from October 12")
    .font(.subheadline)
    .foregroundStyle(Color.proOrange.foregroundSecondary)   // always _200 on Apple Watch
```

- foregroundSecondary on black: #f9c9ab

Apple's guidelines say Dark Mode isn't supported on watchOS, and the package treats the watch as always dark: there, `Color(light:dark:)` returns its dark color, and every token in `ColorTokens.swift` is built with it.

## Color functions work out their result once

```swift
Text("Sold out")
    .font(.subheadline)
    .foregroundStyle(Color.proOrange.foregroundSecondary.soften())   // _250 on Apple Watch
```

- soften() on black: #f8ba92

The appearance never changes on Apple Watch, so [`soften(by:)`](https://colortokenskit.com/api/soften/index.md) and the other functions work out their dark-mode result once, when you call them.

## Put color behind cards, not the whole screen

```swift
VStack(alignment: .leading, spacing: 4) {
    Text("Lisbon")
        .font(.headline)
        .foregroundStyle(theme.foregroundPrimary)   // _50 on Apple Watch
    Text("3 nights from October 12")
        .font(.subheadline)
        .foregroundStyle(theme.foregroundSecondary)   // _200 on Apple Watch
}
.padding()
.background(theme.backgroundSecondary)   // _800 on Apple Watch
```

- Card title: #fdf3ec
- Card dates: #f9c9ab

Apple recommends background color when it tells people something, and not full screen on views that stay up for a long time, such as a workout. So keep the watch's black background, and put a family's background tokens behind a card or a row.

## Use a UIColor on watchOS

`UIColor(light:dark:)`, and the `UIColor(adapting:)` extension on [the UIKit page](https://colortokenskit.com/platforms/uikit/index.md), don't compile for watchOS. Where an API needs a `UIColor`, convert the token: `UIColor(Color.proOrange.foregroundSecondary)` is already its dark stop.

## Sources

- The library's [Color+Dynamic.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Platform/SwiftUI/Color+Dynamic.swift), where `Color(light:dark:)` returns the dark color on watchOS, and [Color+Adaptive.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Platform/SwiftUI/Color+Adaptive.swift), where the color functions work out their result once for dark mode.
- Apple Human Interface Guidelines, [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode): "Dark Mode isn't supported in visionOS or watchOS."
- Apple Human Interface Guidelines, [Color](https://developer.apple.com/design/human-interface-guidelines/color), whose watchOS section covers background color.

## See also

- [Managing dark mode](https://colortokenskit.com/getting-started/dark-mode/index.md): Get dark mode without extra code: tokens switch stops for you, and your own colors can too.
- [How accessible is it?](https://colortokenskit.com/basics/how-accessible/index.md): What the palette guarantees for contrast in every hue and mode, and what you still need to check.
- [Using ColorTokensKit in UIKit](https://colortokenskit.com/platforms/uikit/index.md): Give UIKit views the palette's tokens as UIColors that follow dark mode on every iOS version tested.
- [Using ColorTokensKit on visionOS](https://colortokenskit.com/platforms/visionos/index.md): Use the palette on Apple Vision Pro, where tokens give their dark stops and color goes on buttons.

---

From ColorTokensKit, by Penguin Design Ventures: https://colortokenskit.com/platforms/watchos/ (updated September 26, 2026).