从 HTML 输入触发 iOS 暗键盘答案

【问题标题】：Trigger iOS dark keyboard from HTML input从 HTML 输入触发 iOS 暗键盘
【发布时间】：2015-11-20 12:13:54
【问题描述】：

我正在编写一个具有夜间模式的网络应用程序（适用于 iPad），该应用程序将颜色反转为黑色背景上的白色文本，以便在光线不足的情况下使用。但是，输入会触发标准的 iOS 键盘，该键盘非常明亮。我已经知道如何触发数字键盘，但是有没有办法建议移动 Safari 显示深色键盘而不是浅色键盘？

【问题讨论】：

我认为这不可能。
不可能。（你只能希望 iOS 能像 Mohave 一样在未来更新支持暗模式。）
如果iOS不支持暗黑，那你就得自己做一个了！

标签： html ios css keyboard

【解决方案1】：

不幸的是键盘的外观完全取决于用户，在ios中没有办法改变键盘的外观，只能等待以后的更新有这个添加，但是对于使用的苹果系统非常封闭我认为不太可能

编辑：您可以尝试制作自己的虚拟键盘，如下所示：https://gate2home.com/English-Keyboard

更新：对于新的 iphone，以及升级到 IOS 13 的那些，将可以使用原生暗模式，但该模式只能在用户愿意的情况下使用，您无法通过您的网站或应用程序激活它。

【讨论】：

只是出于好奇，您可以将赏金奖励给自己吗？我以为系统不允许。
不，我不能，但有时我这样做是为了看看是否有人可以更全面地回答

【解决方案2】：

简短回答：不，你不能。

我知道我们在 4 年里走了多远。可悲的是，“我可以从 webapp 中指定 iOS UI 主题”这个问题仍然是一个响亮的 NO。 （你真的希望 iOS 允许其他人来决定你的设备的外观吗？）

截至 2019 年秋季，您可以在 Web 应用程序中设置主题的唯一 iOS 元素是 status bar。这对于渐进式 Web 应用非常有用，但如果您想控制其他 UI 元素，则不适用。

更好的解决方案

OP 最初的问题实际上更多是关于支持我们可以假设用户选择激活的黑暗主题（允许夜间模式计时器基本上是用户选择）。

从 2019 年起，我们可以支持用户选择主题。 Android 9 和 iOS 13 都支持全局深色和浅色主题。这意味着键盘元素（以及其他元素）将尊重所选模式。现在，我们需要做的就是让我们的网络应用/网站也尊重这些设置。

这基本上意味着，当在其设备上指定“深色主题”的用户加载您的 HTML 时，您可以在自己的代码中支持该选择。多亏了一个名为 prefers-color-scheme 的 CSS 媒体查询测试，这样做非常简单。选项为no-preference、light 和dark。没有偏好基本上是默认设置，或者这意味着没有设备支持。

使用非常简单。由于我们大多数人可能首先构建一个“浅色”主题，您可以简单地用较暗的颜色覆盖浅色。

/* it's never a good idea to do full black on full white
 or full white on full black since it's hard on our eyes */

body {
  background: #ffffff;
  color: #333333;
  font-family: Sans-Serif;
  font-size: 62.5%;
  /* etc, etc, etc */
}


/* media query to override the default */
@media (prefers-color-scheme: dark){
  body {
    background: #171717;
    color: #f7f7f7;
  }
}

现在，默认情况下会加载正确的键盘（基于用户偏好），现在由应用程序/网站来支持该用户的选择。

支持

此技术将支持 iOS 13 上的 Safari、Android 上的 Chrome 以及 Mac OS 10.14 (Mojave) 上的 Safari、Chrome 和 Firefox 中用户定义的主题首选项。

【讨论】：

【解决方案3】：

Apple 今天宣布 dark mode 带有 ios 13。并根据官方文档。第三方应用程序开发人员也可以使用暗模式集成到他们自己的应用程序中，并且可以安排在日落或特定时间自动开启。

【讨论】：

【解决方案4】：

我知道这有点过时了，但也许这些答案会帮助您找到解决方案。

This one 已经很老了，但the second one 是去年的，所以它实际上可能会有所帮助。

【讨论】：

【解决方案5】：

如果您使用输入来获取用户的凭据，您可能希望使用“密码”类型的输入字段，在这种情况下触发的键盘将是深色的。

    <input type="password" />

【讨论】：