Ionic 2 Themalize

This npm package allows create themes (local css files) from different scss variable files in Ionic 2 APP and change it in runtime

WARNING: This package ovewrite the file sass.js in package @ionic/app-script/dist/sass.js

Installation

$ npm install ionic-themalize --save

Create a theme

Create a file with the extension [THEMENAME].theme.scss in any folder inside of you src directory. By default Ionic uses

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: "../assets/fonts";

// Font Awesome
$fa-font-path: $font-path;


// The app direction is used to include
// rtl styles in your app. For more info, please see:
// http://ionicframework.com/docs/theming/rtl-support/
$app-direction: ltr;


@import "ionic.globals";


// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/


// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.

$colors: (
  primary: #ffdb03,
  border-gray: #d8d9dd,
);


// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here




// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here




// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here




// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.

@import "ionic.theme.default";



// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/

@import "ionic.ionicons";


// Fonts
// --------------------------------------------------

@import "roboto";
@import "noto-sans";

Add or modify the variables as you need.

Change Theme

app.modules.ts

import {ThemeProvider} from "ionic-themalize";
...
providers: [
    ...
    ThemeProvider
    ...
    ]

In code

constructor (
    private theme: ThemeProvider){
        this.theme.applyTheme([THEMENAME]);
    }

Known Issues

• First ionic-serve fail

In firs time of execution css themes files not generates, this cause that every theme applied with applyTheme() different to main will fail. On the second execution works ok.