Search code examples
ionic2

Include Ionic Dark Theme

I know Ionic 2 ships with a dark theme (the ionic-angular node module ships with the file css/ionic.dark.css).

How do I import it in my Ionic application's SASS?

I've tried to @import ionic-angular/css/ionic.dark.css in both src/app/app.scss and src/theme/components.scss but the output is visually the same as the starter theme.

Edit to add my ionic info:

Cordova CLI: 6.2.0
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS 
Node Version: v6.9.1
Solution

  • Update in ionic 2.0:

    Replacing '@import "ionic.theme.default"' to '@import "ionic.theme.dark"' activates the dark theme.

    ionic RC version

    Ionic's default theme gets selected from from variables.scss file.

    Replace '@import "ionic.theme.default"' to '@import "ionic.theme.dark"' to activate the dark theme.

    Also remove the below lines of code from variables.scss

    $text-color:        #000;
$background-color:  #fff;

    These variables overrides the default variable in dark theme. You can either remove to get standard dark theme or play around with this to get your own color for background and text color in dark theme.