Better Ionic Theming

Recently I was working on a client application and was starting on the theming portion of the effort. Naturally, the client wanted some corporate branding applied to the app. Mostly simple things like changing out the header color to match the current corporate color, etc. However, this app was actually not going to be deployed as a native mobile app, but rather as a standard web app (technically a Progressive Web App). As such, I was paying more attention to files sizes of the build.

I knew I was not going to get into the bowels of the app build process, but I was curious about what I could optimize. The generated CSS file caught my eye as something that might be adjusted. As you know, Ionic ships with 5 theme colors:  primary, secondary, danger, light, and dark. I initially add a corpBrand variable within the $colors map. If you read the Theming your Ionic App page on the Ionic site, this is exactly what they demonstrate.

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

So, I added in the reference to the corporate color and then built the app using both ionic serve and ionic build –prod to see what the sizes would be.

Build Method main.css Size
ionic serve 478kb
ionic build –prod 408kb

That’s a little large. I wondered what the base size of the CSS file was? Here is what the default main.css measures:

Build Method main.css Size
ionic serve 421kb
ionic build –prod 357kb

So, just add one additional variable to $color, increased the CSS file by 57kb. I was shocked for a moment. But then thought about what was happening in the build process. The build scripts were taking each entry in our $colors array, and applying it to each and every component in the framework. It did not matter it the new color was ever used on that component or not.

I decided to explore this a bit further by removing the corpBrand variable and also removing the reference to secondary color was well. I knew I did not directly use this in the app, so I thought it might be semi-safe to try it. I rebuilt the app using both ionic serve and ionic build –prod.

Build Method main.css Size
ionic serve 371kb
ionic build –prod 312kb

The savings were 50kb. This confirmed that each color variable costs about 50kb in file size. I am not sure that I totally trust deleting one or more of the Ionic default colors to save file size. Maybe in a future build script, some CSS tree-shaking might occur. With the rebirth of web apps, our file sizes will become increasingly important (hint, hint).

One solution…

So, how could I apply the corporate branding to the select components and still manage my CSS file size? Clearly, just adding it to the $color array was a bit expensive.

If you are not aware, one of the improvements in Ionic 2 was the addition of a ton of additional SASS variables. For example, the header needed to be in the corporate brand color. Since the header is built atop the Toolbar component, I hopped over to the Overriding Ionic SASS Variables page to see what might be easily altered. There I found $toolbar-ios-background, $toolbar-md-background, and $toolbar-wp-background.

Opening the theme/variables.scss file, I adjusted to include this:

// 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/v2/theming/overriding-ionic-variables/

$corpBrand: #663399;

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

$toolbar-ios-background: $corpBrand;
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$toolbar-md-background: $corpBrand;

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


$toolbar-wp-background: $corpBrand;

Saving these changes and running the tests again, I got these results:

Build Method Size
ionic serve 421kb
ionic build –prod 357kb

Basically, the same as the defaults (a few bytes larger in each case).

To sum all this up, when applying a custom theme to your Ionic application, I strong urge you to target the styling in a focused manner, rather than creating a new global color theme.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s