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

Posted 2023-04-14

【中文标题】如何覆盖日期选择器的 iOS 暗模式样式

【英文标题】：How to override iOS dark mode style for datepicker

【发布时间】：2020-06-15 00:46:37

【问题描述】：

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

.date-picker 
   color: #000000;

   .ns-dark & 
     color: #000000;
   

这是黑色背景时的样子

【问题讨论】：

一般来说，你应该在暗模式下保持背景暗。如果您不想支持暗模式，可以立即退出暗模式。

@Manoj 就像你可以看到 TimePicker 在深色模式下保持不变一样，我没有对 TimePicker 进行任何更改，但让我在深色背景模式下更新图片。

@manoj 说您的应用应该正确支持暗模式，或者您应该覆盖应用的特征以便禁用暗模式。

我知道他的意思，但您看到的视图是模态的。您可以更改模式的背景颜色。那么为什么我可以改变日期选择器的颜色

【参考方案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>