Версия от 10:19, 15 мая 2025

Что это?

Вариант шаблона ColorPalette но для использования вместе с классами.
Он в отличии от вышеупомянутого шаблона, возвращает сразу все цвета в виде CSS переменных, что позволяет более тонко использовать цвета но уже в CSS.

В чём её преимущество?

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

Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам!
Использование {{ColorPalette|Civilian|example}}
Вернёт следующий код:

style="
--example-opaque: var(--civilian-opaque);
--example-primary: var(--civilian-primary);
--example-secondary: var(--civilian-secondary);
--example-light: var(--civilian-light);
--example-transparent: var(--civilian-transparent);
"

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

С какой целью это сделано?

Исходя из всего вышеописанного, вы уже могли сделать некоторые выводи, но подытожим.
Этот шаблон позволяет:

Держать вёрстку шаблона в чистоте
Тонко стилизовать шаблон с помощью TemplateStyles, так как все цвета доступны в виде переменных
Сохранять преимущества ColorPalette, позволяя делать шаблоны с возможностью смены цвета и сохраняя совместимость со светлой темой

Как использовать?

При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:

<div class="wrapper" {{ColorPaletteStyles|Civilian|example}}>
  <span class="example-text">Обычный текст</span>
</div>

Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице Шаблон:Notice
Нам нужно создать страницу Шаблон:Notice/styles.css, это ОБЯЗАТЕЛЬНО
После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже:

<templatestyles src="Notice/styles.css" />
<div class="notice" {{ColorPaletteStyles|Cargo|notice}}>
  <span class="notice-text">Обычный текст</span>
</div>

Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.
Теперь же, на странице стилей мы можем... стилизовать наш шаблон:

.notice {
  background-color: var(--notice-primary);
  border: 1px solid var(--notice-light);
}

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

Имеющиеся цвета

См. ColorPalette

@@ Строка 193: / Строка 193: @@
 Использование <nowiki>{{ColorPalette|Civilian|example}}</nowiki><br>
 Вернёт следующий код:
-<pre>
+<syntaxhighlight lang="html">
 style="
 --example-opaque: var(--civilian-opaque);
@@ Строка 201: / Строка 201: @@
 --example-transparent: var(--civilian-transparent);
 "
-</pre>
+</syntaxhighlight>
 Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.<br>
 Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css
@@ Строка 214: / Строка 215: @@
 === Как использовать? ===
 При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:
-<pre><nowiki>
+<syntaxhighlight lang="html">
 <div class="wrapper" {{ColorPaletteStyles|Civilian|example}}>
    <span class="example-text">Обычный текст</span>
 </div>
-</nowiki></pre>
+</syntaxhighlight>
 Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице <code>Шаблон:Notice</code><br>
 Нам нужно создать страницу <code>Шаблон:Notice/styles.css</code>, это '''ОБЯЗАТЕЛЬНО'''<br>
 После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже:
-<pre><nowiki>
+<syntaxhighlight lang="html">
 <templatestyles src="Notice/styles.css" />
 <div class="notice" {{ColorPaletteStyles|Cargo|notice}}>
    <span class="notice-text">Обычный текст</span>
 </div>
-</nowiki></pre>
+</syntaxhighlight>
 Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.<br>
 Теперь же, на странице стилей мы можем... стилизовать наш шаблон:
-<pre><nowiki>
+<syntaxhighlight lang="css">
 .notice {
    background-color: var(--notice-primary);
@@ Строка 241: / Строка 242: @@
    color: var(--color-text); /* Эта переменная создана в самом скине */
 }
-</nowiki></pre>
+</syntaxhighlight>
 = Имеющиеся цвета =
 См. [[ColorPalette#Имеющиеся_цвета|ColorPalette]]