What's the current state of the dark theme in Ionic 2?

Ionic Framework ionic-v3
1

Docs say the framework comes with dark theme but it looks like it’s not currently included.

Also found a recent merged pull request about this. So what’s the current status of the dark theme? Can we use it? If yes, how?

2 Likes
2

Was pretty excited to use a dark theme provided by Ionic but looks like you killed it…
Any plan to reintegrate it?

3

You can include the dark theme by importing it in the app.variables.scss file, like so:

// App Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files. Setting
// variables before Ionic's Sass will use these variables rather than
// Ionic's default Sass variable values. App Shared Sass imports belong
// in the app.core.scss file and not this file. Sass variables specific
// to the mode belong in the app.ios.scss, app.md.scss, or app.wp.scss files.

@import 'themes/dark';

or if you want to only import the theme for specific modes, you can import it in the mode specific app file. For example to use the dark theme only in Material Design, in app.md.scss:

// App Shared Variables
// --------------------------------------------------
// Shared Sass variables go in the app.variables.scss file
@import 'themes/dark.md';

@import 'app.variables';

The themes can be found here: https://github.com/driftyco/ionic/tree/2.0/src/themes

4

What if we want to allow a user to toggle between the dark and standard themes while running the app? Is resorting to custom css overrides the only way?