Как мы создали веб-приложение в React с темным режимом, которое учитывает системные настройки, но также имеет переопределение для сохранения настроек сайта.

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

Демонстрация приложения Виртуальная викторина https://virtualquiz.app.

Мы будем управлять темным режимом с помощью CSS и JavaScript с помощью хуков.

Давайте начнем с добавления некоторого CSS, чтобы установить цвета по умолчанию (светлый режим) и цвета темного режима, когда он включен.

Это установит цвет фона на темно-серый, а цвет текста на белый, когда включен темный режим. Вы можете использовать этот медиа-запрос, чтобы обернуть любой селектор css, чтобы переопределить настройку темного режима.

Это решает только первую проблему, которая заключается в том, чтобы включить темный режим на основе системных настроек. Чтобы позволить пользователям устанавливать предпочтения сайта, нам нужно добавить еще пару свойств css, которыми мы можем управлять с помощью JavaScript.

Теперь у нас есть это, мы можем переключать темный режим, используя dark-mode и light-mode.

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

Первое, что мы делаем, это проверяем системные предпочтения с помощью useMediaQuery('(prefers-color-scheme: dark)'), затем мы проверяем, установлены ли пользовательские предпочтения в localStorage с помощью prefersDarkModeOverride = darkModeOverride === ‘true'. Затем это значение используется для установки текущего состояния.

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

Второй хук useEffect определяет как изменение переопределения, так и изменение системных настроек, а затем переключает настройку темного режима.

Наконец, у нас есть функция переключения, которая возвращается вызывающему объекту вместе с текущим состоянием, которое сохраняет предпочтение в localStorage и переключает предпочтение.

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

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

Остальная часть нашей темной темы контролировалась темой Material UI, но вы можете запустить свою собственную тему, используя переменную darkModeEnabled и используя селектор css dark-mode и light-mode, где это необходимо.

Надеюсь, вы нашли эту статью полезной.