Theming with html5 template tags & services

services.themes.js

import Ember from 'ember';
import config from '../config/environment';

const { Service, computed, get } = Ember;
const defaultTheme = config.themes.defaultTheme;

export default Service.extend({
  themeTemplateString: computed(function() {
    let themeTemplate = document.getElementById('custom-theme-template');
    let templateStyles = themeTemplate.content.querySelectorAll('style')[0];
    return templateStyles.innerHTML;
  }),

  customThemeStylesheet: computed(function() {
    let customThemeStylesheet = document.getElementById('custom-theme');

    if (!customThemeStylesheet) {
      customThemeStylesheet = document.createElement('style');
      customThemeStylesheet.setAttribute('id', 'custom-theme');
    }

    return customThemeStylesheet;
  }),

  setTheme(theme = defaultTheme || {}) {
    let templateString = this.get('themeTemplateString');
    let customThemeStylesheet = this.get('customThemeStylesheet');

    let compiledStyles = replaceValues(templateString)(theme); // Can also use `Handlebars.compile` instead of pattern matching
    customThemeStylesheet.innerHTML = compiledStyles;
    document.getElementsByTagName('head')[0].appendChild(customThemeStylesheet);
  }
});

theme.template

<template id="custom-theme-template">
  <style>
    .main-navs {
      background: {{navsBgColor}};
    }

    .main-navs ul > li > a {
      color: {{menuTextColor}};
    }
  </style>
</template>