Question

I would like to make a Rails app that lets users enter data and then allow them to change the page’s theme. This way their data could be styled differently based on the theme they choose. How would I go about doing this?

1. Change stylesheet?
2. Two separate views with different classes/elements?
3. Dynamically just change classes/ids/selectors?
4. ?

Thanks

Answer 1

The easiest way to theme a site is to simply link to a different stylesheet. You can do this dynamically using something like:

# in app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>
<%= stylesheet_link_tag #{current_theme} %>

# in app/helpers/application_helper
def current_theme
  # You'll have to implement the logic for a user choosing a theme
  # and how to record that in the model.
  # Also, come up with a better name for your default theme, like 'twentyeleven' ;)
  current_user.theme || 'default'
end

Then you can have a couple manifests for themes. For example, your assets directory can look something like this:

• app/assets/stylesheets
  • application.css
  • buttons.css
  • theme1/
    • index.css
    • buttons.css
  • theme2/
    • index.css
    • buttons.css

This will get you started with pure css theming. At some point you’ll probably want to also them javascript and html layouts. When you start finding the need to do something like this in your html:

<% if current_theme == 'theme1' %>
  <li>...
<% elsif current_theme == 'theme2' %>
  <b>...
<% end %>

then it’s time to implement a more robust theming framework:

• namespace your html templates by theme (e.g. app/views/themes/theme1/users/index.html.erb) and render the themed version instead of the default
• namespace just the partials by template (e.g. app/views/themes/theme1/users/_form.html.erb) and add a helper method like render_themed_partial
• similar to the above approaches, but when the themes get very large, you should consider putting them into their own gems as rails engines

Note: This is all for static themes. For dynamic themes (e.g. where an admin can login and edit the stylesheets or html), you’ll have to store theming information in the database. Depending on your architecture, you may be able to provide a set of static themes, and then another theme that dynamically grabs styling data from the database. At that point, you’re developing a CMS, however, so it’s outside the scope of this answer 🙂