Trigger iOS dark keyboard from HTML input

Question

I am writing a web app (for the iPad) which has a night mode, which inverts the colours to white text on a black background for use in low light. However, the inputs trigger the standard iOS keyboard, which is glaringly bright. I already know how to trigger the numeric keyboard, but is there a way to suggest to mobile Safari to present the dark keyboard instead of the light one?

Answer 1

Unfortunately the appearance of the keyboard depends entirely on the user, there is no way to change the appearance of the keyboard in ios, what you can do is wait for a future update to have this addition, but for the apple system used to be very closed I think it is unlikely

Edit: you can try to make your own virtual keyboard like this one: https://gate2home.com/English-Keyboard

Update: For the new iphone, and those upgrading to IOS 13, native dark mode will be available, but this mode can only be used if the user wishes, you have no way to activate it through your website or app.

Answer 2

Short Answer: No you can't.

My how far we've come in 4 years. Sadly the question "Can I specify the iOS UI theme from inside a webapp" is still a resounding NO. (And really would you want iOS to allow anyone else to decide how your device looks?)

As of fall 2019, about the only iOS element you can theme from a web app is the status bar. This is great for Progressive Web Apps but not if you want to control other UI elements.

A better solution

The OP's original question was really more about supporting a dark theme which we can assume the user chose to activate (allowing Night Mode timer is basically a user choice).

As of 2019, we CAN support the user's choice of themes. Both Android 9 and iOS 13 support global dark and light themes. This means that the keyboard element (among others) will respect the chosen mode. Now, all we need to do is let our web apps/sites respect those settings as well.

This basically means that when a user who has specified a "dark theme" on their device loads your HTML, you can support that choice in your own code. Doing this is pretty simple thanks to a CSS Media Query test called prefers-color-scheme. Options are no-preference, light and dark. No preference is basically the default or it means there's no device support.

Usage is quite simple. Since most of us probably build a "light" theme first you can simply override your light colors with darker ones.

/* 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;   } }

Now the correct keyboard will load by default (based on user preference) now it's the job of apps/sites to support that user's choice.

Support

This technique will support user-defined theme preferences in Safari on iOS 13, Chrome on Android, and Safari, Chrome & Firefox on Mac OS 10.14 (Mojave).