# Ready-made themes

37 themes to use as they are, from proPink to proRose, each with 20 stops and every token.

Pick a theme by name, such as `Color.proBlue`, and your view gets 20 stops and every token, in light and dark mode. There are 37 names: 36 hues, one every 10°, and `proGray`. Each is a `ProTheme`.

```swift
let theme = Color.proBlue

Text("Lisbon")
    .font(.headline)
    .foregroundStyle(theme.foregroundPrimary)   // _1000 in light mode, _50 in dark
    .padding()
    .background(theme.backgroundSecondary)      // _100 in light mode, _800 in dark
```

What this draws, with `Color.proBlue`:

| Color                 | light mode                             | dark mode                              |
| --------------------- | -------------------------------------- | -------------------------------------- |
| `backgroundSecondary` | color(display-p3 0.8661 0.9243 0.9984) | #174874                                |
| `foregroundPrimary`   | #051d33                                | color(display-p3 0.9359 0.9638 0.9992) |

Here are all 37, each from light to dark:

Every family from light to dark, in Display P3 hex:

| Family          | OKLCH hue | `_50`   | `_200`  | `_350`  | `_500`  | `_650`  | `_800`  | `_950`  |
| --------------- | --------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |
| `proGray`       | none      | #ffffff | #dddddd | #b1b1b1 | #818182 | #535353 | #2c2c2c | #0d0d0d |
| `proPink`       | 0°        | #fef2f5 | #fbc4d5 | #f88eb2 | #cb6c8d | #985069 | #683446 | #3b1b26 |
| `proRuby`       | 10°       | #fef2f3 | #fdc4cb | #fc8ea0 | #ce6c7e | #9a505d | #69343e | #3c1b21 |
| `proRed`        | 20°       | #fef2f1 | #fec5c3 | #fd8f8e | #cf6d6e | #9b5151 | #6a3535 | #3c1c1c |
| `proTomato`     | 30°       | #fef2ef | #fdc6ba | #fd917c | #cf6f5e | #9b5245 | #6a362c | #3c1c16 |
| `proCoral`      | 40°       | #fef3ee | #fcc8b2 | #fb946b | #cd724d | #9a5438 | #693724 | #3b1d11 |
| `proOrange`     | 50°       | #fdf3ec | #f9c9ab | #f6985a | #c9753d | #97572c | #67391b | #3a1e0c |
| `proBrown`      | 60°       | #fcf3eb | #f6cca6 | #f09d4a | #c47a2d | #935a20 | #643c12 | #382007 |
| `proAmber`      | 70°       | #fbf4ea | #f1cea1 | #e8a23c | #bc7e1d | #8d5e14 | #603e09 | #362103 |
| `proGold`       | 80°       | #faf4ea | #ebd09e | #dea732 | #b4830e | #866108 | #5b4103 | #332301 |
| `proMustard`    | 90°       | #f9f5ea | #e5d39d | #d2ac2e | #a9880b | #7e6506 | #554303 | #2f2401 |
| `proYellow`     | 100°      | #f7f5ea | #ded59e | #c5b232 | #9e8d0d | #766908 | #4f4603 | #2c2601 |
| `proOlive`      | 110°      | #f5f6ea | #d6d8a1 | #b6b73b | #91911c | #6c6c13 | #484809 | #272703 |
| `proChartreuse` | 120°      | #f4f6eb | #cedaa5 | #a6bb49 | #83952c | #616f1f | #414a12 | #232907 |
| `proLime`       | 130°      | #f2f7ec | #c6dcaa | #95bf58 | #74983c | #56712b | #394c1a | #1e2a0b |
| `proGrass`      | 140°      | #f0f7ee | #bedeb1 | #84c269 | #649b4c | #497437 | #304e23 | #182b10 |
| `proGreen`      | 150°      | #eff7ef | #b6dfb9 | #71c47a | #539d5b | #3c7543 | #264f2b | #132b16 |
| `proJade`       | 160°      | #eef8f1 | #b0e0c1 | #5ec68b | #409f6b | #2e764f | #1c5034 | #0d2c1b |
| `proEmerald`    | 170°      | #edf8f3 | #aae0ca | #4ac79d | #2b9f7b | #1e775b | #11503c | #062c20 |
| `proMint`       | 180°      | #ecf8f5 | #a5e0d3 | #37c7af | #0e9f8a | #087767 | #035045 | #022c25 |
| `proTeal`       | 190°      | #ebf8f7 | #a3e0dc | #26c6c0 | #0e9e99 | #087672 | #034f4d | #012c2a |
| `proTurquoise`  | 200°      | #ebf8f9 | #a1dfe4 | #1ec4d1 | #0e9ca6 | #08747c | #034e54 | #012b2f |
| `proCyan`       | 210°      | #ebf7fa | #a2deec | #24c2e0 | #0e9ab3 | #087386 | #034d5b | #012b33 |
| `proCerulean`   | 220°      | #ecf7fc | #a5ddf4 | #35bfee | #0e98c2 | #087291 | #034c63 | #012a38 |
| `proSky`        | 230°      | #ecf7fd | #a9dbfa | #48bcfa | #2895cd | #1c6f9a | #0f4b69 | #06293b |
| `proAzure`      | 240°      | #edf6fe | #afd9fe | #64b7fd | #3d92d6 | #2c6ca0 | #1b496d | #0c283e |
| `proBlue`       | 250°      | #eff6ff | #b8d7fe | #7ab4fd | #508edc | #3a69a5 | #254771 | #122640 |
| `proCobalt`     | 260°      | #f0f5ff | #bfd5fe | #8ab0fd | #618ae0 | #4766a9 | #2e4473 | #172542 |
| `proIndigo`     | 270°      | #f2f5ff | #c6d3fe | #98acfd | #7086e2 | #5363aa | #374274 | #1d2442 |
| `proIris`       | 280°      | #f3f4ff | #ccd1fe | #a4a9fd | #7f82e1 | #5e60a9 | #3f4074 | #212242 |
| `proViolet`     | 290°      | #f5f4ff | #d3cefe | #b0a4fd | #8d7edd | #695da6 | #463e72 | #262141 |
| `proGrape`      | 300°      | #f6f3ff | #daccfe | #be9ffd | #997ad7 | #725aa2 | #4d3c6e | #2a203f |
| `proPurple`     | 310°      | #f8f3fe | #e2c9fb | #cc99fd | #a577cf | #7b589b | #533a6a | #2e1f3c |
| `proOrchid`     | 320°      | #f9f2fc | #e9c8f5 | #d895f1 | #af73c5 | #835593 | #593864 | #311e39 |
| `proPlum`       | 330°      | #fbf2fb | #efc6ee | #e392e3 | #b871b9 | #8a538a | #5d375e | #341d35 |
| `proMagenta`    | 340°      | #fcf2f9 | #f4c5e6 | #ec90d4 | #c06fab | #905280 | #623656 | #371c30 |
| `proRose`       | 350°      | #fdf2f7 | #f8c5de | #f38ec4 | #c66d9d | #945075 | #65354f | #391b2b |

