Logo

dev-resources.site

for different kinds of informations.

Simplifying multiplatform Colors

Published at
10/23/2024
Categories
swiftpm
colors
Author
0xwdg
Categories
2 categories in total
swiftpm
open
colors
open
Author
5 person written this
0xwdg
open
Simplifying multiplatform Colors

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")
]
Enter fullscreen mode Exit fullscreen mode

Then, add Colors as a dependency for your target:

targets: [
    .target(
        name: "YourTarget",
        dependencies: [
            .product(name: "Colors", package: "Colors")
        ]
    )
]
Enter fullscreen mode Exit fullscreen mode

Finally, import the Colors module in your Swift files:

import Colors
Enter fullscreen mode Exit fullscreen mode

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)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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
colors Article's
30 articles in total
Favicon
Help Improve Shademaker!
Favicon
A Complete Guide to Color Shades: From Primary to Pastel
Favicon
Simplifying multiplatform Colors
Favicon
Three primary colors of LED display
Favicon
Free tool: Tailwind CSS Colors ✨
Favicon
Tailwind CSS Customization with UI Colors
Favicon
Optimizing Web Design through Advanced Techniques in CSS: Colours and Backgrounds
Favicon
What’s Your Go-To Method for Defining Colors in CSS?πŸ€”
Favicon
Compare Colors Palettes
Favicon
How to use light mode and dark mode colors web development
Favicon
Why You Should Use Descriptive Names for Colors in Your Palette or Theme
Favicon
Unhex - convert colors to RGB, HEX or HSL in bulk
Favicon
Color palete site recommendations
Favicon
How to use colors in designs
Favicon
What is Css?
Favicon
Random Hex Color (semi-golfed)
Favicon
The numeric colour palettes in modern web frameworks explained
Favicon
Day 3 of Coding Challenge! First CSS! Finally Some Color!
Favicon
Custom colors in React-Native
Favicon
Best resources for #developers
Favicon
Building a Color Scheme Toggle
Favicon
Choosing colors for websites
Favicon
Choosing Theme Colors
Favicon
A Short History of Interface Colors
Favicon
Most Powerful Palette Generator
Favicon
Welcome to ImageHive v2
Favicon
Random Hex Color Code Generator
Favicon
How do color pickers work? - HSL Panel
Favicon
Build a VSCode Theme
Favicon
GUIDE - Customizing your Windows Terminal with themes and different Shells

Featured ones: