Как изменять цвета с помощью элемента ввода color и переменных CSS

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

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

:root { --font-size: 20px
}.test { font-size: var(--font-size)
}

С другой стороны, у нас есть <input type = color>, который определяет поле ввода палитры цветов. Оно отображает палитру цветов, из которой мы можем выбрать цвет, в затем передать его в качестве ввода. Пример:

<input type="color" name="favcolor" value="#FFFFF">

Элемент ввода color

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

Итак, давайте создадим тему пользовательского интерфейса.

Во-первых, нам нужно создать кнопки, например, мы можем использовать три элемента span.

<span data-bg-color="#b84130" data-color="#ffffff" style="background-color: #b84130"></span>
<span data-bg-color="#363d98" data-color="#ffffff" style="background-color: #363d98"></span>
<span data-bg-color="#FFD5CD" data-color="#333333" style="background-color: #FFD5CD"></span>

Теперь нам нужно сохранить значения цвета по умолчанию для этого мы используем атрибуты data-bg-color и data-color.

Для динамичных цветов

Чтобы получить определяемые пользователем цвета темы, мы используем элемент input с типом color. Это позволяет нам получить полнофункциональную палитру цветов.

<div> <label>Background:</label> <input class="input-color-picker" type="color" data-id="bg-color" name="Background">
</div><div> <label>Color:</label> <input class="input-color-picker" type="color" data-id="color" name="Color">
</div>

Настройка переменных CSS

Мы устанавливаем переменные CSS и их значения по умолчанию. Для этого мы используем псевдо-класс :root.

:root { --primary-bg-color: #400080; // Dark Blue Color --primary-color: #ffffff; // White Color
}

Мы установили две переменные primary-bg-color и primary-color. По умолчанию тема имеет темно-синий цвет фона и цвет текста — белый.

Использование CSS-переменных

Теперь, если мы хотим изменить background-color и color элемента, CSS выглядит следующим образом:

.hero { background: var(--primary-bg-color); color: var(--primary-color);
}

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

Javascript в действии

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

Во-первых, давайте создадим функцию обновления темы:

const handleThemeUpdate = (cssVars) => { const root = document.querySelector(':root'); const keys = Object.keys(cssVars); keys.forEach(key => { root.style.setProperty(key, cssVars[key]); });
}

Эта функция принимает объект в качестве параметра, и для каждого ключа обновляется соответствующая переменная CSS, определенная в псевдоклассе :root. Чтобы достичь этого, нам нужно определить объект таким образом, чтобы каждый ключ представлял имя переменной CSS, а каждое значение ключа представляло фактическое значение CSS, которое мы хотим применить.

Теперь нам нужно найти элементы и прикрепить обработчики событий:

const themeSwitchers = document.querySelectorAll('span');
const dynamicInputs = document.querySelectorAll('input.input-color-picker'); const handleThemeUpdate = (cssVars) => { const root = document.querySelector(':root'); const keys = Object.keys(cssVars); keys.forEach(key => { root.style.setProperty(key, cssVars[key]); }); } themeSwitchers.forEach((item) => { item.addEventListener('click', (e) => { const bgColor = e.target.getAttribute('data-bg-color') const color = e.target.getAttribute('data-color') handleThemeUpdate({ '--primary-bg-color': bgColor, '--primary-color': color }); $("input.input-color-picker[data-id='color']").val(color) $("input.input-color-picker[data-id='bg-color']").val(bgColor) }); }); dynamicInputs.forEach((item) => { item.addEventListener('input', (e) => { const cssPropName = `--primary-${e.target.getAttribute('data-id')}`; handleThemeUpdate({ [cssPropName]: e.target.value }); }); });

Теперь, когда пользователь нажимает на элемент span, значения атрибутов данных сохраняются и устанавливаются для соответствующих им переменных CSS.

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

Заключение

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

Автор: Nirazan Basnet

Источник: https://codeburst.io

Редакция: Команда webformyself.