Restrict SwiftUI ColorPicker to only colors that work in light/dark mode

Question

Is there a way to restrict the ColorPicker to only show colors that work in light/dark mode?

Right now I only know of the default ColorPicker configs that allows a user to pick any color:

Answer 1

Unfortunately, ColorPicker is not customizable to that extent yet. As a workaround, here is a simple color picker that you can easily customize by defining all desired colors in the colors array.

import SwiftUI

struct ContentView: View {
    var colors: [[UIColor]] = [
        [.red, .green, .blue],
        [.purple, .systemPink, .systemTeal],
        [.darkGray, .orange, .yellow]
    ]

    @State var selectedColor = UIColor.red

    var body: some View {
        VStack {
            colorPalette

            HStack(alignment: .center) {
                Text("Selected color:")

                Color(selectedColor)
                    .frame(width: 60, height: 60)
            }
        }
    }

    var colorPalette: some View {
        VStack(spacing: 0) {
            ForEach(colors, id: \.self) { colorRowColors in
                getColorRow(colors: colorRowColors)
            }
        }
    }

    func getColorRow(colors: [UIColor]) -> some View {
        HStack(spacing: 0) {
            ForEach(colors, id: \.self) { color in
                Button {
                    selectedColor = color
                } label: {
                    Color(color)
                        .border(Color.gray, width: color == selectedColor ? 2 : 0)
                }
            }
        }
    }
}