Цветовая схема сайта

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

Цветовая схема сайта — это все цвета, которые используются при вёрстке, для воплощения дизайнерской мысли. Это моё личное понимание. Вы же можете перефразировать определение как пожелаете.

Цветовая схема сайта и как её изменить

Порядок действий

 

Вопрос о смене цветовой схемы сайта весьма интересный. Я сейчас не говорю о специальных условиях, при которых цвет текста окрасится в красный, нет. Смена цвета определённых элементов сайта весьма актуальна, например, для поддержки слабовидящий посетителей. Не все же люди видят так хорошо, как большинство из вас. Посудите сами, даже в ОС Windows есть контрастная цветовая схема, а большинство сайтов не реализовали такую возможность.

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

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

к оглавлению ↑

Реальный пример

Вот что у меня получилось (если код не отобразился, то подождите несколько секунд):

See the Pen xyPRdX by SpCreator (@SpCreator) on CodePen.

Порядок действий

Первым делом мы сделаем простую html разметку состоящую из: главного блока с заголовком и текстом, а также кнопок. Каждому элементу я прописал идентификатор.

Обратите внимание, что скрипт JS подключаем методом defer. О defer и async можете почитать самостоятельно.

Далее, мы прописываем стили блокам. После создаём скрипт.

В скрипте каждой кнопке я прописал свойство onclick, и повесил функцию по изменению цветовой схемы сайта с использованием свойства style. Почему я прописал каждому блоку идентификатор? Да, я знаю о методе getElementsByTagName, querySelector и прочем. Моя главная задача показать вам как можно проще. И если мы начнём выбирать объект, то это ещё минимум четыре строчки кода.

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

Если у вас появились вопросы, то задавайте их в комментариях.

Советую вам заглянуть на, пожалуй, самый лучший ресурс по изучению Java Script: тык. Всем хорошего настроения и до новых статей!

Делитесь полезной информацией с друзьями:

Сергей

Привет! Моё имя Сергей, и я — автор этого блога. Рад, что вас заинтересовал мой проект. Не забывайте оставлять комментарии к статьям. По всем другим вопросам обращайтесь через контактную форму на странице "Контакты".

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вверх