Ember项目主题和皮肤

Question

关于如何创建Ember / Handlebars项目的任何想法，支持可以通过UI中的Dropbox更改的多个主题/皮肤？

当前版本的Ember是1.0.0-rc.2

谢谢

Answer 1

Ember在这里没什么特别的。使用CSS作为主题/皮肤，并在保管箱更改时更改当前主题样式表。

Answer 2

仅供参考，您可以使用开关样式表ember-cli：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.

1. 转到app / styles文件夹
2. 创建dark.css和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

想想这个简单的方法：

在Html模板application.hbs中

<link href="light.css" rel="stylesheet" type="text/css" >

<button class='light'>LIGHT MODE</button>
<button class='dark'>DARK MODE</button>

在Javascript文件中

$('.light').click(function (){
   $('link[href="light.css"]').attr('href','black.css');
});
$('.black').click(function (){
   $('link[href="black.css"]').attr('href','light.css');
});

评论：你可以使用其他插件（更复杂），它可以找到：

1. https://www.emberaddons.com/
2. https://www.npmjs.com/package/ember-themed-syntax