Помните: элементы могут иметь несколько классов стилей. Поскольку макет остается статичным и будет отделен от раскраски, необходимо определить классы для макета и цвета отдельно, в совершенно разных файлах.
Итак, что вы хотите сделать для тем, это определить несколько цветов в отдельном файле CSS следующим образом:
.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; }
Вы можете добавить больше цветов, но вы поняли идею. Затем в своем HTML вы добавляете эти классы к элементам в дополнение к классам макета. Например, используя эти классы, вы можете стилизовать кнопки навигации для StackOverflow следующим образом:
<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>
Очевидно, что эти цвета созданы и не будут работать вместе, но в этом вся прелесть этого набора. Это позволяет легко играть и настраивать цвета, поскольку вам не нужно определять один и тот же цвет повсюду. Вы настраиваете его один раз, а затем нужно всего лишь внести очень небольшое количество изменений, чтобы полностью перекрасить сайт.
Недостатком является то, что вы ограничены. Например, используя размещенный мною HTML, вы не могли перейти и сделать кнопки, отличающиеся от всего остального, просто изменив файл CSS, потому что мы не настроили для него «ловушку». Но вы можете изменить этот уродливый оранжевый цвет, который они используют здесь, по всей доске, с помощью одного простого редактирования.