Updating header which toggle property

[svparijs]

Hey guys,

Thanks for the solid package. Currently I'm having trouble updating the head after the page has rendered. I'm trying to switch (css) themes. The array changes based on the content but the headTag is not modified.

application/route.js

  setHeadTags() {
    let headTags = [];

    if (this.get('layoutService.isColorSchemeDark')) {
      headTags = [{
        type: 'link',
        tagId: 'app-styles',
        attrs: {
          rel: 'stylesheet',
          href: '/assets/app-dark.css'
        },
      }];
    } else {
      headTags = [{
        type: 'link',
        tagId: 'app-styles',
        attrs: {
          rel: 'stylesheet',
          href: '/assets/app.css'
        },
      }];
    }

    this.set('headTags', headTags);
  },

  updateColorScheme: observer('layoutService.isColorSchemeDark', function () {
    this.setHeadTags();
  }),

[svparijs]

Injecting the service and using:

  setHeadTags() {
    let headTags = [];

    if (this.get('layoutService.isColorSchemeDark')) {
      headTags = [{
        type: 'link',
        tagId: 'app-styles',
        attrs: {
          rel: 'stylesheet',
          href: '/assets/app-dark.css'
        },
      }];
    } else {
      headTags = [{
      }];
    }

    this.set('headData.headTags', headTags);
  },

Works for me.