Как добавить темный режим на сайт Nuxt.js с помощью @ nuxtjs / color-mode и tailwindCSS
Стремительно выросло количество приложений, использующих режим темного света. В большинстве современных приложений реализован темный режим. Если говорить дальше, темный режим довольно красив, а при правильном использовании он приятен для глаз.
В этой статье мы увидим, как создать темный режим в вашем проекте Nuxtjs. Мы также сделаем переключение между светлым и темным режимами.
Начало работы
Мы собираемся использовать пакет, известный как @ nuxt / color-mode. Этот пакет упростит переключение между светлым и темным режимами.
Это также сделает его доступным для нацеливания и обнаружения системных тем, а также для их рендеринга в нашем проекте.
Установка @ nuxt / color-mode
Мы можем установить его с помощью NPM или YARN, в зависимости от вашего предпочтительного менеджера пакетов.
NPM
npm i @nuxtjs/color-mode
ПРЯЖА
yarn add @nuxtjs/color-mode
Добавление пакета в экземпляр NuxtJS
Теперь нам нужно добавить пакет в наш экземпляр NuxtJS и позволить NuxtJS включить его в процесс сборки. Перейдите к файлу nuxt.config.js и добавьте следующее в свои buildModules.
Если вы используете более раннюю версию NuxtJS, вам необходимо включить ее в свои модули.
Теперь вам также нужно добавить файл CSS, желательно в каталог ресурсов, и назвать его main.css. после создания добавьте следующий компонент в свой nuxt.config.js.
Это загрузит стили CSS в файл main.css в наше приложение.
Добавление стилей CSS
Теперь внутри файла main.css мы собираемся добавить темы нашего приложения как для темного, так и для светлого режима.
Мой файл main.css содержит следующие стили.
Стиль корня представляет собой светлый режим цвета / темы для нашего проекта. Класс темного режима представляет темы темного режима, которые будут использоваться в случае переключения темного режима.
В зависимости от ваших цветовых предпочтений вы можете оформить его по-разному и подправить.
Создание кнопок переключения между светлым и темным режимами
В этом случае мы собираемся отобразить несколько SVG, чтобы представить выбор как темного, так и светлого режима. В этом случае у нас будут две кнопки, которые будут отображаться в зависимости от выбора пользователя.
Мы также собираемся использовать большую часть пакета @ nuxt / color-mode для идентификации и представления переключения как светлого, так и темного режима.
Вы можете увидеть, как мы используем пакет цветового режима, в методе toggleSwitch в приведенном ниже фрагменте.
Теперь, если пользователи нажимают кнопки, он будет переключаться между светлым и темным режимами. Также следует отметить, что я использовал tailwindCSS для дополнительного стиля и тематики.
Заключение
Добавление темного режима в ваше портфолио или проекты может быть потрясающим, и вы сможете узнать что-то новое прямо на ходу.
Спасибо, что нашли время и дочитали до конца эту статью.
