Ember Theming

components.app-footer.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.app-header.js

import Ember from 'ember';

export default Ember.Component.extend({
  theme: Ember.inject.service()
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

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

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('about');
});

export default Router;

routes.about.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  theme: Ember.inject.service(),
  
  // set theme to "second" when hitting route
  beforeModel: function() {
    this._super(...arguments);
    this.get('theme').setTheme('second');
  }, 
  
  actions: {
    // set theme to "first" when leaving route
    willTransition: function() {
      this.get('theme').setTheme('first');
      this._super(...arguments);
    }
  }
});

services.theme.js

import Ember from 'ember';

export default Ember.Service.extend({
  base: 'default',
  theme: 'first',

  // the property used as a reference for styles
  name: Ember.computed('base', 'theme', function() {
    const base = this.get('base');
    const theme = this.get('theme');
    return `${base}-${theme}`;
  }),

  // set the base theme for the application
  setBase: function(base) {
    this.set('base', Ember.isEmpty(base) ? 'default' : base);
  },

  // set theme to use within base theme
  setTheme: function(theme) {
    this.set('theme', Ember.isEmpty(theme) ? 'first' : theme);
  }

});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

// usage:
//div.my-awesome-class {
//  @include theme('color', 'primary');
//}

// results in the output:
div.my-awesome-class[data-theme="default-first"] {
  color: #58b15f;
}
div.my-awesome-class[data-theme="default-second"] {
  color: #287f6e;
}

templates.about.hbs

<h2>About Page</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit commodo fringilla. Nulla tempor justo eget ligula scelerisque pharetra. Mauris finibus lorem mauris, ut ultrices quam dapibus a. Fusce sed urna sed lorem interdum varius. Curabitur at nibh massa. Donec enim libero, fermentum id augue id, auctor placerat nisi. Maecenas iaculis egestas neque ut lobortis. Vestibulum sit amet odio augue. Vestibulum convallis venenatis nibh in lobortis.</p>

<p>Praesent lobortis rhoncus orci, ut tempus lorem porttitor eu. Integer elit purus, tincidunt vel ullamcorper vitae, facilisis et justo. Phasellus semper vehicula leo et vulputate. Cras porta dictum nunc in mattis. Maecenas eget dapibus turpis, eget scelerisque nisl. Fusce placerat turpis sed dui consequat, et sagittis diam pharetra. Praesent tortor ipsum, euismod id dictum vel, pharetra blandit nisl. Praesent rhoncus sagittis arcu, a viverra eros molestie sit amet.</p>

<p>Cras ornare justo libero, dapibus dignissim erat pretium a. Donec consequat massa nec sem blandit iaculis. Integer quam lorem, porta vel fringilla quis, maximus at velit. Quisque ut luctus mauris. Donec convallis, mi in convallis suscipit, diam enim eleifend quam, eget finibus ante tellus nec leo. Cras ut semper dolor. Sed sit amet lacinia orci. Cras sit amet ullamcorper nisl, non posuere elit. Sed in nisi id sapien ultricies pretium. Aenean imperdiet gravida nunc, non pretium augue facilisis ut. Proin suscipit leo ligula, ac interdum lorem ultricies sed.</p>

templates.application.hbs

{{#app-header}}
  <h1>Ember Theming</h1>
  <nav>
    {{#link-to 'index'}}Home{{/link-to}}
    {{#link-to 'about'}}About{{/link-to}}
  </nav>
{{/app-header}}

{{outlet}}

{{#app-footer}}
  Contact Us | Services | Location
  <br>
  <small>Credit - <a href="http://jonpitcherella.com/2016/04/02/ember-theming">Jon Pitcherella's blog post</a></small>
{{/app-footer}}

templates.components.app-footer.hbs

{{yield}}

templates.components.app-header.hbs

<div class="my-awesome-class" data-theme="{{theme.name}}">
  {{yield}}
</div>

templates.index.hbs

<h2>Home Page</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique dolor massa, at venenatis ipsum fringilla eu. Quisque pretium sem in nibh euismod faucibus. Etiam volutpat velit sed enim congue congue. Cras cursus augue odio, ut congue est facilisis vel. Integer sit amet turpis ex. Duis consectetur posuere lorem et mattis. Sed id vehicula massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis lorem massa, vehicula in purus in, dapibus congue lacus. Sed dignissim ut lectus vel interdum. Maecenas at accumsan lectus, pellentesque luctus lorem. Vivamus in magna vitae enim congue posuere a eu purus. In semper non diam venenatis eleifend.</p>

<p>Pellentesque rutrum, justo nec lacinia congue, tellus enim rhoncus lacus, sed fringilla erat nulla ac tortor. Curabitur nec nunc non ipsum porta euismod et quis nulla. Pellentesque libero nisi, condimentum vitae ultricies pulvinar, tempus non ex. In tempus aliquet felis at gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse nec est accumsan neque dignissim ultrices. Duis sagittis eget diam et rutrum. Pellentesque posuere placerat lectus sed tempus. Morbi condimentum purus at purus gravida cursus.</p>

<p>Nulla pharetra mattis rutrum. Nunc eleifend laoreet sapien, at fermentum neque cursus non. Morbi porta nec magna cursus ultrices. Maecenas nisi tortor, maximus vestibulum dui a, semper varius metus. Nullam eros purus, dictum id sagittis nec, consequat eget felis. Nulla lacinia mauris a cursus vehicula. Nulla ac condimentum elit, eget rhoncus ex. In hac habitasse platea dictumst. Nunc a auctor magna. Sed vel nisi nec sapien lobortis scelerisque in et arcu. Aliquam viverra sed quam vel consectetur. Nunc tincidunt leo eu vulputate fringilla.</p>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}