Question

我必须创建一个可以在黑暗或阳光充足的地方运行的用户界面。所以，我想做一个高对比度＆＃34;主题和＃34;正常主题＆＃34;。

我知道Meteor在一个大样式表中合并并缩小所有CSS文件。所以...我想知道如何在两个主题之间切换，我不能使用this site解释的技巧。

我想到了一个解决方案：在主体上有超类，只包含颜色定义，我可以用一点JavaScript切换。但这似乎有点粗鲁。

有没有想过更好的解决方案？

Answer 1

写一个帮手，比如

Template.registerHelper('theme', function(){
  // somehow get timeoftheday and return appropriate theme
  // alternatively get theme name from user.theme
  // here we are just getting it from session for now
  Session.get('theme');
});

在布局模板中，反应性地设置根元素类：

<template name="layoutTemplate">
  <div class="content {{theme}}">
    {{> somenav}}
    {{> yield}}
    {{> footer}}
  </div>
</template>

css可以是一线：

.dark {
  background-color: black;
  color: white;
  h1, h2, h3, .header, p {
  // some custom scheme related to dark scheme
  }
}
.light {
  background-color: white;
  color: black;
  p {
  // some custom scheme related to lightscheme
  }
}
.someotherthemename {
  background-color: pink;
  color: purple;
  p {
  // some custom scheme related to lightscheme
  }
}

同一模板的多种CSS样式

1 个答案: