Dark Mode

📘

Control whether your app follows the device setting for Light & Dark Mode or is always set to Dark Mode.

Select whether the native UI elements within your app such as the top nav menu, sidebar nav menu, bottom tab menu are always set to Dark Mode or if they follows the active device mode for Light & Dark (Auto mode).

You may add support for dark and light modes within your web content by making use of the perfers-color-scheme CSS media query. Your app sets this parameter to light and dark based on the current device mode, and will change it dynamically when the device mode changes.

You may add a control toggle within your web content to force Light or Dark mode in addition to following the device setting (Auto mode). We recommend using CSS variables to define the desired colors in Light mode versus Dark mode. And we suggest setting a cookie when the users manually selects Light or Dark mode rather than Auto.

For a live example that you can adapt for your own website check out GoNative's Dark Mode Switcher Codepen Example or refer to this comprehensive guide from CSS-Tricks that provides helpful details and examples for implementing dark mode using CSS.


Next Steps