ThemeManager in Aurelia


To create a UI framework, we need some classes to manage themes. For example, we work on Bootstrap 4 and have over 20 different themes.

What is the best practice for managing theme changes whenever users need?

What is the best practice for ThemeManager class,…?

How do you implement this in Aurelia?

Please provide any comments and suggestions about this.


Hi, in an app where we need to load different boostrap stylesheet depending on the customer, we do this in app.js:

  let link = undefined;
    const itemId = 'clubCss';
    var head = document.getElementsByTagName('head')[0];
    if (!document.getElementById(itemId)) {
        link = document.createElement('link'); = itemId;
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = 'styles/' + <name-of-stylesheet> + '.css'; = 'all';

That should do the trick. It has no dependencies.



@ormasoftchile thanks for your reply,

we went through this for controls which support bootstrap styles built-in and it just works awesome :point_down:

  <link href="${selectedTheme.path}.min.css" rel="stylesheet">

<div class="row">
    <div class="col-sm-12">
      <main-header themes.bind="themes" theme.bind="selectedTheme" router.bind="router"></main-header>
export class App {

  public router: Router;

  private themes: Array<Theme>;
  @bindable() private selectedTheme: Theme;

  constructor(eventAggregator: EventAggregator) {

    this.themes = [
      { name: 'cerulean', path: '/bootswatch/cerulean' },
      { name: 'cosmo', path: '/bootswatch/cosmo' },
      { name: 'cyborg', path: '/bootswatch/cyborg' },
      { name: 'darkly', path: '/bootswatch/darkly' }

however, I guess that @HamedFathi didn’t elaborate more on the details,

consider a situation where my components are able to accept custom colors, typography styles, CSS classes and so on, how is it possible to respond to theme changes and update all other controls which are not in support of bootstrap, for instance metis menu do not support any styles built-in, and we want to bootstrapized it, we have tons of bootstrap styles each of which have different primary color for instance, how should I decide what and when I should handle these changes? we are seeking for the best practice in this field.

My guess is to use EventAggregator and pub-sub style, am not sure about performance penalties we might pay though :weary:


Hi, Your solution is elegant! (added to my library). For those who use bootstrap, it is good. I’ve made something similar before, and it has the penalty of affecting the first load of css because it’ll be ready once aurelia is running, not when index.html is being rendered. For corporate apps it is no problem. For apps for occasional users in their phones with 3G, it might be annoying because correct rendering could take several seconds to happen.




so you mean that I should handle loading the correct CSS before Aurelia runs, via some pure javascript code, so that all of my users would be far happier? particularly those using their smartphones?


Yes. It does apply also for favicon, favicon144x144. For the loading indicator, if you inline it as an svg animation as the first content in the body, it starts almost immediately.