A SwiftUI color picker component library for macOS, designed to replace the default ColorPicker component. In addition, I’ve created another component library, Colorful, which offers a different user experience with a distinct style.
✦ My macOS/iOS application ✦
Welcome to download DevTutor, a cheat sheet app designed to help developers quickly build excellent applications using SwiftUI.
import ColorSelector
struct ContentView: View {
@State var color: Color? = .red
@State var colorClear: Color? = .clear
@State var nsColor: NSColor? = NSColor.red
var body: some View {
ColorSelector("Color", selection: $color)
ColorSelector(selection: $colorClear)
ColorSelector(nsColor: $nsColor, arrowEdge: .top)
ColorSelector(selection: $color) {
Text("Color Picker")
}
}
}Using the swatchColors environment value, developers can customize the color list in the color selector, replacing the default color options.
struct ContentView: View {
@State var color: Color? = .red
var body: some View {
ColorSelector(selection: $color)
.environment(\.swatchColors, [
NSColor(hue: 0.999, saturation: 0.857, brightness: 0.878, alpha: 1.0),
NSColor(hue: 0.066, saturation: 1.000, brightness: 0.980, alpha: 1.0),
NSColor(hue: 0.121, saturation: 0.976, brightness: 0.969, alpha: 1.0),
])
///
ColorSelector(selection: $colorClear, arrowEdge: .top)
}
}By setting the cornerSize (corner radius) and pointSize (point size) environment values, the corner radius and point size can be dynamically adjusted.
struct ContentView: View {
@State var color: Color? = .red
@State var cornerRadius: CGFloat = 6
@State var pointSize: CGSize = .init(width: 12, height: 12)
var body: some View {
ColorSelector(selection: $color)
.environment(\.cornerSize, cornerRadius)
.environment(\.pointSize, pointSize)
}
}arrowEdge: The edge of the attachmentAnchor that defines the location of the popover’s arrow. The default is nil, which results in the system allowing any arrow edge.
import ColorSelector
struct ContentView: View {
@State var colorClear: Color? = .clear
var body: some View {
ColorSelector(selection: $colorClear, arrowEdge: .bottom)
}
}Use the showsAlpha modifier to control the visibility of the alpha (opacity) slider in the picker panel.
import ColorSelector
struct ContentView: View {
@State var color: Color? = .clear
var body: some View {
ColorSelector(selection: $color)
.showsAlpha(false)
}
}Customize button size using the controlSize modifier
ColorSelector(selection: $color)
.controlSize(.regular)struct ContentView: View {
@State var alpha: CGFloat = 1.0
var saturation: CGFloat = 1.0
var brightness: CGFloat = 1.0
var hue: CGFloat = 0.0
var body: some View {
AlphaSlider(
alpha: $alpha,
hue: hue,
saturation: saturation,
brightness: brightness
)
}
}struct ContentView: View {
@State var color: Color = Color.red
var cornerRadius: CGFloat = 6
var pointSize: CGSize = .init(width: 8, height: 8)
var body: some View {
ColorSampler(
color: $color,
cornerRadius: cornerRadius,
pointSize: pointSize
)
}
}You can customize the width and height of the rectangle using the rectSize modifier.
#Preview {
@Previewable @State var color: Color? = Color.blue
ColorSampler(color: $color)
.rectSize(23)
}struct ContentView: View {
@State var hue: CGFloat = 1
var body: some View {
HueSlider(hue: $hue)
}
}struct ContentView: View {
@State var saturation: CGFloat = 1.0
@State var brightness: CGFloat = 1.0
var hue: CGFloat = 0.0
var body: some View {
Saturation(
saturation: $saturation,
brightness: $brightness,
hue: hue,
cornerRadius: 16
)
}
}struct ContentView: View {
@State var color: NSColor = NSColor.white
var body: some View {
Swatch()
Swatch(nsColor: color) { value in
color = value
}
}
}struct ContentView: View {
@State var saturation: CGFloat = 1.0
@State var brightness: CGFloat = 1.0
@State var hue: CGFloat = 0.0
@State var alpha: CGFloat = 1.0
var body: some View {
Sketch(
hue: $hue,
saturation: $saturation,
brightness: $brightness,
alpha: $alpha
)
.frame(width: 180, height: 230)
}
}Licensed under the MIT License.