I want to provide different UI theme based on user who logged in. For that I have came up with following 2 options:

  • Create separate files for all themes duplicating all the common CSS. This way I can easily do some login in scripting and get the required CSS file. But I end up having same CSS classes code in many different theme files. This is real pain when you have to change something common to all files.
  • Make a common file and separate theme files containing only theme specific CSS. This way everytime I need to load 2 CSS files, one - common file by default and then load theme specific file to override default CSS classes.

If there is other simple and easy way to do it then please do let me know.

  • Without detailed information difficult to say. But in general option two would be the better way. Maybe have a look at other themed solutions like jQuery UI ThemeRoller. Jul 17 '14 at 9:21

Definitely go with option 2, it will be much easier to maintain. You could structure your CSS something like this:


I have a similar functionality implemented on my web site. Instead of giving each user a stylesheet, I have several predefined stylesheets that the user can switch between. I use JavaScript to change between stylesheets and a cookie to save their preferences across the site.

Another thing I did is in my equivalent of default.css, I have only the code that is the same across styles, and have an additional stylesheet that is applied by default (e.g. defaultuser.css).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.