## Giving a view a theme

Pass the theme in and draw with its tokens. Then one name changes the whole view, and the contrast stays the same:

```swift
struct TripCard: View {
    let theme: ProTheme

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text("Lisbon")
                .font(.headline)
                .foregroundStyle(theme.foregroundPrimary)
            Text("3 nights from October 12")
                .foregroundStyle(theme.foregroundSecondary)
        }
        .padding()
        .background(theme.backgroundSecondary)
    }
}

TripCard(theme: Color.proGold)
TripCard(theme: Color.proPink)
```

What this draws:

| Color                 | Color.proGold light mode               | Color.proGold dark mode                | Color.proPink light mode               | Color.proPink dark mode                |
| --------------------- | -------------------------------------- | -------------------------------------- | -------------------------------------- | -------------------------------------- |
| `backgroundSecondary` | #f8e8cf                                | color(display-p3 0.3572 0.2539 0.0127) | color(display-p3 0.9918 0.8911 0.9193) | #6f3147                                |
| `foregroundPrimary`   | color(display-p3 0.1518 0.0999 0.0024) | #fbf4e9                                | #31111c                                | color(display-p3 0.9953 0.9483 0.9611) |
| `foregroundSecondary` | color(display-p3 0.3572 0.2539 0.0127) | #f1cf97                                | #6f3147                                | color(display-p3 0.9839 0.7697 0.8336) |

## Letting people choose a theme

