Как добавить темный режим в приложение Next.js с помощью Tailwind CSS.

Привет, В сегодняшней статье я расскажу вам, как добавить темный режим в приложение Next.js с помощью Tailwind CSS.

Содержание

Что такое Next.js?
Что такое Tailwind CSS?
Вот как вы можете добавить темный режим в ваше приложение Next.js с помощью Tailwind CSS.
Необходимые условия:
1. Настройка нового проекта Next.js.
2. Добавление Tailwind CSS
3. Добавление темного режима
Отредактируйте _app.js.
4. Создание компонента переключения темы.
Позвольте мне разложить это для вас
Как добавить полезные классы tailwind для темного режима.
Заключительные шаги

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

Next.js — это фронтенд-фреймворк с открытым исходным кодом, основанный на React, с такими функциями, как SSR (Server Side Rendering) и SSG (Static Site Generation). Next.js также поставляется с SEO-оптимизацией прямо из коробки, так что вам не придется делать это самостоятельно с нуля.

Что такое Tailwind CSS?

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

Вот как вы можете добавить темный режим в ваше приложение Next.js с помощью Tailwind CSS.

Необходимые условия:

Убедитесь, что на вашей локальной машине установлен Nodejs.

1. Настройка нового проекта Next.js.

Вы можете пропустить этот шаг, если у вас уже есть один проект.
Запустите npx create-next-app nextjs-tailwind в терминале, в результате чего у вас появится новый проект Next.js со следующими файлами. Вы можете использовать любое название, которое вам больше нравится, вместо nextjs-tailwind.

Выполните cd nextjs-tailwind для смены директории и запустите npm run dev или yarn dev, если вы используете yarn для запуска локального сервера разработки.

Перейдите на http://localhost:3000, где вы увидите следующую домашнюю страницу Next.js по умолчанию.

2. Добавление Tailwind CSS

