Question

To be brief:

application.css

/*
 *= require_self
 *= require_tree .
 *= require vendor
*/

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

and vendor/assets$ tree

.
└── stylesheets
    ├── ui-themes
    │   ├── smoothness
    │   │   ├── images
    │   │   │   ├── ui-bg_flat_0_aaaaaa_40x100.png
    │   │   │   ├── ui-bg_flat_75_ffffff_40x100.png
    │   │   │   ├── ui-bg_glass_55_fbf9ee_1x400.png
    │   │   │   ├── ui-bg_glass_65_ffffff_1x400.png
    │   │   │   ├── ui-bg_glass_75_dadada_1x400.png
    │   │   │   ├── ui-bg_glass_75_e6e6e6_1x400.png
    │   │   │   ├── ui-bg_glass_95_fef1ec_1x400.png
    │   │   │   ├── ui-bg_highlight-soft_75_cccccc_1x100.png
    │   │   │   ├── ui-icons_222222_256x240.png
    │   │   │   ├── ui-icons_2e83ff_256x240.png
    │   │   │   ├── ui-icons_454545_256x240.png
    │   │   │   ├── ui-icons_888888_256x240.png
    │   │   │   └── ui-icons_cd0a0a_256x240.png
    │   │   └── jquery-ui-1.8.16.custom.css
    │   └── trontastic
    │       ├── images
    │       │   ├── ui-bg_diagonals-small_50_262626_40x40.png
    │       │   ├── ui-bg_flat_0_303030_40x100.png
    │       │   ├── ui-bg_flat_0_4c4c4c_40x100.png
    │       │   ├── ui-bg_glass_40_0a0a0a_1x400.png
    │       │   ├── ui-bg_glass_55_f1fbe5_1x400.png
    │       │   ├── ui-bg_glass_60_000000_1x400.png
    │       │   ├── ui-bg_gloss-wave_55_000000_500x100.png
    │       │   ├── ui-bg_gloss-wave_85_9fda58_500x100.png
    │       │   ├── ui-bg_gloss-wave_95_f6ecd5_500x100.png
    │       │   ├── ui-icons_000000_256x240.png
    │       │   ├── ui-icons_1f1f1f_256x240.png
    │       │   ├── ui-icons_9fda58_256x240.png
    │       │   ├── ui-icons_b8ec79_256x240.png
    │       │   ├── ui-icons_cd0a0a_256x240.png
    │       │   └── ui-icons_ffffff_256x240.png
    │       └── jquery-ui-1.8.16.custom.css
    └── vendor.css.erb

Then my problem is how to dynamic load jquery theme css through params[:theme], i tried

/*
*= require "ui-themes/<%= params[:theme] %>/jquery-ui-1.8.16.custom"
*
*/

in vendor.css.erb, but not lucky.

thanks for any help.

Answer 1

1. solution, include all possible themes in your css file, but scope them, i.e. nest all rules under a distinct body id (or class) e.g.
   #theme-1 ui-widget-... { .. }
   etc…
   then switch the id of your body tag dynamically

2. solution make an own css for every theme (each also including your other styles), add those files to config.assets.precompile in your config/environments/production.rb, disable the hash cache buster suffix (there is a question here at stack overflow how to do this) and then switch stylesheets on your server side (in your layout) by param