Редактирование: Шаблон:ColorPaletteStyles (раздел)

= Что это? =
Вариант шаблона [[ColorPalette]] но для использования вместе с классами. <br>
Он в отличии от вышеупомянутого шаблона, возвращает сразу все цвета в виде CSS переменных, что позволяет более тонко использовать цвета но уже в CSS.

=== В чём её преимущество? ===
В отличии от [[ColorPalette]], этот шаблон вставляет сразу набор CSS переменных сразу же обёрнутых в `style=""`, что минимизирует инлайн стили и позволяет лишь 1 раз использовать шаблон для указания цвета, вместо указания цвета для каждого CSS свойства.

Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам! <br>
Использование <nowiki>{{ColorPalette|Civilian}}</nowiki><br>
Вернёт следующий код:
<syntaxhighlight lang="html">
--tmp-100: var(--civilian-opaque);
--tmp-75: var(--civilian-primary);
--tmp-50: var(--civilian-secondary);
--tmp-25: var(--civilian-light);
--tmp-10: var(--civilian-transparent);
</syntaxhighlight>

Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.<br>
Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css

=== С какой целью это сделано? === 
Исходя из всего вышеописанного, вы уже могли сделать некоторые выводи, но подытожим.<br>
Этот шаблон позволяет:
* Держать вёрстку шаблона в чистоте
* Тонко стилизовать шаблон с помощью <code>TemplateStyles</code>, так как все цвета доступны в виде переменных
* Сохранять преимущества [[ColorPalette]], позволяя делать шаблоны с возможностью смены цвета и сохраняя совместимость со светлой темой

=== Как использовать? ===
При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:
<syntaxhighlight lang="html">
<div class="wrapper" style="{{ColorPaletteStyles|Civilian}};">
  <span class="example-text">Обычный текст</span>
</div>
</syntaxhighlight>

Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице <code>Шаблон:Notice</code><br>
Нам нужно создать страницу <code>Шаблон:Notice/styles.css</code>, это '''ОБЯЗАТЕЛЬНО'''<br>
После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже:
<syntaxhighlight lang="html">
<templatestyles src="Notice/styles.css" />
<div class="notice" style="{{ColorPaletteStyles|Cargo}};">
  <span class="notice-text">Обычный текст</span>
</div>
</syntaxhighlight>

Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.<br>
Теперь же, на странице стилей мы можем... стилизовать наш шаблон:
<syntaxhighlight lang="css">
.notice {
  background-color: var(--tmp-75);
  border: 1px solid var(--tmp-25);
}

.notice-text {
  color: var(--color-text); /* Эта переменная создана в самом скине */
}
</syntaxhighlight>