Текущая версия от 11:48, 2 января 2026

Что это?

Палитра цветов, упрощает разработку редакторам вики и приводит все используемые в шаблонах цвета к единой форме, от чего вид страниц становится более лаконичным и приятным глазу, а в самом коде становится удобнее ориентироваться, за счёт упрощённой читаемости.

Преимущества

Внедряет CSS-переменные вместо хардкода цветов.
Поддерживает светлую и тёмную темы автоматически.
Имеет более простую и читаемую структуру.

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

В шаблонах:

background-color: {{ColorPalette|Red|Primary}};
border: 1px solid {{ColorPalette|Blue|Opaque}};
color: {{ColorPalette|Text-Dark}};

Пример вызова:

Для вызова в шаблонах: {{ColorPalette|Cyan|Light}}

Вызов происходит в формате: {Имя шаблона|Цвет|Вариация}

Также вариант для вызова в стилях: var(--cyan-light)

Вариации цветов

У каждого цвета есть 5 вариаций прозрачности:

Opaque - Непрозрачный (alpha: 1.0). Для обводки (border).
Primary - Основной (alpha: 0.8). Для фона с текстом.
Secondary - Вторичный (alpha: 0.5). Дополнительный цвет.
Light - Светлый (alpha: 0.2). Прозрачный фон.
Transparent - Прозрачный (alpha: 0.1). Едва заметный фон.

Цвета для текста

Для покраски текста рекомендуется использовать следующие цвета:

White - Белый цвет
Black-Solid - Чёрный цвет
Text-Light - Светлый текст (для тёмного фона)
Text-Dark - Тёмный текст (для светлого фона)

Таблица доступных цветов

Red

Opaque

Primary

Secondary

Light

Transparent

Blue

Opaque

Primary

Secondary

Light

Transparent

Green

Opaque

Primary

Secondary

Light

Transparent

Yellow

Opaque

Primary

Secondary

Light

Transparent

Cyan

Opaque

Primary

Secondary

Light

Transparent

Pink

Opaque

Primary

Secondary

Light

Transparent

Purple

Opaque

Primary

Secondary

Light

Transparent

Black

Opaque

Primary

Secondary

Light

Transparent

Gray

Opaque

Primary

Secondary

Light

Transparent

Примеры использования

Простой цветной блок:

<div style="background-color: {{ColorPalette|Blue|Primary}}; color: {{ColorPalette|Text-Light}}; padding: 10px;">
  Клоун, прекрати разбрасывать банановую кожуру офицерам под ноги!
</div>

Таблица с цветами:

{| style="border: 2px solid {{ColorPalette|Red|Opaque}};"
! style="background-color: {{ColorPalette|Red|Primary}};" | Заголовок
|-
| style="background-color: {{ColorPalette|Red|Light}};" | Содержимое
|}

@@ Строка 47: / Строка 47: @@
 | Light = var(--pink-light)
 | Transparent = var(--pink-transparent)
+}}
+| Purple =
+{{#switch: {{{2|Primary}}}
+| Opaque = var(--purple-opaque)
+| Primary = var(--purple-primary)
+| Secondary = var(--purple-secondary)
+| Light = var(--purple-light)
+| Transparent = var(--purple-transparent)
 }}
 | Black =
@@ Строка 118: / Строка 126: @@
 <div style="width: 150px;">
-'''Red (Красный)'''
+'''Red'''
 <div style="background-color: {{ColorPalette|Red|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
 <div style="background-color: {{ColorPalette|Red|Primary}}; padding: 10px; margin: 2px;">Primary</div>
@@ Строка 127: / Строка 135: @@
 <div style="width: 150px;">
-'''Blue (Синий)'''
+'''Blue'''
 <div style="background-color: {{ColorPalette|Blue|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
 <div style="background-color: {{ColorPalette|Blue|Primary}}; padding: 10px; margin: 2px;">Primary</div>
@@ Строка 136: / Строка 144: @@
 <div style="width: 150px;">
-'''Green (Зелёный)'''
+'''Green'''
 <div style="background-color: {{ColorPalette|Green|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
 <div style="background-color: {{ColorPalette|Green|Primary}}; padding: 10px; margin: 2px;">Primary</div>
@@ Строка 145: / Строка 153: @@
 <div style="width: 150px;">
-'''Yellow (Жёлтый)'''
+'''Yellow'''
 <div style="background-color: {{ColorPalette|Yellow|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
 <div style="background-color: {{ColorPalette|Yellow|Primary}}; padding: 10px; margin: 2px;">Primary</div>
@@ Строка 154: / Строка 162: @@
 <div style="width: 150px;">
-'''Cyan (Голубой)'''
+'''Cyan'''
 <div style="background-color: {{ColorPalette|Cyan|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
 <div style="background-color: {{ColorPalette|Cyan|Primary}}; padding: 10px; margin: 2px;">Primary</div>
@@ Строка 163: / Строка 171: @@
 <div style="width: 150px;">
-'''Pink (Розовый)'''
+'''Pink'''
 <div style="background-color: {{ColorPalette|Pink|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
 <div style="background-color: {{ColorPalette|Pink|Primary}}; padding: 10px; margin: 2px;">Primary</div>
@@ Строка 172: / Строка 180: @@
 <div style="width: 150px;">
-'''Black (Чёрный)'''
+'''Purple'''
+<div style="background-color: {{ColorPalette|Purple|Opaque}}; padding: 10px; margin: 2px; color: white;">Opaque</div>
+<div style="background-color: {{ColorPalette|Purple|Primary}}; padding: 10px; margin: 2px;">Primary</div>
+<div style="background-color: {{ColorPalette|Purple|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
+<div style="background-color: {{ColorPalette|Purple|Light}}; padding: 10px; margin: 2px;">Light</div>
+<div style="background-color: {{ColorPalette|Purple|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
+</div>
+<div style="width: 150px;">
+'''Black'''
 <div style="background-color: {{ColorPalette|Black|Opaque}}; color: white; padding: 10px; margin: 2px;">Opaque</div>
 <div style="background-color: {{ColorPalette|Black|Primary}}; color: white; padding: 10px; margin: 2px;">Primary</div>
@@ Строка 181: / Строка 198: @@
 <div style="width: 150px;">
-'''Gray (Серый)'''
+'''Gray'''
 <div style="background-color: {{ColorPalette|Gray|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
 <div style="background-color: {{ColorPalette|Gray|Primary}}; padding: 10px; margin: 2px;">Primary</div>