Dark Mode
Ionic makes it easy to change the themes of your app, including supporting dark color schemes. With growing support for dark mode in native apps, developers are now looking to add it to their apps to support user preferences.
Using Media Queries#
The first way to enable dark mode is by using the CSS media query for the user's preferred color scheme. This media query will hook into the system setting of the user's device and apply the theme if a dark mode is enabled.
Currently, the prefers-color-scheme media query has limited browser support, so users will not be able to benefit from having the dark mode applied using this media query in certain browsers. However, the dark mode can still be applied by using a CSS class fallback.
CSS Class Fallback#
As a fallback method for devices that don't support the media query, the dark mode can be applied by styling a CSS selector and applying the class to the document body.
With the variables targeting the body.dark selector, all that is needed now is to add the class to the <body> in the app. This can be done in a variety of ways depending on the framework your app is built with.
Notice that the variables should be in both places in this example. We can use JavaScript in order to avoid setting the variables in two places.
Combining with JavaScript#
In order to keep the CSS variables written once and avoid having to update them in multiple places, the fallback and class can be combined by using JavaScript to check the value of the prefers-color-scheme media query and adding the dark class if the preference is dark. Here's what the CSS would look like:
Notice that the variables above are only in the body.dark selector now, and the prefers-color-scheme media query has been removed.
Automatically Enable Dark Mode#
In the JavaScript, the dark class can be added to the <body> by checking if the document matches the media query using matchMedia(). This will enable dark mode to still work based on the user preference.
Tip: make sure to view the Codepen below in a supported browser and then try changing the system preferences on your device between light & dark mode. Here's how to enable dark mode on Windows 10 and how to enable it on a Mac.
Manually Toggle Dark Mode#
In addition to calling toggleDarkTheme() when the app loads and when the media query changes, the toggleDarkTheme() function could be called by the app, such as when a user changes a toggle, to switch between the light and dark themes:
Adjusting System UI Components#
When developing a dark theme, you may notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the color-scheme. See the browser compatibility for color-scheme for details on cross browser support.
While you may be mainly using Ionic components instead of only native components, color-scheme can also affect aspects of your application such as the scrollbar. In order to use color-scheme you will need to add the following HTML to the head of your application:
This allows the page to indicate which color scheme it is comfortable being rendered with. Alternatively, you can add the following CSS to do this on a per-element basis:
| Default scrollbar | Scrollbar with color-scheme |
|---|---|
 |  |
For more information regarding color-scheme please see https://web.dev/color-scheme/.
color-schemedoes not apply to the keyboard. For details on how dark mode works with the keyboard, see Keyboard Documentation.
Ionic Dark Theme#
Ionic has a recommended theme for variables to use in order to get a dark mode based on the device running the app. It can be broken down into the following parts:
- Changing the default Ionic colors for all modes to complement the dark background in the
body.darkselector. - Setting variables for the dark theme on
iosdevices. - Setting variables for the dark theme on
mddevices.
The following code can be copied and pasted into an app to get Ionic's dark theme. We add the dark class to the document body using JavaScript as mentioned in the combining with JavaScript section. The dark mode will not be enabled until the dark class is added to the document body.
For more information on the variables that are being changed, including other variables that can be added to further customize, see Themes.