Ionic Angular App Dynamic Theming — Server-Side Configuration

Overview

If you are working for an enterprise solution, where you customize app theming per end client or you are a creative app developer who loves keeping users enticed with new themes, then you understand how important it is to support the Dynamic Theming of the app.

Theme configurability may include some or all of these, but is not limited to:
App Branding, Background image, Watermark, Color scheme, Logo, Font, etc

We don’t want to bundle the app styling inside the installer packaging, so be able to configure it from the server on the fly. This not only gives you an easy & powerful way of app customization but also reduces time to market by not having to re-bundle, re-install or re-publish the app for the end-users enhanced UI/UX experience.

Ionic provides first-class support for dynamic app theming using CSS Variables.

Define all the configurable styling you want into the variable.scss file with default values:

Ionic loads all these variables as global variables for SPA, which you can override at app boot up to achieve the desired theme configured from the server.

Define all the desired theme values of the variables in a JSON file at the server, which can be dynamically & conveniently changed:

Load the JSON file from the server at app startup and override the variable values. Since it's a SPA, you only have to run these statements once, maybe inside app.component.ts or some shared startup.service.ts, based on your application design.

And, the result is configurable app-theming on the fly.

I hope you liked ❤️ this article, stay tuned for more posts. All feedback, comments & questions are welcomed.🙌

Humble Request To Readers🙏

It takes time & effort to write these BLOGS. Please support me back by clicking on FOLLOW button (available at either the top right or bottom of the page). Your gracious support goes a long way for me.

Donation😇

If this helped you reduce the time to develop, you can buy me a cup of coffee ☕

--

--

Lead Full Stack & DevOps Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amith Kumar

Amith Kumar

Lead Full Stack & DevOps Engineer