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

Answer 1

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

Answer 2

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>