Question

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

Answer 1

不幸的是，键盘的外观完全取决于用户，无法在ios中更改键盘的外观，您可以做的是等待将来的更新来添加此功能，但对于使用的Apple系统要非常封闭，我认为这不太可能

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

Answer 2

简短的回答：不，你不能。

我四年来的发展。令人遗憾的是，“我可以从Web应用程序内部指定iOS UI主题”问题仍然是个响当当的问题。 （您真的想让iOS让其他人来决定您设备的外观吗？）

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

更好的解决方案

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

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

这基本上意味着，当在设备上指定“深色主题”的用户加载HTML时，您可以在自己的代码中支持该选择。借助名为prefers-color-scheme的 CSS Media Query测试，这样做非常简单。选项为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中支持用户定义的主题首选项。

Answer 3

Apple今天在iOS 13上发布dark mode。并且根据官方文档。深色模式也可供第三方应用程序开发人员集成到自己的应用程序中，并且可以计划在日落或特定时间自动打开。

Answer 4

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

This one很老，但是the second one来自去年，所以它可能确实有帮助。

Answer 5

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

    <input type="password" />

从HTML输入触发iOS黑暗键盘

5 个答案:

简短的回答：不，你不能。

更好的解决方案

支持