Темы с тегами — обычное дело в блогах. Простая текстовая метка прекрасно работает, но я хотел немного оживить ее. Конечно с цветами!

Давайте дадим каждому тегу свой цвет. А поскольку мы разработчики, давайте сделаем это в коде!

Каждый раз, когда ваш пользователь должен что-то прочитать, это небольшое трение. UX-дизайнеры знают это — они годами обходили текстовые метки с помощью значков. Моя идея заключалась в том, что если кто-то ищет статью о MacOS, которую я написал, ему не нужно на самом деле читать теги. Просто прокрутите страницу в поисках ярко-красного пятна, что намного проще!

Превратить текст в число

Мы черпаем вдохновение из техники, известной как хеширование.

Хэширование — это процесс преобразования любого заданного ключа или строки символов в другое значение.

В нашем случае вводом является строка, а выводом должно быть число. Вы можете получить существующую реализацию хеш-функции. Но вы также можете написать свой собственный для большего контроля. Тот, который я использую, выглядит так:

function hash(text: string): number {
    if (!text) return 0

    let state = 13 // prime
    for (let index = 0; index < text.length; index++) {
        const charCode: number = text.charCodeAt(index);
        state += state * charCode;
        // Prevent overflow by %
        state %= (charCode * 3109) // prime
    }
    return state;
}

Цель этого процесса — получить случайно выглядящее число для ввода текста. Затем вы можете использовать это значение для создания цвета с помощью функции hsv или rgb. Или как индекс для выбора цвета из массива цветов!

Не все хэш-функции одинаковы

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

Например, очень популярная JS-реализация хеш-функции Java не очень хорошо работает для выбора из небольшого массива цветов. Хорошо видны узоры — яркие столбцы и ряды одного цвета — что не очень хорошо.

Моя собственная хеш-функция (упомянутая выше), кажется, обеспечивает большее разнообразие цветов. Это показывает, что создание собственной реализации может быть того стоит! Вы можете поиграть с ней и настроить по своему вкусу :)

Выбранные вручную и сгенерированные цвета

Мы здесь на распутье. Вы либо выполняете полную процедуру и генерируете свои цвета, либо просто выбираете из выбранного набора цветов.

Придумать красивые цвета — непростая задача. То, что выглядит хорошо для глаз, нелегко описать уравнением. Люди ежедневно придумывают новые палитры, а большие библиотеки CSS также создают свои цвета вручную!

Мы выбрали все стандартные цвета Tailwind вручную, тщательно сбалансировали их на глаз и протестировали в реальных проектах, чтобы убедиться, что они нас устраивают.

Существуют СУЩЕСТВУЮТ способы создания цветов

Вы просто должны быть умны об этом. Измените цветовое пространство по своему желанию и сузьте фактический выбор цвета. Выбор буквально любого цвета не работает; большая часть всех возможных цветов близка к черному. Нам не интересен весь этот мусор цвета грязи.

Вам на самом деле нужны яркие, живые цвета. Вы можете выбрать яркие цвета, используя цветовую модель HSV. Ограничьте насыщенность и значение высокими значениями и просто управляйте элементом оттенок.

Здесь мы сталкиваемся с другой проблемой. Большая часть цветового пространства — синий или зеленый! Это означает, что ваши процедурные цвета будут в основном синеватыми и зеленоватыми. Ваши шансы получить красивый желтый или оранжевый цвет невелики 🥲

Решение? Перейти к подходу палитры

Это был бы мой совет. Компромисс иногда действительно лучший вариант. Вы управляете своими цветами и можете гарантировать, что желтых будет столько же, сколько синих!

Я слышу, как вы: "Нежелание подбирать цвета вручную привело нас сюда в первую очередь...", и вы правы. Разумеется, мы будем использовать готовую палитру. Просто осмотритесь, выберите CSS-фреймворк с красивой цветовой схемой и украдите его!!

Я сам украл свои цвета из Tailwind — все светлые варианты от 400 до примерно 700 темноты. Они надежно хранятся в массиве, и я просто беру один, когда мне нужно!

Создание фактического тега

Как только вы выбрали свой цвет, вы находитесь на финишной прямой. Просто установите его как background-color вашего тега в CSS или встроенном стиле.

Если вы собираетесь использовать белый текст (как и я), я также рекомендую придать тексту вашего тега небольшую тень. Это делает его более читаемым и лучше выделяется на ярких цветах! Вся моя настройка тега выглядит следующим образом:

function tagColor(text) {
  return palette[hash(text) % palette.length];
}
// ...
<span 
  style={{ background: tagColor(text), textShadow: "1px 1px 0px black" }}
>
  {text}
</span>

Теперь, когда вы добавляете тег к своей новой статье, он красиво окрашивается!

Если вы узнали что-то новое из этой статьи, хлопайте 👏 или подписывайтесь на канал! Спасибо за прочтение! ❤️

Первоначально опубликовано на https://www.vojtechstruhar.com.