Can meteor have dynamic styling (Themes) on the web and mobile?

help
1

Hello, I am researching meteor for a project I am about to start. Part of the requirements for the project is that, different students from different schools are going to log into this app. Based on the school of the student that is logged in the styling/branding of the web application should change to that of the school.

  1. Is this possible in meteor websites? I imagine I would have to set a global variable in my Sass file and change it based on the URL or maybe dynamically create different css files? What would be the way to achieve this in meteor?

  2. When I convert the site to android and ios apps, will I be able to change the theme based on the students school too? I know the CSS and JS files are all packaged with the apps when submitted but is there a way to do this with the new hot code push system or any other feature meteor has?

Understanding the best way to go about achieving these things in meteor will be very helpful!

2

If you are just talking about changing colors / logo then it’s relatively easy. You can use a helper to return a specific css modifier class depending on a property of the user. Example

// HTML
<div class="navbar {{navbarTheme}}"></div>

// JS
navbarTheme: function () {
  if (Meteor.user().school === "blueSchool") {
    return "navbar-blue";
  }
} 

// CSS
.navbar {
  width: 100%;
  font-size: 16px;
}
.navbar-blue {
  background: blue;
}

This would work on all platforms.

3

Building on to @dapearce’s answer if you’re thinking of a more global change in CSS. You can potentially get the user’s school from the currentUser document and add that to the body as a class. You can then have scoped css files in SASS and specify which elements look different.

4

@Maaz Could you explain further? So I plan for this to be dynamic. In the sense that there would be an admin panel where you can add a school lets say “Havard University” and then add the color, lets say red as their primary color. so any student who says they go to havard will get the red navigation colored bar. But I have to somehow add these colors programmatically to the style sheet. i have thought about having a school database that also holds their color and logo in a field that gets swapped out depending on the student but I am glad to hear this will work on both mobile and web

5

If defining schools and colours are dynamic then it’s not as simple as having a few stylesheets in SASS. You’ll be probably be dealing with style attributes for often than not. If you’re only switching colours though, it might not be that bad to just throw that into style attributes. As far as I know there is no easy way to generate SASS on the fly and add it to your project dynamically.

Spacebars is pretty good at handling dynamic attributes example copied from an article

<input {{attributes}} />

Template.myTemplate.helpers({
  attributes: function () {
    return {
      name: "myName",
      class: "myClass anotherClass",
      value: 123
      style: "color: #FFFFFF"
    }
  }
});

results in

<input name="myName" class="myClass anotherClass" value="123" style="color: #FFFFFF" />
1 Like
6

Sry for using this old thread ;), but I currently thinking about something similar.
Would it somehow be possible to generate css from scss on the fly?

The use-case would be like this: having a slider where users can gauge the base colour and sees the changes in real time.
Is something like this possible?

Regards,
Lukas

7

Are you using React? If so, it’s easy. There are a few different options for styling in react, you can find on google. If you still not sure you can ask more questions (tag me if you want).

For example I googled “react dynamic styling”. Here’s one article

But the basic technique is here: https://facebook.github.io/react/tips/inline-styles.html

Do some thinking about how to break up your styles in a way that makes the most sense. For example, you may have global CSS or SCSS stylesheets for some things, but use inline styles for properties that you want the user to customize.

8

If you are not using react and using Blaze like I was when I created this post, use inline styling. So I was creating a brand-able (White label) app where a client can choose their own colors. I stored the colors they chose as one of the users attributes and then displayed it inline whenever they logged on.

If you want to be able to do this on the fly, you can update this attribute based on actions in your app. So if someone clicks a button, the app turns red. You can update this attribute at the click of a button and you would see the app in real time change. So yes it is possible.

Sorry for the late reply