Menu
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
620
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. dark selector.
The fastest way to change the theme of your Ionic app is to set a new value for primary , since Ionic uses the primary color by default to style most components. Colors can be removed from the map if they aren't being used, but primary should not be removed.
Settings. Under Display Options, tap Theme. Select the theme for this device: Light—White background with dark text.
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.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
