Themeable

You can create theme with this tool, make your Rails app choose theme dynamically.

Install gem

gem i themeable

Create your theme with command line

themeable new my_theme

Now, directory theme_my_theme created with this tool.

Design your theme

Start designing your theme in folder theme:

theme
├── assets
│   └── my_theme
│       ├── application.css
│       └── application.js
├── scaffold_templates
│   ├── admin
│   │   ├── _form.html.erb
│   │   ├── edit.html.erb
│   │   ├── index.html.erb
│   │   ├── new.html.erb
│   │   └── show.html.erb
│   └── default
│       ├── _form.html.erb
│       ├── edit.html.erb
│       ├── index.html.erb
│       ├── new.html.erb
│       └── show.html.erb
└── views
    └── layouts
        └── application.html.erb

• theme/assets/my_theme: where your stylesheets and javascripts should put in
• theme/scaffold_templates/xxx: your scaffold templates, generated default and admin by default, of course you can add more if you want
• theme/views: your views

If you have some vendor scripts and stylesheets, please put them in vendor/my_theme:

vendor
└── my_theme

To require vendor files, do it as this:

in some.js

//= require my_theme/xxx/xxx

in some.css

*= require my_theme/xxx/xxx

To resolve vendor files relative asset path, you should do like this:

rake resolve:css_path

Some vendor files have relative urls in the CSS files for imports, images, etc. Rails prefers using helper methods for linking to assets within CSS. Relative paths can cause issues when assets are precompiled for production.

Use your theme in your Rails project

Add gem to Rails app:

gem 'theme_my_theme', path: 'path_of_theme_my_theme'

Use theme in controller:

By default you need to remove views/layouts/application.html.erb from Rails app, make sure Rails can use theme's layout.

class HomeController < ApplicationController
  acts_as_themeable 'my_theme'
  def index
  end
end

Or, you can make this controller use dynamic themes:

class HomeController < ApplicationController
  acts_as_themeable :choose_theme
  def index
  end

  private

  def choose_theme
    case params[:theme]
    when 'my_theme' then 'my_theme'
    when 'classic' then 'classic'
    else; :none # :none means don't use theme
    end
  end
end

Use theme_my_theme as theme to scaffold controller views

$ rails g scaffold_controller User --theme=my_theme

    create  app/controllers/users_controller.rb
    invoke  erb
    create    app/views/users
    create    app/views/users/index.html.erb
    create    app/views/users/edit.html.erb
    create    app/views/users/show.html.erb
    create    app/views/users/new.html.erb
    create    app/views/users/_form.html.erb
    invoke  test_unit
    create    test/controllers/users_controller_test.rb
    invoke  helper
    create    app/helpers/users_helper.rb
    invoke    test_unit
    invoke  jbuilder
    create    app/views/users/index.json.jbuilder
    create    app/views/users/show.json.jbuilder
    create    app/views/users/_user.json.jbuilder

Choose scaffold template of theme

There are two templates automatically generated: default and admin

To choose default template, run:

rails g scaffold_controller User --theme=my_theme --theme-scaffold=default

To choose admin template, run:

rails g scaffold_controller User --theme=my_theme --theme-scaffold=admin

--theme-scaffold=default is default value if --theme-scaffold is not provided

Customize theme_my_theme in your Rails project

In your Rails project, if you feel theme_my_theme is not perfect, and want to make some changes to it only affect current Rails project, instead of all Rails projects which are using gem theme_my_theme, now you can do this:

$ rails g theme_my_theme:copy_assets

     exist  app/assets/themes
    create  app/assets/themes/my_theme/application.css
    create  app/assets/themes/my_theme/application.js

$ rails g theme_my_theme:copy_views
    create  app/themes/my_theme
    create  app/themes/my_theme/layouts/.gitkeep
    create  app/themes/my_theme/layouts/application.html.erb
    create  lib/templates/erb/scaffold/my_theme/admin/_form.html.erb
    create  lib/templates/erb/scaffold/my_theme/admin/edit.html.erb
    create  lib/templates/erb/scaffold/my_theme/admin/index.html.erb
    create  lib/templates/erb/scaffold/my_theme/admin/new.html.erb
    create  lib/templates/erb/scaffold/my_theme/admin/show.html.erb
    create  lib/templates/erb/scaffold/my_theme/default/_form.html.erb
    create  lib/templates/erb/scaffold/my_theme/default/edit.html.erb
    create  lib/templates/erb/scaffold/my_theme/default/index.html.erb
    create  lib/templates/erb/scaffold/my_theme/default/new.html.erb
    create  lib/templates/erb/scaffold/my_theme/default/show.html.erb

Set theme_my_theme as default theme

If you feel each time to generate scaffold controller has to provide --theme=my_theme is annoying, now you can set a default value like this:

in config/application.rb, add config.generators.theme = :my_theme

module TestTheme
  class Application < Rails::Application

    ....

    config.generators.theme = :my_theme

    ...

  end
end