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

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

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

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

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

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

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

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Javascript в действии

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

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

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

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

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

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

Заключение

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

Автор: Nirazan Basnet

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

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

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

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

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

Метки:

Похожие статьи:

Комментарии Вконтакте: