Question

我正在使用Ember CLI创建应用程序。用户应该可以选择切换主题。

有两个Less文件（theme-one.less和theme-two.less），每个主题一个。

我正在寻找Ember-way来有条件地加载主题一个＆＃39;或者＆＃39;主题二＆＃39;文件。是否有Ember方式，还是应该手动更新CSS href元素的<link>属性？

Answer 1

仅供参考，您可以使用一个开关样式表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。

转到app / styles文件夹
创建dark.css和app.scss

dark.scss

body{
 background-color: black;
}

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

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

Answer 2

据我所知，没有任何方法可以修改index.html，但我已经按照这篇文章关于如何将主题应用于我的应用程序：

https://medium.com/@jonpitch/ember-theming-97e9562084c7#.mfugkic8r

它使用了sass，但我在less上应用了相同的概念。基本上，您应该创建一个服务，在其中定义用作模板中theme属性的data-theme属性和less样式的修饰符（阅读帖子比解释更容易）

在Ember CLI应用程序中切换样式表

2 个答案: