Редактирование: ColorPaletteStyles

<includeonly>{{#switch: {{{1}}}
| Civilian =
  --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)
| Medical =
  --tmp-100: var(--medical-opaque);
  --tmp-75: var(--medical-primary);
  --tmp-50: var(--medical-secondary);
  --tmp-25: var(--medical-light);
  --tmp-10: var(--medical-transparent)
| Supply =
  --tmp-100: var(--supply-opaque);
  --tmp-75: var(--supply-primary);
  --tmp-50: var(--supply-secondary);
  --tmp-25: var(--supply-light);
  --tmp-10: var(--supply-transparent)
| Science =
  --tmp-100: var(--science-opaque);
  --tmp-75: var(--science-primary);
  --tmp-50: var(--science-secondary);
  --tmp-25: var(--science-light);
  --tmp-10: var(--science-transparent)
| Engineering =
  --tmp-100: var(--engineer-opaque);
  --tmp-75: var(--engineer-primary);
  --tmp-50: var(--engineer-secondary);
  --tmp-25: var(--engineer-light);
  --tmp-10: var(--engineer-transparent)
| Security =
  --tmp-100: var(--security-opaque);
  --tmp-75: var(--security-primary);
  --tmp-50: var(--security-secondary);
  --tmp-25: var(--security-light);
  --tmp-10: var(--security-transparent)
| Antag =
  --tmp-100: var(--antag-opaque);
  --tmp-75: var(--antag-primary);
  --tmp-50: var(--antag-secondary);
  --tmp-25: var(--antag-light);
  --tmp-10: var(--antag-transparent)
| Legal =
  --tmp-100: var(--legal-opaque);
  --tmp-75: var(--legal-primary);
  --tmp-50: var(--legal-secondary);
  --tmp-25: var(--legal-light);
  --tmp-10: var(--legal-transparent)
| Command =
  --tmp-100: var(--command-opaque);
  --tmp-75: var(--command-primary);
  --tmp-50: var(--command-secondary);
  --tmp-25: var(--command-light);
  --tmp-10: var(--command-transparent)
| Synthetic =
  --tmp-100: var(--synthetic-opaque);
  --tmp-75: var(--synthetic-primary);
  --tmp-50: var(--synthetic-secondary);
  --tmp-25: var(--synthetic-light);
  --tmp-10: var(--synthetic-transparent)
| CentCom =
  --tmp-100: var(--centcom-opaque);
  --tmp-75: var(--centcom-primary);
  --tmp-50: var(--centcom-secondary);
  --tmp-25: var(--centcom-light);
  --tmp-10: var(--centcom-transparent)
| Special =
  --tmp-100: var(--special-opaque);
  --tmp-75: var(--special-primary);
  --tmp-50: var(--special-secondary);
  --tmp-25: var(--special-light);
  --tmp-10: var(--special-transparent)
| Cyan =
  --tmp-100: var(--cyan-opaque);
  --tmp-75: var(--cyan-primary);
  --tmp-50: var(--cyan-secondary);
  --tmp-25: var(--cyan-light);
  --tmp-10: var(--cyan-transparent)
| Blue =
  --tmp-100: var(--blue-opaque);
  --tmp-75: var(--blue-primary);
  --tmp-50: var(--blue-secondary);
  --tmp-25: var(--blue-light);
  --tmp-10: var(--blue-transparent)
| Green =
  --tmp-100: var(--green-opaque);
  --tmp-75: var(--green-primary);
  --tmp-50: var(--green-secondary);
  --tmp-25: var(--green-light);
  --tmp-10: var(--green-transparent)
| Yellow =
  --tmp-100: var(--yellow-opaque);
  --tmp-75: var(--yellow-primary);
  --tmp-50: var(--yellow-secondary);
  --tmp-25: var(--yellow-light);
  --tmp-10: var(--yellow-transparent)
| Red =
  --tmp-100: var(--red-opaque);
  --tmp-75: var(--red-primary);
  --tmp-50: var(--red-secondary);
  --tmp-25: var(--red-light);
  --tmp-10: var(--red-transparent)
| Pink =
  --tmp-100: var(--pink-opaque);
  --tmp-75: var(--pink-primary);
  --tmp-50: var(--pink-secondary);
  --tmp-25: var(--pink-light);
  --tmp-10: var(--pink-transparent)
| Brown =
  --tmp-100: var(--brown-opaque);
  --tmp-75: var(--brown-primary);
  --tmp-50: var(--brown-secondary);
  --tmp-25: var(--brown-light);
  --tmp-10: var(--brown-transparent)
| Lavaland =
  --tmp-100: var(--lavaland-opaque);
  --tmp-75: var(--lavaland-primary);
  --tmp-50: var(--lavaland-secondary);
  --tmp-25: var(--lavaland-light);
  --tmp-10: var(--lavaland-transparent)
| Cultist =
  --tmp-100: var(--cult-opaque);
  --tmp-75: var(--cult-primary);
  --tmp-50: var(--cult-secondary);
  --tmp-25: var(--cult-light);
  --tmp-10: var(--cult-transparent)
| Ratvar =
  --tmp-100: var(--ratvar-opaque);
  --tmp-75: var(--ratvar-primary);
  --tmp-50: var(--ratvar-secondary);
  --tmp-25: var(--ratvar-light);
  --tmp-10: var(--ratvar-transparent)
| Wizard =
  --tmp-100: var(--wizard-opaque);
  --tmp-75: var(--wizard-primary);
  --tmp-50: var(--wizard-secondary);
  --tmp-25: var(--wizard-light);
  --tmp-10: var(--wizard-transparent)
| Black =
  --tmp-100: var(--black-opaque);
  --tmp-75: var(--black-primary);
  --tmp-50: var(--black-secondary);
  --tmp-25: var(--black-light);
  --tmp-10: var(--black-transparent)
| Gray =
  --tmp-100: var(--gray-opaque);
  --tmp-75: var(--gray-primary);
  --tmp-50: var(--gray-secondary);
  --tmp-25: var(--gray-light);
  --tmp-10: var(--gray-transparent)
| #default =
  --tmp-100: hsl(var(--primary-hue), 40%, var(--primary-lightness));
  --tmp-75: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75);
  --tmp-50: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.5);
  --tmp-25: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.25);
  --tmp-10: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.1)
}}</includeonly><noinclude>
= Что это? =
Вариант шаблона [[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>

= Имеющиеся цвета =
См. [[ColorPalette#Имеющиеся_цвета|ColorPalette]]