同一模板的多个 CSS 样式答案

【问题标题】：Multiple CSS style for the same template同一模板的多个 CSS 样式
【发布时间】：2015-05-04 22:28:02
【问题描述】：

我必须制作一个可以在黑暗或阳光充足的地方运行的用户界面。所以，我想做一个“高对比度”主题和一个“普通主题”。

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

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

有更好的解决方案吗？

【问题讨论】：

你不能用Javascript来卸载旧的css文件并加载新的，如果你加载一个新的css文件，它应该覆盖当前css文件的样式。跨度>

标签： css meteor

【解决方案1】：

写一个helper比如

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

【讨论】：

我认为当前的语法已经更改为 Template.registerHelper()。
该死！我从来不知道有一个registerHelper，我觉得我很新手......非常感谢，这个解决方案完全符合 Meteor 的精神。
事实上......我无法使用此解决方案访问body 标签。我必须使用 jQuery 手动更改 background-color 并且它是“相同”结果的更多代码。
不需要设置body标签的样式来改变主题。 body 应该仅限于定义您的基本字体，行高。颜色应该应用于元素。下面。

【解决方案2】：

如果你使用less（一个官方的meteor包），你可以定义两个不同的类，设置在body（或一个主div）上，并赋予它们不同的样式：

.dark {
  p { color: #fff; }
  /* dark styles... */
}

.light {
  p { color: #000; }
  /* light styles... */
}

然后确实，以编程方式切换<body> 或<div> 标签上的类，例如使用Template.registerHelper 和@adnan-y 建议的Session 类。

它看起来会更干净（而且您可以使用大量酷炫的 less 功能，例如 lighten 和 darken），并且所有内容都将在服务器运行时编译为 css。

【讨论】：

我以前从未使用过less，但我会看看这个选项。无论如何，我可以不用less 来做到这一点，不是吗？
是的，但是有很多丑陋的代码。基本上你必须在每个规则声明之前添加你的身体类......或者至少是颜色的。在这里，您只有两个方便的命名空间，其中包含 css。基本上，你不需要再写less而不是我写的了！您可以将所有常规 css 放在这些类中，它将完美地工作。只需将您的文件命名为 style.less 而不是 style.css 并亲自查看。再说一次，我理解你是否仍然认为这增加了复杂性。
如我所见，使用less 我的css 声明会更加清晰，所以我将完全使用它！非常感谢。