Dynamic theming: Compile ionic scss with node-sass?

Ionic Framework ionic-v3
1

I want to achieve dynamic theming with this steps:

  1. compiling an default version of the ionic scss
  2. compiling the version with a theme
  3. comparing the two and delete all classes in the themed file that aren’t different to the default css file
  4. wrap the whole result of step 3 in a class in scss and compile that to change the them if I apply that class to the root of my page.

Is that a good idea? Whats the best methode to achieve that?

I’m curently stuck at compiling the default scss in a node.js app, but I don’t know what parameters the scss funtion needs to work properly.

What is the right way to do that?

2

For step 1 I came up with this scss for use with node scss:

@charset "UTF-8";
@import "data/default_theme.scss"; // the variables file that I copied and renamed
@import "ionic.components";
@import "app/app.scss";
// My Components and pages
@import "components/offline-banner/offline-banner.scss";
@import "components/right-description/right-description.scss";
@import "pages/credits/credits.scss";
@import "pages/dfam-content-info-modal/dfam-content-info-modal.scss";
[...]

My Code to render it:

  var result = sass.renderSync({
    data:scss,
    includePaths: [
      '../IonicApp/node_modules/ionic-angular/themes',
      '../IonicApp/node_modules/ionicons/dist/scss',
      '../IonicApp/node_modules/ionic-angular/fonts',
      '../IonicApp/src/'
    ],
    outputStyle: 'expanded'
  });

But it’s not quite working yet -> I get every ionicon class twice as Example.

Any Ideas how I can improve my script to output the right css? Do I need another import order?

3

After over 10 hours of tinkering around I came up with a kinda working script. When I make the themes for my app, I might improve it to a point where I can share it.

As there might be a better solution without an extra node js script in an extenal folder, feel free to let me know if you have any ideas (maybe there is a way to integrate it into the build process?).

4

Correct me if I am wrong, but it looks like the sass ionic app script uses node-sass to compile scss files. I’m not sure if that’s a cleaner solution for you, but as of @ionic/app-scripts : 3.2.0 this is the case.