CODEWITHSUNDEEP
cssmeteor
c.censier
c.censier

Reputation: 780

Multiple CSS style for the same template

I have to make a user interface that can be run in dark or sunny places. So, I want to make a "high contrast" theme and a "normal theme".

I understood that Meteor merges and minify all CSS files in one big stylesheet. So... I wonder how to switch between two theme, I can't use tricks like this site explains.

I have thought of a solution : having super-class on the body, that contains only colors definitions, that I could switch with a little JavaScript. But that seems to be a little rude.

Any thought of a better solution ?

Upvotes: 0

Views: 748

Answers (2)

SylvainB
SylvainB

Reputation: 4820

If you use less (an official meteor package), you can define two different classes that would be set on the body (or a main div), and give them all different styles:

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

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

Then indeed, programmatically switch the class on the <body> or <div> tag, for example using Template.registerHelper and the Session class like @adnan-y suggested.

It would look cleaner (plus you could use tons of cool less features like lighten and darken), and everything will be compiled to css on server run.

Upvotes: 1

Adnan Y
Adnan Y

Reputation: 3240

write a helper such as 

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

in your layout template, set the root element class reactively:

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

css can be something along the line:

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

Upvotes: 2

Related Questions