Question

So I have an rails admin system that will allow a user to choose a theme, basically a set of SASS color variables that will recompile application.css.scss with the new colors. How would be the best way of going about changing this when the user selects from a drop down and submits? I read some up on some problems with caching and recompiling but I’m not totally clear how to set it up.

Currently I have..

application.css.scss

@import "themes/whatever_theme";
@import "common";
@import "reset";
@import "base";

themes/_whatever_theme

$theme_sprite_path: '/images/sprite_theme_name.png';
$main_color:#009DDD;
$secondary_color:#b3d929;
$light_background:#f2f2f2;
$border_line:#e6e6e6;
$off_white:#f9f9f9;
$white:#ffffff;
$font_body:#565b59;
$font_headers:#363a36;

Say I have 5 different themes the user will switch between, it would be nice to set variable names for each theme in Rails then pass these down to SASS and change them on the fly and recompile. Is this the best way to go about this?

Answer 1

3 easy steps:

1. Compile all themes into different files upon deploy. This will take care of timestamping, zipping, etc.

2. Render page with default theme.

3. Use javascript to load alternate theme CSS.

No need to mess with dynamic compilation and all that.

To load a CSS dynamically you can use something like this:

function loadCSS(url) {
  var cssfile = document.createElement("link");
  cssfile.setAttribute("rel", "stylesheet");
  cssfile.setAttribute("type", "text/css");
  cssfile.setAttribute("href", url);
}