Реализация Dark Mode так же просто, как вызов переключения на ваших классах.
Вот простой пример, чтобы добавить Dark Mode в ваши приложения React. Вы также можете использовать эту же логику в своих приложениях JavaScript.
Создайте новое приложение React.
Создайте папку компонентов в папке SRC.
Создайте компонент с именем Привет.jsx Внутри Компоненты папка.
Ваша структура файла должна выглядеть как SRC> Компоненты> hello.jsx
Теперь внутри компонента hello.jsx мы будем делать пару вещей.
У нас будет кнопка, которая переключает наши классы темного режима. Мы также будем отслеживать, когда кнопка будет нажата, чтобы мы могли правильно обновить текст кнопки. то есть наша кнопка должна сказать «переключиться на режим света», когда мы находимся в темном режиме и наоборот.
Теперь давайте напишем наш обработчика функция Мы также хотим изменить цвет нашей кнопки в темном режиме.
Пока что наша страница выглядит ниже. Я использую шрифты Google, так что мой текст выглядит немного по -другому.
Теперь пришло время написать наши стили.
Мы будем писать наши основные стили в SCSS – это просто чище.
Во-первых, установите узлы, чтобы наши стили могли быть скомпилированы в CSS.
NPM Установите узлы
Создать styles.css Папка внутри папки SRC и импортируйте ее в наш компонент Hello.
Импорт “../styles/hello.scss”;
Я буду использовать цвета темы Twitter Dark Mode. С SCSS мы можем использовать имена переменных в нашей таблице стилей.
Теперь вот перед темным режимом.
И после темного режима …
Оригинал: “https://dev.to/debosthefirst/dark-mode-with-react-and-scss-ogi”