Ionic 2 - Using predefined colors

Today I wanted to style a list, in which one item could be selected. Such an selected item should have the primary color.

This meant mainly, I had to define a css class, which I assigned to a selected item:

.selected {
  background-color: #387ef5;
  color: #fff;
}

The background-color is the primary color. And as color, I chose something with a good contrast.

However, this approach is not very flexible. After all, Ionic provides SASS variables. So, why not use them?

Well, one reason could be, that the documentation is not complete. But finally, I made it:

• The color values are defined in src/theme/variables.scss. You find there something like
  

  $colors: (
    primary:    #387ef5,
    secondary:  #32db64,
    danger:     #f53d3d,
    light:      #f4f4f4,
    dark:       #222,
    favorite:   #69BB7B
  );

• For using a color value, Ionic provides a SCSS function named color() (defined in node_modules/ionic-angular/themes/ionic.functions.scss):
  

  .selected {
    background-color: color($colors, primary);
    color: #fff;
  }

• For the text color, there is a similar function called color-contrast():
  

  .selected {
    background-color: color($colors, primary);
    color: color-contrast($colors, primary);
  }

• If you want more control about the contrast color, you can define it by yourself in the color map, e.g.:
  

  $colors: (
    primary:    (base: #387ef5, contrast: #ff0000),
    ...
  );

  Now the text is red instead of white.

Migrating to Ionic 2 RC 0 - CommonJS files

After migrating my app to Ionic 2 RC 0, I was able to typescript-compile my app, but the bundling failed with

bundle dev failed:  Module .../node_modules/log4javascript/log4javascript.js does not export getRootLogger 

Finally, after some googling, I found out, that I had to define the so-called custom named exports of log4javascript by myself:

1. Copy rollup.config.js from node_modules/@ionic/app-scripts/config into my own config directory.
2. Change my package.json according to the documentation:
   

   "config": {
     "ionic_rollup": "./config/rollup.config.js"
   },
   

3. Add configuration for commonjs plugin in rollup.config.js:
   

   plugins: [
     commonjs({
       include: [
         'node_modules/log4javascript/**',
       ],
       namedExports: {
         'node_modules/log4javascript/log4javascript.js': [
           'Appender', 'BrowserConsoleAppender', 'getLogger', 'getRootLogger', 'Level', 'LoggingEvent', 'logLog', 'PatternLayout'
         ]
       }
     }),
     ...
   ]
   

As you can see, I had to define every single thing I used from log4javascript. Not beautiful, but it works.

Migrating to Ionic 2 RC 0 - Custom Config Files

I followed the documentation about Custom Config Files. For this, I copied the rollup.config.js from node_modules/@ionic/app-scripts/config into my own config directory. Then I changed my package.json according to the documentation:

"config": {
  "ionic_rollup": "./config/rollup.config.js"
},

But now the build reported:

Config file "/Users/.../config/rollup.config.js" not found. Using defaults instead.
Error: Cannot find module '../dist/plugins/ng-template'

As every developer, I tried to solve the first message. But the config file was at exact the reported place. Finally, after checking the code, I found it just "misleading". The problem ist the second message. The first line of the copied rollup.config.js was

var ngTemplate = require('../dist/plugins/ng-template').ngTemplate;

Since I moved the file, the relative path didn't work any more. There for I changed the first line to

var ngTemplate = require('../node_modules/@ionic/app-scripts/dist/plugins/ng-template').ngTemplate;

And both error messages were history.

---

Update 9-Oct-2016: Latest with @ionic/app-scripts@0.0.30, ngTemplate is no longer required by rollup. Therefore the mentioned error does not occur anymore.