如何覆盖日期选择器的 iOS 暗模式样式答案

【问题标题】：How to override iOS dark mode style for datepicker如何覆盖日期选择器的 iOS 暗模式样式
【发布时间】：2020-06-15 00:46:37
【问题描述】：

就像你可以看到日期选择器中的选定值是白色的。如果我更改日期，它将不可见。这是 iOS 暗模式的屏幕截图。有没有办法覆盖默认样式。我尝试了以下方法：

.date-picker {
   color: #000000;

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

这是黑色背景时的样子

【问题讨论】：

一般来说，你应该在暗模式下保持背景暗。如果您不想支持暗模式，可以立即退出暗模式。
@Manoj 就像你可以看到 TimePicker 在深色模式下保持不变一样，我没有对 TimePicker 进行任何更改，但让我在深色背景模式下更新图片。
@manoj 说您的应用应该正确支持暗模式，或者您应该覆盖应用的特征以便禁用暗模式。
我知道他的意思，但您看到的视图是模态的。您可以更改模式的背景颜色。那么为什么我可以改变日期选择器的颜色

标签： ios datepicker nativescript nativescript-vue

【解决方案1】：

使用 UIViewController 的 UIUserInterfaceStyle 属性 overrideUserInterfaceStyle 来改变控制器的界面风格。

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

【讨论】：

我需要在什么文件中添加这个？

【解决方案2】：

问题是我无法覆盖 Datepicker 的颜色。我也无法覆盖模式的背景颜色。我需要将<page> 标签添加到我的模态中。在那里我可以添加一个类，这样我就可以在暗模式下更改背景颜色。所以它看起来像这样：

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

【讨论】：