Создание динамических цветовых схем в React

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

В этой статье мы рассмотрим, как использовать функцию getContrastYIQ() для динамического создания цветовых схем на основе цвета фона в проекте React. Мы также обсудим, как преобразовать шестнадцатеричные цвета в формат RGB с помощью функции hexToRgb(), которая используется функцией getContrastYIQ().

Что такое getContrastYIQ()?

getContrastYIQ() — это функция, которая принимает шестнадцатеричное значение цвета в качестве входных данных и возвращает значение «светлый» или «темный», в зависимости от воспринимаемой яркости цвета. Это определяется с помощью формулы, которая вычисляет значение YIQ (яркость) цвета, которое затем сравнивается с пороговым значением, чтобы определить, является ли цвет светлым или темным.

Вот код для getContrastYIQ():

export const getContrastYIQ = (hex: string): BackgroundTypes => {
  const rgb = hexToRgb(hex);
  const modifyRgb: Array<string> = rgb
    ? rgb
        .substring(4, rgb.length - 1)
        .replace(/ /g, '')
        .split(',')
    : [];
  const yiq: number = modifyRgb?.length
    ? (Number(modifyRgb[0]) * 299 + Number(modifyRgb[1]) * 587 + Number(modifyRgb[2]) * 114) / 1000
    : 0;
  return yiq >= 128 ? BackgroundTypes.Light : BackgroundTypes.Dark;
};

Функция сначала преобразует шестнадцатеричное значение цвета в формат RGB с помощью функции hexToRgb(). Затем он вычисляет значение YIQ цвета, умножая значения красного, зеленого и синего на заранее определенные константы и суммируя результаты. Если значение YIQ больше или равно 128, функция возвращает «светлый», в противном случае — «темный».

BackgroundTypes — это перечисление с двумя значениями: «Светлый» и «Темный», которые используются для обозначения воспринимаемой яркости цвета.

Преобразование шестнадцатеричных цветов в формат RGB

Как мы видели в предыдущем разделе, getContrastYIQ() требует, чтобы входной цвет был в формате RGB. Однако в CSS и других веб-технологиях цвета часто указываются в шестнадцатеричном формате. Чтобы преобразовать шестнадцатеричный цвет в формат RGB, мы можем использовать функцию hexToRgb(), которая принимает шестнадцатеричное значение цвета в качестве входных данных и возвращает значение цвета RGB в формате «rgb (R, G, B)».

Вот код для hexToRgb():

const hexToRgb = (hex: string): string | null => {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? `rgb(${hexToInt(result, 1)}, ${hexToInt(result, 2)},${hexToInt(result, 3)})`
    : null;
};

const hexToInt = (arr: RegExpExecArray, index: number): number => parseInt(arr[index], 16);

Применение цвета текста

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

Вот обновленный код для компонента Text, который применяет цвет текста на основе цвета фона:

import { getContrastYIQ } from './colorUtils';

interface TextProps {
  text: string;
  backgroundColor: string;
}

const Text = ({ text, backgroundColor }: TextProps) => {
  const textColor = getContrastYIQ(backgroundColor) === BackgroundTypes.Light ? '#000' : '#fff';

  return (
    <div style={{ backgroundColor, color: textColor }}>
      {text}
    </div>
  );
};

В приведенном выше коде мы используем функцию getContrastYIQ, чтобы определить, является ли цвет фона светлым или темным. Если фон светлый, мы устанавливаем переменную textColor в черный цвет (#000), а если фон темный, мы устанавливаем переменную textColor в белый цвет (#fff).

Затем мы применяем backgroundColor и textColor к реквизиту style элемента div.

Заключение

В этой статье мы узнали, как изменить цвет текста в зависимости от цвета фона в React. Мы начали с создания простого компонента Text, который принимает пропсы text и backgroundColor. Затем мы реализовали функцию getContrastYIQ, чтобы определить, является ли цвет фона светлым или темным. Наконец, мы применили цвет текста на основе цвета фона, используя функцию getContrastYIQ.

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