What is the most efficient way of developing multiple themes for a system of sites? 

Most of my experience is applying the jQuery widgets and coding their interaction, not styling them. Also I only used one theme and had no branding or second opinions to consider.

I have the online tool in the past, which has been good for my basic needs. This time it is more complicated.

I'm not asking for how its done in detail, more like how the workflow would look like and how I should organize the produce (custom images and such). I want to avoid running back and forth and redo things due to conflicts arising.

Themes which would be good to have

• Basic site/product branded theme
• High contrast branded theme for visually impaired
• Alternate color-theme for product 1
• Alternate color-theme for product 2
• Alternate color-theme for product 3
• Alternate color-theme for product 4
• Alternate color-theme for product ...
• Future theme for rebranding the basic site/product theme (e.g. when "flat" goes out of fashion ^^)

Some subquestions in this topic: 

1. How should I manage different platforms? There is the mobile UI component. Should I begin with the basic design and then do that or should I design for everything at the same time to avoid conflicts?

2. Should I always use the jQuery web based design tool or should I go for a offline tinkering and css editing? Or perhaps is that prone to generate bugs and errors?

3. I want to create a library that can be altered somewhat easily later on, so that the next enthusiast can start of where I left and edit stuff.

4. Is there a list (to use as checklist) of all the pngs which I would have to edit to fit my theme. I can find lists of widgets but not individual icons and their paths.

5. What does a good testing environment look like? I guess I could use the test page which comes with the product, but that does not include the sites own branded logos etc.

6. Should I start with drawing all the elements in inkscape and then move on to editing the pngs?