Wesley de Groot's Blog
Simplifying multiplatform Colors

Back

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

Read more

Share


Share Mastodon Twitter LinkedIn Facebook
x-twitter mastodon github linkedin discord threads instagram whatsapp bluesky square-rss sitemap