Skip to content
ColorTokensKitby Penguin Design Ventures
/
Contents
How-to

Using ColorTokensKit on watchOS

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

Updated View as Markdown

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.

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

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
Lisbon
soften() on black

The appearance never changes on Apple Watch, so soften(by:) 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
Lisbon
Card title
Lisbon
Card dates

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, 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, where Color(light:dark:) returns the dark color on watchOS, and Color+Adaptive.swift, where the color functions work out their result once for dark mode.
  • Apple Human Interface Guidelines, Dark Mode: "Dark Mode isn't supported in visionOS or watchOS."
  • Apple Human Interface Guidelines, Color, whose watchOS section covers background color.

See also