Ionic App Dynamic Theming Control At Server Side

Ionic Angular App Dynamic Theming — Server-Side Configuration

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.

Step 1

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

variable.scss code

Ionic loads all these variables as global variables for SPA, which you can override at app boot up to…