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