Триггерная клавиатура iOS с HTML-входом

Я пишу веб-приложение (для iPad), в котором есть ночной режим, который инвертирует цвета на белый текст на черном фоне для использования при слабом освещении. Однако входы запускают стандартную клавиатуру iOS, которая ярко освещена. Я уже знаю, как запускать цифровую клавиатуру, но есть ли способ предложить мобильному Safari представить темную клавиатуру вместо светлой?

Ответ 1

К сожалению, внешний вид клавиатуры полностью зависит от пользователя, изменить внешний вид клавиатуры в ios невозможно, можно подождать, пока в будущем обновлении появится это дополнение, но система Apple раньше была очень закрыт, я думаю, что это вряд ли

Изменение: вы можете попробовать сделать свою собственную виртуальную клавиатуру, как эта: https://gate2home.com/English-Keyboard

Обновление: для нового iphone и тех, которые обновляются до IOS 13, будет доступен собственный темный режим, но этот режим можно использовать только по желанию пользователя, у вас нет возможности активировать его через веб-сайт или приложение.

Ответ 2

Короткий ответ: нет, вы не можете.

Как далеко мы продвинулись за 4 года. К сожалению, вопрос "Могу ли я указать тему пользовательского интерфейса iOS из веб-приложения" по-прежнему громкий НЕТ. (И действительно ли вы хотите, чтобы iOS позволяла кому-либо еще решать, как выглядит ваше устройство?)

По состоянию на осень 2019 года, единственным элементом iOS, который можно использовать в веб-приложении, является status bar. Это отлично подходит для прогрессивных веб-приложений, но не для управления другими элементами пользовательского интерфейса.

Лучшее решение

Оригинальный вопрос OP был на самом деле больше о поддержке темной темы, которую мы можем предположить, что пользователь решил активировать (разрешение таймера ночного режима в основном выбирается пользователем).

С 2019 года мы МОЖЕМ поддерживать выбор тем пользователем. Android 9 и iOS 13 поддерживают глобальные темные и светлые темы. Это означает, что элемент клавиатуры (среди прочих) будет соблюдать выбранный режим. Теперь все, что нам нужно сделать, это позволить нашим веб-приложениям/сайтам также соблюдать эти настройки.

В основном это означает, что когда пользователь, который указал "темную тему" на своем устройстве, загружает ваш HTML, вы можете поддержать этот выбор в своем собственном коде. Сделать это довольно просто благодаря тесту CSS Media Query, который называется prefers-color-scheme. Возможные варианты: no-preference, light и dark. Нет предпочтений по умолчанию или это означает, что нет поддержки устройств.

Использование довольно просто. Поскольку большинство из нас, вероятно, сначала создают "светлую" тему, вы можете просто заменить свои светлые цвета на более темные.

/* it never a good idea to do full black on full white
 or full white on full black since it 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;
  }
}

Ответ 3

Сегодня Apple анонсирует темный режим с ios 13. И согласно официальной документации. Темный режим также доступен сторонним разработчикам приложений для интеграции в их собственные приложения и может быть запланирован на автоматическое включение на закате или в определенное время.

Ответ 4

Я знаю, что это немного устарело, но, возможно, эти ответы помогут вам найти решение.

Этот довольно старый, но второй из прошлого года, так что он может действительно помочь.

Ответ 5

Если вы используете ввод для получения учетных данных пользователя, вы можете использовать поле ввода типа "пароль", которое в этом случае будет вызывать темную клавиатуру.

    <input type="password" />