В наши дни Darkmode набирает обороты и внедряется почти повсюду в сети и в приложениях, поэтому я подумал о том, чтобы реализовать его в одном из моих побочных проектов tvflix.co v2, который создается с помощью tailwind и nuxt. Темный режим - хороший опыт для пользователей, которые посещают ваши веб-страницы, и многие пользователи просили о нем, и его было немного сложно создать ранее, мы сделаем его простым и модульным способом.

Сегодня мы сделаем небольшую веб-страницу и реализуем темный режим с помощью замечательных Tailwindcss и Nuxtjs. Я немного о них объясню. Вы можете пропустить эту часть, если уже знаете о них.

TL; DR

Мы будем использовать модуль nuxt-color-mode и плагин tailwindcss-dark-mode, который даст нам доступ к селектору dark:. Вот репозиторий github, если вы просто хотите проверить код напрямую, и вы можете увидеть живую демонстрацию здесь.

Что такое попутный ветер?

В документации говорится:

Tailwind CSS - это настраиваемая низкоуровневая структура CSS, которая дает вам все строительные блоки, необходимые для создания нестандартных дизайнов без каких-либо раздражающих самоуверенных стилей, за которые вам придется бороться.

Это означает, что tailwindcss не будет предоставлять вам классы для самоуверенных разделов интерфейса, таких как карточки, аккордеоны, панели навигации и т. Д., Вместо этого вы их сами, а tailwind предоставит классы на детальном уровне, что сделает ваш код модульным, и у вас будет больше контроля над рамка и конец ui.

Что такое Nuxt.js?

Nuxt - это фреймворк для Vue.js, который будет обрабатывать множество практических вариантов использования, таких как маршрутизация, вложенная маршрутизация, предварительная рендеринг, SSR из коробки, при этом vue придется вручную настраивать все это индивидуально и в конечном итоге получить много шаблонов код.

1. Создайте проект nuxt, запустив npx create-nuxt-app darkmode в своем терминале, при появлении запроса убедитесь, что вы выбрали Tailwind CSS UI framework из опций, что сэкономит много времени, если вы не хотите добавить модуль tailwindcss. отдельно. Я также выбрал axios для вызова API.

2. Дайте ему завершить инициализацию проекта, после чего откройте проект в vscode или любом другом редакторе, который вы предпочитаете. Подсказка: не закрывайте терминал, просто введите code darkmode/, это откроет проект в vscode.

3. Для работы нам потребуются модуль nuxt-color-mode и плагин tailwindcss-dark-mode, давайте установим их, выполнив команду npm i tailwindcss-dark-mode @nuxtjs/color-mode --save-dev

Давайте создадим небольшую веб-страницу, которая отслеживает случаи Covid 19 в Индии. Я буду использовать api от Covid19India, вирусного трекера Corona, управляемого сообществом, который имеет краудсорсинговые данные, благодарность команде и людям, которые помогают. Вот конечная точка api https://api.covid19india.org/data.json.

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

Это моя страница в светлом режиме.

Теперь настройте плагины, которые мы установили ранее. Вам нужно добавить модуль nuxt цветового режима в свой nuxt.config.js внутри объекта buildModules.

{
  buildModules: [
    '@nuxtjs/color-mode'
  ]
}

Теперь откройте файл tailwind.config.js и добавьте приведенную ниже конфигурацию.

Отлично, у нас есть настройка темного режима на сайте.

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

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

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

Точно так же у вас также будет доступ к dark-hover dark-focus dark-active и некоторым другим селекторам.

Давайте добавим на наш сайт кнопку переключения темного режима. Модуль цветового режима nuxt дает нам доступ к вспомогательной функции $colorMode глобально в нашем проекте, мы можем установить для нее значение предпочтения либо dark, либо light$colorMode.preference = 'dark' (или что угодно, если мы хотим, скажем, режим сепии). Я написал небольшой метод переключения между светлым и темным режимами для сайта.

Небольшая заметка перед созданием производственной сборки. Nuxt также включает purgeCSS, когда мы установили фреймворк TailwindCSS, который автоматически удаляет неиспользуемые CSS, поскольку мы добавляем темные классы селекторов вручную, нам нужно внести их в белый список в нашей конфигурации nuxt, как показано ниже.

purgeCSS: {    
  whitelist: ['dark-mode'],  
}

Вот как сайт выглядит в темном режиме

Вы можете увидеть демо окончательного веб-сайта здесь, вы можете найти исходный код здесь, просто клонируйте его, выполните npm install и запустите проект с npm run dev.

Этот способ добавления темного режима в tailwindcss не ограничивается только Nuxt, вы можете добавить его практически в любой фреймворк, такой как React, jQuery или vanilla js, все, что вам нужно сделать, это добавить класс adark-mode в тег html, плагин tailwind примет забота обо всем остальном.