'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
ionic2


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions