Remember: elements can have multiple style classes. Since the layout remains static and will be separate from the coloring, you want to define classes for layout and color separately, in completely different files.
So what you want to do for themes is define a few colors in a separate css file like this:
.DefaultBackgroundColor { background-color: white; }
.PrimaryColor { background-color: #123456; }
.PrimaryAsForeground { color: #123456; }
.AccentColor { background-color: #654321; }
.AccentAsForeground { color: #654321; }
.ComplementColor { background-color: #333333; }
.ComplementAsForeground { color: #333333; }
.DefaultTextColor { color:black; }
.HighlightTextColor { color:black; font-style:bold; }
.ComplementTextColor { color:white; }
You can add more colors, but you get the idea. Then, in your HTML you add those classes to elements in addition to layout classes. For example, using these classes you might style the Nav buttons for StackOverflow like this:
<div class="nav ComplementTextColor">
<ul class="primarynav">
<li class="PrimaryColor"><a href="/questions">Questions</a></li> <!-- selected -->
<li class="ComplementColor"><a href="/tags">Tags</a></li>
<li class="ComplementColor"><a href="/users">Users</a></li>
<li class="ComplementColor"><a href="/badges">Badges</a></li>
<li class="ComplementColor"><a href="/unanswered">Unanswered</a></li>
</ul>
</div>
Obviously those colors are made up and won't work together, but that's the beauty of this set up. This makes it real easy to play with and tweak your colors, since you don't have to define the same color all over the place. You set it up once and then only need to make a very small number of changes to completely re-color the site.
The downside is you are limited. Using the html I posted, for example, you couldn't then go and make the buttons here a different color from everything else just by changing the css file, because we didn't set up 'hook' for it. But you could change that ugly orange color they user here across the board with one simple edit.