Sometimes you are building for multiple platforms and you want to use the same color across all of them.
This is where the Colors package comes in handy.
It provides a set of predefined system colors that you can use in your SwiftUI projects.
Installation
To use the Colors package in your project, add the following dependency to your Package.swift file:
dependencies: [
.package(url: "https://github.com/0xWDG/Colors", branch: "main")
]
Then, add Colors as a dependency for your target:
targets: [
.target(
name: "YourTarget",
dependencies: [
.product(name: "Colors", package: "Colors")
]
)
]
Finally, import the Colors module in your Swift files:
import Colors
Use the predefined colors in your SwiftUI views:
import SwiftUI
import Colors
struct ContentView: View {
var body: some View {
VStack {
Text("Hello, World!")
.foregroundColor(Color.label)
Text("Hello, World!")
.foregroundColor(Color.systemTeal)
Text("Hello, World!")
.foregroundColor(Color.systemGray3)
Text("Hello, World!")
.foregroundColor(Color.quaternaryLabel)
}
}
}
Which colors are available?
| Color | Light Mode | Dark Mode | (Original) Platforms |
|---|---|---|---|
| .lightText | #ffffffff | #ffffffff | iOS |
| .darkText | #000000ff | #000000ff | iOS |
| .placeholderText | #3d3d42ff | #eaeaf4ff | iOS |
| .label | #000000ff | #ffffffff | iOS, tvOS |
| .secondaryLabel | #3d3d42ff | #eaeaf4ff | iOS, tvOS |
| .tertiaryLabel | #3d3d42ff | #eaeaf4ff | iOS, tvOS |
| .quaternaryLabel | #3d3d42ff | #eaeaf4ff | iOS, tvOS |
| .systemBackground | #ffffffff | #000000ff | iOS |
| .secondarySystemBackground | #f2f2f7ff | #1c1c1eff | iOS |
| .tertiarySystemBackground | #ffffffff | #2b2b2dff | iOS |
| .systemFill | #77777fff | #77777fff | iOS |
| .secondarySystemFill | #77777fff | #77777fff | iOS |
| .tertiarySystemFill | #75757fff | #75757fff | iOS |
| .quaternarySystemFill | #72727fff | #75757fff | iOS |
| .systemGroupedBackground | #f2f2f7ff | #000000ff | iOS |
| .secondarySystemGroupedBackground | #1c1c1eff | #ffffffff | iOS |
| .tertiarySystemGroupedBackground | #f2f2f7ff | #2b2b2dff | iOS |
| .systemGray | #8e8e93ff | #8e8e93ff | iOS, tvOS, visionOS |
| .systemGray2 | #adadb2ff | #636366ff | iOS, visionOS |
| .systemGray3 | #c6c6ccff | #474749ff | iOS, visionOS |
| .systemGray4 | #d1d1d6ff | #3a3a3dff | iOS, visionOS |
| .systemGray5 | #e5e5eaff | #2b2b2dff | iOS, visionOS |
| .systemGray6 | #f2f2f7ff | #1c1c1eff | iOS, visionOS |
| .separator | #3d3d42ff | #545459ff | iOS, tvOS, visionOS |
| .opaqueSeparator | #c6c6c6ff | #38383aff | iOS, tvOS |
| .link | #007affff | #0a84ffff | iOS, tvOS, visionOS |
| .systemBlue | #007affff | #0a84ffff | iOS, tvOS |
| .systemCyan | #32ade6ff | #64d2ffff | iOS, tvOS |
| .systemMint | #00c7beff | #63e6e2ff | iOS, tvOS |
| .systemPurple | #af51ddff | #bf59f2ff | iOS, tvOS |
| .systemGreen | #33c659ff | #30d159ff | iOS, tvOS |
| .systemYellow | #ffcc00ff | #ffd60aff | iOS, tvOS |
| .systemOrange | #ff9300ff | #ff9e0aff | iOS, tvOS |
| .systemPink | #ff2d54ff | #ff385eff | iOS, tvOS |
| .systemRed | #ff3a30ff | #ff443aff | iOS, tvOS |
| .systemTeal | #59c6f9ff | #63d1ffff | iOS, tvOS, macOS |
| .systemIndigo | #5956d6ff | #5e5be5ff | iOS, tvOS, macOS |
| .scrubberTexturedBackground | #ffffffff | #ffffffff | macOS |
| .textBackgroundColor | #ffffffff | #1e1e1eff | macOS |
| .controlTextColor | #000000ff | #ffffffff | macOS |
| .quaternaryLabelColor | #000000ff | #ffffffff | macOS |
| .findHighlightColor | #ffff00ff | #ffff00ff | macOS |
| .highlightColor | #ffffffff | #b5b5b5ff | macOS |
| .shadowColor | #000000ff | #000000ff | macOS |
| .windowFrameTextColor | #000000ff | #ffffffff | macOS |
| .windowBackgroundColor | #edededff | #333333ff | macOS |
| .keyboardFocusIndicatorColor | #0066f4ff | #19a8ffff | macOS |
| .separatorColor | #000000ff | #ffffffff | macOS |
| .selectedControlColor | #b2d6ffff | #3f638cff | macOS |
| .controlBackgroundColor | #ffffffff | #1e1e1eff | macOS |
| .secondaryLabelColor | #000000ff | #ffffffff | macOS |
| .tertiaryLabelColor | #000000ff | #ffffffff | macOS |
| .gridColor | #e5e5e5ff | #191919ff | macOS |
| .alternateSelectedControlTextColor | #ffffffff | #ffffffff | macOS |
| .unemphasizedSelectedContentBackgroundColor | #dbdbdbff | #444444ff | macOS |
| .textColor | #000000ff | #ffffffff | macOS |
| .systemBrown | #a3845eff | #aa8e68ff | iOS |
| .selectedContentBackgroundColor | #0063e0ff | #0059d1ff | macOS |
| .selectedTextColor | #000000ff | #ffffffff | macOS |
| .labelColor | #000000ff | #ffffffff | macOS |
| .placeholderTextColor | #000000ff | #ffffffff | macOS |
| .unemphasizedSelectedTextBackgroundColor | #dbdbdbff | #444444ff | macOS |
| .disabledControlTextColor | #000000ff | #ffffffff | macOS |
| .headerTextColor | #000000ff | #ffffffff | macOS |
| .linkColor | #0068d8ff | #3f9bffff | macOS |
| .selectedTextBackgroundColor | #b2d6ffff | #3f638cff | macOS |
| .unemphasizedSelectedTextColor | #000000ff | #ffffffff | macOS |
| .controlColor | #ffffffff | #ffffffff | macOS |
| .selectedControlTextColor | #000000ff | #ffffffff | macOS |
| .underPageBackgroundColor | #969696ff | #282828ff | macOS |
| .selectedMenuItemTextColor | #ffffffff | #ffffffff | macOS |