`Color.allProHues` holds every theme by its name without the `pro`, so a setting can store a plain string:

```swift
struct ThemeSetting: View {
    @AppStorage("theme") private var name = "Blue"

    var body: some View {
        Picker("Theme", selection: $name) {
            ForEach(Color.allProHues.keys.sorted(), id: \.self) { option in
                Text(option)
            }
        }
    }
}

let saved = UserDefaults.standard.string(forKey: "theme") ?? "Blue"
let theme = Color.allProHues[saved] ?? Color.proBlue
```

A dictionary has no order, so sort the names for a list. The fallback covers a name that's no longer there.

## How it behaves

Each name is [`ProTheme.primary(forHue:)`](https://colortokenskit.com/api/protheme/index.md#from-a-hue) at its hue: `Color.proBlue` is hue 250. Its own color is its [`_450` stop](https://colortokenskit.com/api/stops/index.md), and its tokens come from `ColorTokens.swift`.

Every hue has the same lightness and chroma at each stop, so swapping one name for another keeps your contrast. `proGray` has no hue and a lightness ladder of its own, and the tokens `ColorTokens.swift` puts on `Color`, such as `Color.foregroundPrimary`, are built on it.

Each name is a computed property, but the ramps behind it are built once and cached, so reading `Color.proBlue` in a view's `body` is cheap. `ProTheme` is `Sendable`, so you can pass themes between threads.

Older versions placed some names a few degrees off this grid, so after updating, a theme can look a little different. [Troubleshooting](https://colortokenskit.com/reference/troubleshooting/index.md#colors-look-different-after-updating) lists what to check.

## API

```swift
public extension Color {
    static var proGray: ProTheme { get }
    static var proPink: ProTheme { get }        // hue 0°, then one every 10°, to proRose at 350°
    static var allProHues: [String: ProTheme] { get }
}
```

| Hue  | Theme        | Hue  | Theme           | Hue  | Theme        |
| ---- | ------------ | ---- | --------------- | ---- | ------------ |
| 0°   | `proPink`    | 120° | `proChartreuse` | 240° | `proAzure`   |
| 10°  | `proRuby`    | 130° | `proLime`       | 250° | `proBlue`    |
| 20°  | `proRed`     | 140° | `proGrass`      | 260° | `proCobalt`  |
| 30°  | `proTomato`  | 150° | `proGreen`      | 270° | `proIndigo`  |
| 40°  | `proCoral`   | 160° | `proJade`       | 280° | `proIris`    |
| 50°  | `proOrange`  | 170° | `proEmerald`    | 290° | `proViolet`  |
| 60°  | `proBrown`   | 180° | `proMint`       | 300° | `proGrape`   |
| 70°  | `proAmber`   | 190° | `proTeal`       | 310° | `proPurple`  |
| 80°  | `proGold`    | 200° | `proTurquoise`  | 320° | `proOrchid`  |
| 90°  | `proMustard` | 210° | `proCyan`       | 330° | `proPlum`    |
| 100° | `proYellow`  | 220° | `proCerulean`   | 340° | `proMagenta` |
| 110° | `proOlive`   | 230° | `proSky`        | 350° | `proRose`    |

Each property returns a `ProTheme` whose own color is its `_450` stop. `allProHues` maps each of the 37 names, such as `"Blue"` or `"Gray"`, to the same value.

## Sources

- The library's [Color+ProColors.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Platform/SwiftUI/Color+ProColors.swift), which defines every name, its hue and `allProHues`.

## See also

- [ProTheme](https://colortokenskit.com/api/protheme/index.md): Make a theme from a hex, a hue or OKLCH numbers, and every stop and token keeps its contrast.
- [Stops: .\_50 to .\_1000](https://colortokenskit.com/api/stops/index.md): Twenty fixed colors per theme, lightest to darkest, with the same contrast in every hue.
- [What does the library offer?](https://colortokenskit.com/basics/color-library/index.md): 36 color themes, ready-to-use tokens with dark mode, a theme for your brand, and state functions.
- [Understanding semantic tokens](https://colortokenskit.com/getting-started/semantic-tokens/index.md): Learn the 20 tokens by the job each one does, and get dark mode and passing contrast with them.

---

From ColorTokensKit, by Penguin Design Ventures: https://colortokenskit.com/api/named-themes/ (updated September 26, 2026).