Шаблон:ColorPalette: различия между версиями
Aylong (обсуждение | вклад) Нет описания правки |
Aylong (обсуждение | вклад) |
||
Строка 171: | Строка 171: | ||
= Имеющиеся цвета = | = Имеющиеся цвета = | ||
Ниже перечислен список всех имеющихся на данный момент цветов. С фоном <b>Primary</b> | Ниже перечислен список всех имеющихся на данный момент цветов. С фоном <b>Primary</b> и обводкой <b>Opaque</b>.<br> | ||
Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает. | Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает. | ||
<br> | <br> |
Версия от 20:15, 21 мая 2024
Что это?
Это гибкая палитра цветов, сделанная специально для WIKI.
В ней достаточно цветов, дабы покрыть необходимость срать хардкоженными цветами.
В чём её преимущество?
В том что она, при использовании, вставляет CSS переменную.
Например, когда вы пишите {{ColorPalette|Cyan|Primary}}
Оно возвращает: var(--cyan-primary)
Это очень удобно использовать в шаблонах, так как в конечном итоге, достаточно будет лишь вписать название цвета.
С какой целью это сделано?
В первую очередь ради возможности сделать 2 темы: светлую и тёмную.
Во вторую очередь, ради удобства редакторов. Вам не нужно вручную подбирать цвета каждый раз, как используете какой-либо шаблон.
Все цвета уже сделаны за вас, и вам достаточно лишь выбрать нужный, и использовать его! Всё просто, не так ли?
НАСТОЯТЕЛЬНО рекомендуется использовать ТОЛЬКО шаблон ColorPalette, если вы хотите разукрасить свой шаблон.
В противном случае, он может быть нечитабельным на противоположной теме.
Как использовать?
Если вы создаёте шаблон, то в стилях, просто вызываете шаблон палитры, вот пример:
background-color: {{ColorPalette|{{{Color}}}|Primary}};
Таким образом, при использовании шаблона, вам достаточно ввести в поле Color нужный цвет, примерно вот так:
{| Имя шаблона | Text = Тестовый текст | Color = Security |}
У каждого цвета имеется 2 дополнительные вариации:
Opaque - Непрозрачный. Используется в основном у обводки (border)
Primary - Слегка прозрачный. Основной цвет на котором текст
Secondary - Полу-прозрачный. Дополнительный цвет, используется как правило в качестве фона
Использовать в стилях достаточно легко. Пример:
background-color: var(--security-primary)
Однако, если вы хотите покрасить текст, рекомендуется использовать CSS переменные. Их список вы найдёте нажав F12 и прокрутив в самый низ. Пример:
color: var(--color-white);
color: var(--color-olive);
Таким же образом, можете использовать вариации цветов, просто впишите нужную вместо Primary
Выбирайте вариации цвета для шаблона с умом! Ваш шаблон не должен быть вырвиглазным на одной теме, но нормальным на другой.
Если же не получается сделать с имеющимися вариациями так, чтобы шаблон хорошо смотрелся на обоих темах, обратитесь в дискорд, скорее всего требуется точечная настройка переменной цвета для определённой темы.
Имеющиеся цвета
Ниже перечислен список всех имеющихся на данный момент цветов. С фоном Primary и обводкой Opaque.
Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает.