Настройте свой веб-сайт

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

За последние пару проектов в моей школе я пробовал несколько разных вариантов того, как будет выглядеть кнопка темного режима.

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

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

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

Добавление кнопки с помощью ReactJS

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

.dark {
color: #dcdcdc;
background-color: #292929; 
}

Этот стиль — то, что мы собираемся переключать. По сути, мы собираемся создать часть состояния (isClicked) как логическое значение.

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

В функции мы также собираемся захватить все тело нашего HTML-документа, вызвав

let element = document.body;

И после этого мы дадим ему «темное» имя класса при вызове функции

element.classList.toggle(“dark”)

Затем мы создадим кнопку в нашем возврате, это для того, чтобы при нажатии кнопки она могла запустить нашу функцию, которая изменит состояние (isClicked), захватит тело из полного HTML-документа и даст телу имя класса «темный».

<button className="dark-mode-btn" onClick={myFunction}>{isClicked ? "☾" : "☼"}</button>

И вот! Ваша кнопка темного режима нажата и готова!

Темный режим со встроенным стилем

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

Здесь мы можем начать с строки 16, это вся функциональность и, честно говоря, проще, чем предыдущая. Мы можем просто создать тернарный оператор, в котором мы проверяем значение isClicked и меняем его, запуская функцию.

Я не добавлял код, указанный выше, но все, что нужно сделать, это добавить эту кнопку:

<button onClick={darkMode}> Click for Dark Mode </button>

И это так же просто! Теперь у вас есть два варианта создания разных кнопок темного режима в React.

Как вы заметили, я включил пользовательский цвет в строки 11 и 12, чтобы дать пользователю возможность изменить цвет позже. Вы можете добавить форму или ввод, чтобы изменить эту цветовую переменную. Существует бесконечное количество идей, как сделать кнопку и настроить сайт по своему усмотрению. Надеюсь, вам понравится ваш обновленный проект!