ember.js - 带有主题和皮肤的 Ember 项目

Question

关于如何创建一个支持多个主题/皮肤的 Ember / Handlebars 项目的任何想法，这些主题/皮肤可以通过 UI 中的下拉框进行更改？

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

谢谢

score 2 · Accepted Answer

Ember 在这里没有什么太独特的地方。将 CSS 用于主题/皮肤，并在 Dropbox 更改时更改当前主题样式表。

score 0 · Accepted Answer

仅供参考，您可以使用一个开关样式表 ember-cli： https ://www.npmjs.com/package/ember-theme-changer

安装主题转换器

ember install ember-theme-changer

在 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
        }
      }
    },

使用不同的配置创建您自己的 SCSS。

转到应用程序/样式文件夹
创建 dark.css 和 app.scss

黑暗.scss

body{
 background-color: black;
}

应用程序.scss

body{
 background-color: light;
}

您只需要制作两个按钮即可切换您应用的css文件

想一个简单的方法：

在 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');
});

评论：您可以使用其他插件（更复杂），它可以在以下位置找到：