How to change DatePicker's texts color in SwiftUI?

Question

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.

score 14 · Answer 1 · answered Jul 26 '20 at 18:06

14

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

answered Jul 26 '20 at 18:06

Pranav Wadhwa

7,666
6
39
61

1

This is the best answer currently, but hope that Apple will give us the way to change text color in the future – Adelmaer Oct 06 '21 at 18:24

score 13 · Answer 2 · answered Nov 04 '20 at 16:41

13

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)

answered Nov 04 '20 at 16:41

Hoang Anh Tuan

370
3
9

This should be the accepted answer - duplicate post with accepted answer -https://stackoverflow.com/a/64823381/5632572 – Michael Ellis Mar 08 '22 at 16:20
4

For the `.compact` date picker style this accent color is shown when active, but the text is black before the control is tapped. – pkamb Apr 21 '22 at 19:59
2

This shouldn't be the accepted answer. This ONLY colors the accented buttons, like the <> arrows and the selected date, everything else is unaffected. – William T. Aug 14 '22 at 16:07

score 9 · Answer 3 · edited Apr 21 '22 at 19:55

9

try this:

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

edited Apr 21 '22 at 19:55

pkamb

33,281
23
160
191

answered Mar 06 '20 at 09:20

Chris

7,579
3
18
38

Please, be worry that it could change the functionality of some controls. try to apply the same technic on Toggle and it stops working ... – user3441734 Mar 06 '20 at 11:22
1

@UserWithWeiredNumber. nobody said it will work on all controls. nobody said - and each developer knows - Apple can change things and then we have to change some things too. But some people only see "worries". He asked for changing the color of the datepicker - he searches for a solution NOW - not in 100 years. that is what my solution provides. nothing more nothing less. – Chris Mar 06 '20 at 11:40
I already choose your answer as valuable :-), it is still a good idea to inform the people. Especially because the Toggle could be deeper in your UI. You can try it yourself ... To be warned is better – user3441734 Mar 06 '20 at 11:57
i cannot see who flagged my answers... ;) – Chris Mar 06 '20 at 12:00

score 5 · Answer 4 · edited Apr 21 '22 at 19:55

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()
            }
        }
    }
}

score 3 · Answer 5 · edited Sep 09 '21 at 12:47

3

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)

edited Sep 09 '21 at 12:47

LinusGeffarth

27,197
29
120
174

answered Aug 31 '20 at 09:00

dskf7

31
1

bear in mind that `userInterfaceStyle` doesn't change if the view is modified with `preferredColorScheme`, so using the value from the environment may be required – CMash Sep 27 '22 at 11:35

score 2 · Answer 6 · answered May 31 '22 at 15:09

2

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)

answered May 31 '22 at 15:09

tennis779

338
2
6
19

score 0 · Answer 7 · answered May 29 '20 at 07:13

0

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

answered May 29 '20 at 07:13

HatsuneMiku

1

4

From Review: Hi, please don't answer just with source code. Try to provide a nice description about how your solution works. See: [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). Thanks – sɐunıɔןɐqɐp May 29 '20 at 08:44

How to change DatePicker's texts color in SwiftUI?

7 Answers7

Linked