I have a couple instances of the same Rails app and I want to allow a few custom theme options on each. For example, a different header color or column width.
I still want to keep the same code base, so I can't just change the CSS for each one and it doesn't seem like using environment variables would be a good idea. I also want to keep the optimization benefits of the assets pipeline.
What can I use that will allow for easy theme customization in each instance of the app?
You can create separate layouts for each theme.
Under app/views/layouts/theme_one_base.html.haml
<html>
<head>
<%= stylesheet_link_tag "application" %>
</head>
<body id='theme_one'>
<%= yield %>
</body>
</html>
You can specify the layout to use in your application controller, and that could be an environment variable.
class ApplicationController < ActionController::Base
layout 'theme_one'
end
If this is not enough and each theme requires it's own set of stylesheets you can split them up like so.
In app/assets/stylesheets/, the directory would look like
theme_one.css.scss
theme_one/
And the manifest file theme_one.css.scss contains
/**
*= require_self
*= require_tree ./theme_one
*/
And you would update the base_layout.html.haml
<html>
<head>
<%= stylesheet_link_tag "theme_one" %>
</head>
<body>
<%= yield %>
</body>
</html>
Basically each base layout includes it's own set of independent stylesheets.
Update 1 - adding info on overriding layouts
You can create multiple manifest files in which you include whichever partial files you want. For example you can create a core.css file with the common styles and then have blue.css, green.css etc. files which you optionally include. This is inspired by this answer, have a look at it for more info.
If by custom themes you mean customisable by users you can simply use cookies to store the name of the manifest file which should be included in the application. However, if you do this don't forget that the user can change the cookie so beware of injections.
