Dark Mode Support

Supported in:

Kiosk Pro Lite, Basic, Plus and Enterprise

Match the onscreen keyboard and other native interface elements to the iPad’s Display & Brightness Appearance setting for Light Mode or Dark Mode. This allows you to coordinate these elements with your content or switch them automatically at night for a customized appearance.

If the iPad is running iPadOS 13 or later with Dark Mode enabled (under iOS/iPadOS Settings > Display & Brightness > Appearance), Kiosk Pro will automatically use the dark appearance for the onscreen keyboard in the presentation view.

In addition to the keyboard, native interface elements like JavaScript alerts and context menus (when text selection is enabled) will match the system dark mode setting in the presentation view.

The app can't automatically change your kiosk's web content appearance, but you can use CSS styling rules to apply different styles based on whether the device is in light or dark mode to customize your content.

Kiosk Pro supports the prefers-color-scheme media query to detect the current appearance setting. For example, you could specify a dark background and light text when dark mode is active using:

@media (prefers-color-scheme: dark) {
   body {
      background-color: black;
      color: white;

See sample code below. This can be combined with Custom CSS Styling & Zoom Level Settings to inject dark mode-specific styling rules into an existing page.


  • Dark mode support requires iOS/iPadOS 13 or later. On devices running iOS 12, the standard light keyboard and interface elements will be used.
  • The keyboard in Kiosk Pro app settings will always use light appearance, despite the system setting. The dark mode keyboard is only used in presentation view.

Sample Code

Change Log

  • Added in version 11.2 

Still stuck? How can we help? How can we help?