[英]How to override iOS dark mode style for datepicker
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.这是 iOS 暗模式的屏幕截图。 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这是背景为黑色时的样子
Use UIUserInterfaceStyle property overrideUserInterfaceStyle of UIViewController to change controller's interface style.使用 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
}
}
}
The problem was that I couldn't override the color of the Datepicker.问题是我无法覆盖 Datepicker 的颜色。 I was also not able to override the background color of the modal.我也无法覆盖模态的背景颜色。 I needed to add the <page>
tag to my modal.我需要将<page>
标签添加到我的模态中。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.