How to override iOS dark mode style for datepicker

Question

Like you can see the selected value in date picker is white. If I change the date, it won't become visible. This a screenshot of iOS dark mode. Is there a way to override the default styling for that. I tried the following:

.date-picker {
   color: #000000;

   .ns-dark & {
     color: #000000;
   }
}

This is how it looks when the background is black

In general you are suppose to keep your background dark in dark mode. If you don't want to support dark mode, you may opt out from dark mode at once. — Manoj, Mar 02 '20 at 17:55
@Manoj Like you can see the TimePicker stays the same in dark mode, I didn't change anything to the TimePicker, but let me update the pictures in dark background mode. — Steven, Mar 02 '20 at 18:01
@manoj is saying that either your app should support dark mode correctly or you should override the traits for your app so that dark mode is disabled. — Paulw11, Mar 02 '20 at 21:54
I know what he is meaning but the view that you’re seeing is a modal. You can change the backgroundcolor of the modal. So why can I change the color of the datepicker — Steven, Mar 02 '20 at 21:56

score 2 · Answer 1 · answered Mar 03 '20 at 12:02

Use UIUserInterfaceStyle property overrideUserInterfaceStyle of UIViewController to change controller's interface style.

class TestViewController: UIViewController {

    @IBOutlet weak var datePicker: UIDatePicker!

    override func viewDidLoad() {
        super.viewDidLoad()

        if #available(iOS 13.0, *) {
            overrideUserInterfaceStyle = .dark
            datePicker.backgroundColor = .black
        } else {
            datePicker.backgroundColor = .white
        }
    }
}

In what file do I need to add this? – Steven Mar 04 '20 at 16:51 — Steven, Mar 04 '20 at 16:51

score 0 · Accepted Answer · answered Mar 08 '20 at 09:03

The problem was that I couldn't override the color of the Datepicker. I was also not able to override the background color of the modal. I needed to add the <page> tag to my modal. There I can add a class so I could change the background color during dark mode. So it looks something like this:

<Page class="background-color-modal">
    <DockLayout class="modal">
          <FlexboxLayout class="timeDateDetails">
               <time-modal :selected-time="selectedTime" 
                           :time="$props.time" @updateTime="updateTime"/>
          </FlexboxLayout>
     </DockLayout>
</Page>

<style lang="scss" scoped>

    .background-color-modal {
        background-color: $white;
        color: $dark;

        .ns-dark & {
            background-color: $dark-dark;
            color: $dark-white
        }
    }

    .modal {
        background-color: $white;
        color: $dark;

        .ns-dark & {
            background-color: $dark-dark;
            color: $dark-white
        }
    }
</style>

How to override iOS dark mode style for datepicker

2 Answers2