Ember project with themes and skins - ember.js

Question

Any ideas on how to create an Ember / Handlebars project with suport for multiple themes / skins that can be changed through a dropbox in the UI?
Current version of Ember is 1.0.0-rc.2
Thanks

Answer 1

Nothing too unique to Ember here. Use CSS for themes/skins, and change the current theme stylesheet when the dropbox changes.

Answer 2

FYI, there is a switch stylesheet ember-cli that you can use:
https://www.npmjs.com/package/ember-theme-changer
Install Theme Changer
ember install ember-theme-changer
Modify the code below in ember-cli-build.js:
// ember-cli-build.js
outputPaths: {
app: {
css: {
'light': '/assets/light.css', // FOR LIGHT THEME => app.scss
'dark': '/assets/dark.css' // FOR DAR THEME => dark.scss
}
}
},
Create your own SCSS with difference configuration.
Go to app/styles folder
Create dark.css and app.scss
dark.scss
body{
background-color: black;
}
app.scss
body{
background-color: light;
}
All you need just to make two button to switch the css file that you apply to
Think of it this easy way:
In Html template application.hbs
<link href="light.css" rel="stylesheet" type="text/css" >
<button class='light'>LIGHT MODE</button>
<button class='dark'>DARK MODE</button>
In Javascript File
$('.light').click(function (){
$('link[href="light.css"]').attr('href','black.css');
});
$('.black').click(function (){
$('link[href="black.css"]').attr('href','light.css');
});
comments: You can use other addon (more complicated) which it can be found on:
https://www.emberaddons.com/
https://www.npmjs.com/package/ember-themed-syntax