CSS 변수를 사용하여 Next.js에 다크 모드 적용-CSS 튜토리얼-php.cn

CSS 변수를 사용하여 Next.js에 다크 모드 적용

WBOY

풀어 주다： 2024-08-10 20:37:02

원래의

593명이 탐색했습니다.

오늘날의 웹 개발 환경에서는 최신 사용자 인터페이스에 어두운 모드 옵션을 제공하는 것이 거의 필수가 되었습니다. 이 기사에서는 CSS 변수, Tailwind CSS, 몇 가지 유용한 도구 및 패키지를 사용하여 Next.js 프로젝트에서 강력한 다크 모드 솔루션을 구현하는 방법을 살펴보겠습니다.

유틸리티 클래스를 위한 Tailwind CSS

먼저 Next.js 프로젝트에서 Tailwind CSS를 설정해 보겠습니다. Tailwind는 스타일링에 대한 유틸리티 우선 접근 방식을 제공하므로 개발 프로세스 속도를 크게 높일 수 있습니다.

Tailwind CSS를 설치하려면 프로젝트 디렉터리에서 다음 명령을 실행하세요.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

로그인 후 복사

그런 다음 tailwind.config.js 파일을 구성하세요.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

로그인 후 복사

그런 다음 globals.css 파일을 구성합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

로그인 후 복사

색상 팔레트용 Orea 색상 생성기

Applying Dark Mode in Next.js using CSS Variables

밝은 모드와 어두운 모드 모두에 대해 조화로운 색상 팔레트를 만들기 위해 Orea Color Generator를 사용할 수 있습니다. 이 도구는 서로 잘 어울리고 다양한 테마에 쉽게 적용할 수 있는 색상 세트를 생성하는 데 도움이 됩니다.

Orea Color Generator를 방문하여 기본 색상을 선택하세요. 이 도구는 색 구성표를 생성하고 시각화할 수 있는 사용자 친화적인 인터페이스를 제공합니다.

위 이미지는 다음을 수행할 수 있는 Orea Color Generator 인터페이스를 보여줍니다.

색상 선택기를 사용하여 중간 색상을 선택하세요
다양한 색조로 생성된 색상 보기
밝은 모드와 어두운 모드 모두에서 테마 미리 보기
프로젝트에 쉽게 통합할 수 있도록 CSS 변수 복사

Orea Color Generator로 색상 팔레트를 생성한 후 프로젝트에 이러한 색상을 구현하고 싶을 것입니다. 다음은 CSS에서 색상 변수를 정의하는 방법에 대한 예입니다.

:root {
  /* Initially TailwindCSS bg-opacity */
  --tw-bg-opacity: 1;

  --primary-50: 242, 242, 242;
  --primary-100: 230, 230, 230;
  --primary-200: 204, 204, 204;
  --primary-300: 179, 179, 179;
  --primary-400: 153, 153, 153;
  --primary-500: 128, 128, 128;
  --primary-600: 102, 102, 102;
  --primary-700: 77, 77, 77;
  --primary-800: 51, 51, 51;
  --primary-900: 26, 26, 26;
  --primary-950: 13, 13, 13;
}

로그인 후 복사

이 CSS 변수는 밝은 색상( — 기본-50)부터 어두운 색상( — 기본-950)까지 기본 색상의 음영 범위를 정의합니다. 이러한 변수를 사용하면 애플리케이션 전체에 일관된 색상을 쉽게 적용하고 밝은 모드와 어두운 모드 간에 전환할 수 있습니다.

이제 색상 변수가 정의되었으므로 이를 Tailwind CSS 구성에 통합해 보겠습니다.

module.exports = {
  // ... other config
  theme: {
    extend: {
      colors: {
        primary: {
          '50': 'rgba(var(--primary-50), var(--tw-bg-opacity))',
          '100': 'rgba(var(--primary-100), var(--tw-bg-opacity))',
          '200': 'rgba(var(--primary-200), var(--tw-bg-opacity))',
          '300': 'rgba(var(--primary-300), var(--tw-bg-opacity))',
          '400': 'rgba(var(--primary-400), var(--tw-bg-opacity))',
          '500': 'rgba(var(--primary-500), var(--tw-bg-opacity))',
          '600': 'rgba(var(--primary-600), var(--tw-bg-opacity))',
          '700': 'rgba(var(--primary-700), var(--tw-bg-opacity))',
          '800': 'rgba(var(--primary-800), var(--tw-bg-opacity))',
          '900': 'rgba(var(--primary-900), var(--tw-bg-opacity))',
          '950': 'rgba(var(--primary-950), var(--tw-bg-opacity))',
        },
      },
    },
  },
}

로그인 후 복사

이 구성을 사용하면 Tailwind의 불투명도 수정자를 사용하여 불투명도를 적용하는 기능을 계속 유지하면서 bg-primary-500 또는 text-primary-200과 같은 Tailwind 클래스에서 이러한 색상을 사용할 수 있습니다.

dark/light 모드 테마를 위한 next-themes 패키지

설치 후 기본 테마 변수를 설정해야 합니다. 새 CSS 파일(예: globals.css)을 만들거나 기존 파일에 추가하세요.

// app/layout.jsx
:root {
  /* Add your light mode colors */
  --tw-bg-opacity: 1;

  --primary-50: 242, 242, 242;
  --primary-100: 230, 230, 230;
  --primary-200: 204, 204, 204;
  --primary-300: 179, 179, 179;
}

[data-theme='dark'] {

/* Add your dark mode colors */
  --primary-50: 13, 13, 13;
  --primary-100: 26, 26, 26;
  --primary-200: 51, 51, 51;
  --primary-300: 77, 77, 77;
}

로그인 후 복사

이 CSS는 밝은 테마와 어두운 테마에 대한 기본 색상 변수를 정의합니다. [data-theme='dark'] 선택기는 다크 모드가 활성화되면 다음 테마에 의해 자동으로 적용됩니다.

이제 레이아웃.tsx 파일에 ThemeProvider를 구현해 보겠습니다.

// app/layout.jsx

"use client";

import { ThemeProvider } from 'next-themes'

export default function Layout({ children }) {
  return (
    <html suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

로그인 후 복사

이제 구성 요소에서 useTheme 후크를 사용하여 현재 테마에 액세스하고 변경할 수 있습니다.

"use client";

import { useTheme } from 'next-themes'

const ThemeChanger = () => {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}

export default ThemeChanger

로그인 후 복사

이 설정을 사용하면 밝은 모드와 어두운 모드 사이를 원활하게 전환할 수 있으며 페이지를 다시 로드해도 테마가 유지됩니다.

shadcn/ui를 사용한 테마 토글 드롭다운

보다 세련된 UI를 위해 shadcn/ui의 드롭다운 구성 요소를 사용하여 테마 토글을 만들 수 있습니다. 먼저 필요한 구성 요소를 설치합니다.

npx shadcn-ui@latest add dropdown-menu

로그인 후 복사

이제 테마 토글을 구현해 보겠습니다.

import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Sun, Moon } from "lucide-react"

export function ThemeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

로그인 후 복사

이 구성요소는 밝은 테마, 어두운 테마, 시스템 테마 간 전환 옵션이 포함된 드롭다운 메뉴를 생성합니다. 버튼은 해와 달 아이콘을 사용하여 현재 테마를 시각적으로 나타냅니다.