Запустите npm install -D tailwindcss postcss autoprefixer, Это установит Tailwind CSS и все необходимые зависимости.
Затем запустите npx tailwindcss init -p, Это создаст файлы tailwind.config.js и postcss.config.js.
Откройте tailwind.config.js и внесите следующие изменения в код.
```
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
Это позволит Tailwind CSS узнать, в каких файлах или папках он должен быть применен.
Теперь откройте styles/globals.css и добавьте следующие директивы tailwind.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Запустите сервер разработки, выполнив npm run dev.

Внесите следующие изменения в ваш pages/index.js, чтобы проверить, работает ли Tailwind CSS.

export default function Home() {
return (
<div className="pt-6 mt-28">
  <div className="flex justify-center items-center flex-col ">
    <div className="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md mt-10">
      <a href="#">
        <img
          className="rounded-t-lg "
          src="https://source.unsplash.com/random/1920x1080/?laptop"
          alt=""
        />
      </a>
      <div className="p-5">
        <a href="#">
          <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">
            Laptops that you can't afford even in 2022.
          </h5>
        </a>
        <p className="mb-3 font-normal text-gray-700">
          Lorem ipsum dolor sit amet. Cum laudantium laborum ut saepe
          facilis aut rerum corporis qui debitis voluptas. Rerum dolores aut
          voluptas galisum aut iure repellendus.
        </p>
        <a
          href="#"
          className="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
        >
          Read more
          <svg
            className="ml-2 -mr-1 w-4 h-4"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
              clipRule="evenodd"
            ></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>
);
}

После этого у вас должна появиться карточка с изображением и текстом.

Если вы используете VS CODE, вы можете использовать Tailwind CSS IntelliSense для лучшего опыта разработки.

3. Добавление темного режима

Чтобы добавить темный режим, нам нужно установить несколько вещей.

next-themes, Этот пакет обеспечивает легкую реализацию тем в Next.js, подробнее об этом вы можете узнать здесь.
Этот пакет необязателен, вы можете использовать текст или SVGs напрямую, если хотите, но я установлю @heroicons/react, Это библиотека иконок, которую я буду использовать для создания кнопки переключения тем.

Выполните следующую команду для установки вышеуказанных пакетов.

npm install @heroicons/react next-themes

Войти в полноэкранный режим Выйдите из полноэкранного режима

Отредактируйте `_app.js`.

Оберните все приложение с помощью ThemeProvider, чтобы использовать next-themes.

import '../styles/globals.css';
import { ThemeProvider } from 'next-themes';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider enableSystem={true} attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Вход в полноэкранный режим Выйдите из полноэкранного режима

Затем перейдите в tailwind.config.js и добавьте darkMode: 'class' после массива содержимого.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
};

Вход в полноэкранный режим Выход из полноэкранного режима

Примечание:

Технически вы можете жестко закодировать darkMode в tailwind.config.js и в атрибуте ThemeProvider, но поскольку мы хотим, чтобы у него было состояние, я использую класс. Он будет обновлять HTML head и tailwind с текущей темой, используя контекст ThemeProvider.

4. Создание компонента переключения темы.

Создайте папку src в корневом каталоге проекта и внутри нее создайте файл с именем ThemeToggler.js, добавьте следующий код.

import { useTheme } from 'next-themes';
import { useState, useEffect } from 'react';
import { MoonIcon, SunIcon } from '@heroicons/react/outline';

const ThemeToggler = () => {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return (
    <button
      className="w-8 h-8 bg-blue-100 rounded-lg dark:bg-slate-800 flex items-center justify-center hover:ring-2 ring-blue-400 transition-all duration-300 focus:outline-none"
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      aria-label="Toggle Dark Mode"
    >
      {theme === 'light' ? (
        <MoonIcon className="text-blue-500 w-5 h-5" />
      ) : (
        <SunIcon className="text-blue-400 w-5 h-5" />
      )}
    </button>
  );
};

export default ThemeToggler;

Вход в полноэкранный режим Выйти из полноэкранного режима

Позвольте мне разложить это для вас

Я использую хук useTheme из next-themes, который предоставляет две вещи: theme, который является просто строкой, представляющей текущую тему, и setTheme, который является методом для изменения текущей темы. Это похоже на хук useState.
Так как наш компонент сначала отображается на сервере, у нас возникает проблема несоответствия гидратации, поэтому, чтобы решить эту проблему, я проверяю, установлен ли компонент на стороне клиента, используя хук React useEffect.
Напоследок я использую иконки солнца и луны для обозначения действий с помощью простого троичного оператора JSX.

Как добавить полезные классы tailwind для темного режима.

Способ работы темного режима tailwind CSS похож на функцию hover. Как только вы решили, как вы хотите, чтобы элемент выглядел в темном режиме, вы можете просто добавить dark: перед любыми классами утилит, которые вы хотите активировать только в темном режиме.

Пример:

<p className="text-slate-800 dark:text-slate-300"
>
This is some text.
</p>

Войти в полноэкранный режим Выход из полноэкранного режима

поэтому цвет текста будет slate-800 в светлом режиме и slate-300 в темном.

Заключительные шаги

Теперь добавим ThemeToggler и несколько классов для темного режима на нашу домашнюю страницу. Откройте pages/index.js и добавьте следующий код.

import ThemeToggler from '../src/ThemeToggler';

export default function Home() {
  return (
    <div className="pt-6 mt-28">
      <div className="flex justify-center items-center flex-col ">
        <ThemeToggler />
        <div className="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 mt-10 transition duration-300">
          <a href="#">
            <img
              className="rounded-t-lg "
              src="https://source.unsplash.com/random/1920x1080/?laptop"
              alt=""
            />
          </a>
          <div className="p-5">
            <a href="#">
              <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                Laptops that you can't afford even in 2022.
              </h5>
            </a>
            <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
              Lorem ipsum dolor sit amet. Cum laudantium laborum ut saepe
              facilis aut rerum corporis qui debitis voluptas. Rerum dolores aut
              voluptas galisum aut iure repellendus.
            </p>
            <a
              href="#"
              className="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            >
              Read more
              <svg
                className="ml-2 -mr-1 w-4 h-4"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                  clipRule="evenodd"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}