CODEWITHSUNDEEP
datepickerswiftui
BabakHSL
BabakHSL

Reputation: 772

How to change DatePicker's texts color in SwiftUI?

I saw this question but it doesn't work in SwiftUI.

Changing text color of datepicker

I tried .forgroundColor and .accentColor but they don't change the texts' color.

Upvotes: 21

Views: 21489

Answers (9)

Peter Lapisu
Peter Lapisu

Reputation: 20965

the best and most robust solution is to use an overlay on the button and than there are no limitations

enter image description here

DatePicker("", selection: $toDate, displayedComponents: .date)
    .datePickerStyle(.compact)
    .labelsHidden()
    .accentColor(.jPrimary)
    .overlay {
        ZStack {
            Color.jBackground
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .cornerRadius(4)
            Text(formattedDate(toDate))
                .foregroundColor(.jPrimary)
        }
        .allowsHitTesting(false)
    }

Upvotes: 1

Fran
Fran

Reputation: 554

.accentColor() will be deprecated in the near future.

.colorInvert() will stop working as soon as tapped.

For now im using:

.preferredColorScheme(.dark)
.tint(baby.color.bgColor)
.colorMultiply(baby.color.bgColor)

But using .preferredColorScheme(.dark) in some cases affects all the view tones depending on the colors you are using.

Upvotes: 1

tennis779
tennis779

Reputation: 348

I found applying this modifier to the DatePicker to be cleaner:

Forces the color to white

 .environment(\.colorScheme, .dark)

Forces the color to dark

 .environment(\.colorScheme, .light)

Upvotes: 2

Carlos A Rodriguez
Carlos A Rodriguez

Reputation: 79

you can do this to make the text appear white in light or dark mode if you use a background color

struct PickerDate: View {
    @Environment(\.colorScheme) var colorScheme
    @State var date: Date
    var body: some View {
        VStack {
            DatePicker("Record Date", selection: $date, in: ...Date(), displayedComponents: .date)
                .labelsHidden()
                .colorMultiply(colorScheme == .dark ? .black : .white)
                .colorInvert()
            }
        }
    }
}

Upvotes: 5

Chris
Chris

Reputation: 8091

try this:

var body: some View {
    Group {
        
        DatePicker(selection: $selected) {
            Text("Date")
        }
    
    .colorInvert()
        .colorMultiply(Color.blue)
    }
}

enter image description here

Upvotes: 16

dskf7
dskf7

Reputation: 41

I use extension for customized text color for both of light mode and dark mode.

extension View {
    @ViewBuilder func changeTextColor(_ color: Color) -> some View {
        if UITraitCollection.current.userInterfaceStyle == .light {
            self.colorInvert().colorMultiply(color)
        } else {
            self.colorMultiply(color)
        }
    }
}

and sample is as below.

DatePicker("Date", selection: $selection)
    .labelsHidden()
    .changeTextColor(.green)

Upvotes: 4

Hoang Anh Tuan
Hoang Anh Tuan

Reputation: 420

I just simple set the accentColor and it works.

@State private var date = Date()
DatePicker("Select a date",
           selection: $date, in: ...Date(), 
           displayedComponents: .date)
        .labelsHidden()
        .accentColor(.orange)

Upvotes: 15

Pranav Wadhwa
Pranav Wadhwa

Reputation: 7736

Using .colorInvert() and .colorMultiply(.white) will change the text color to white but won't work when the device is in Dark Mode. Instead, try this:

DatePicker("Date", selection: $selection)
    .colorScheme(.dark) // or .light to get black text

Upvotes: 22

HatsuneMiku
HatsuneMiku

Reputation: 1

DatePicker("DatePicker", selection: self.$date, displayedComponents: .hourAndMinute)
              .labelsHidden()
              .colorMultiply(Color.white)
              .colorInvert()

Upvotes: 0

Related Questions