Внедрить темный режим так же просто, как вызвать переключатель для ваших классов.
Вот простой пример добавления темного режима в ваши приложения React. Вы можете использовать ту же логику и в своих приложениях Javascript.
Создайте новое приложение для реагирования.
Создайте папку components в папке src.
Создайте компонент с именем Hello.jsx внутри этой папки компонентов.
Ваша файловая структура должна выглядеть как src › компоненты › Hello.jsx
Теперь внутри компонента Hello.jsx мы будем делать пару вещей.
У нас будет кнопка, которая включает и выключает наши классы темного режима . мы также будем отслеживать, когда кнопка была нажата, чтобы мы могли соответствующим образом обновить текст кнопки. то есть наша кнопка должна говорить «Переключиться в светлый режим», когда мы находимся в темном режиме, и наоборот.
Теперь давайте напишем нашу функцию handleDarkMode. Мы также хотим изменить цвет нашей кнопки в темном режиме.
Пока что наша страница выглядит так, как показано ниже. Я использую шрифты Google, поэтому мой текст выглядит немного иначе.
Теперь пришло время написать наши стили.
Мы будем писать наши самые основные стили в SCSS — это просто чище.
Во-первых, установите node-sass, чтобы наши стили можно было скомпилировать в css.
npm install node-sass
Создайте папку styles.css внутри папки src и импортируйте ее в наш компонент Hello.
import "../styles/Hello.scss";
Я буду использовать цвета темной темы твиттера. С помощью SCSS мы можем использовать имена переменных в нашей таблице стилей.
Теперь, вот перед темным режимом.
И после темного режима.
Ставьте аплодисменты, если это вам помогло.
