찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 변수를 사용하여 Next.js에 다크 모드 적용

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

WBOY
WBOY원래의
2024-08-10 20:37:02709검색

오늘날의 웹 개발 환경에서는 최신 사용자 인터페이스에 어두운 모드 옵션을 제공하는 것이 거의 필수가 되었습니다. 이 기사에서는 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>
  )
}

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

결론

CSS 변수, Tailwind CSS 및 next-themes를 사용하여 Next.js 애플리케이션에 다크 모드를 구현하면 유연하고 유지 관리가 가능한 솔루션이 제공됩니다. 우리가 달성한 내용을 요약하면 다음과 같습니다.

  1. 유틸리티 우선 스타일을 위해 Tailwind CSS를 설정했습니다.
  2. 우리는 Orea Color Generator를 사용하여 밝은 모드와 어두운 모드 모두에 대해 일관된 색상 팔레트를 만들었습니다.
  3. 다음 테마를 사용한 테마 전환을 구현하여 밝은 모드와 어두운 모드 사이를 쉽게 전환할 수 있습니다.
  4. shadcn/ui를 사용하여 세련된 테마 토글 구성 요소를 만들어 사용자 경험을 향상했습니다.

CSS 변수를 활용하여 유지 관리 및 확장이 쉬운 시스템을 만들었습니다. next-themes를 사용하면 테마 기본 설정이 유지되어 사용자에게 원활한 경험을 제공할 수 있습니다.

어두운 모드를 구현할 때 다음 핵심 사항을 기억하세요.

  • 항상 접근성을 고려하고 두 테마 모두 충분한 대비를 확보하세요.
  • 밝은 모드와 어두운 모드 모두에서 애플리케이션을 철저히 테스트하세요.
  • 사용자의 시스템 기본 설정을 존중하려면 선호 색상 구성표 미디어 쿼리를 사용하는 것이 좋습니다.
  • 모든 구성 요소와 페이지에서 테마를 일관되게 유지하세요.

이 설정을 사용하면 Next.js 애플리케이션에 현대적이고 사용자 친화적인 다크 모드 옵션을 제공할 준비가 잘 된 것입니다. 즐거운 코딩하세요!

위 내용은 CSS 변수를 사용하여 Next.js에 다크 모드 적용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css define switch for while select Directory using Interface copy JS this transition ui Access
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：키보드가 열려 있는 경우에도 요소를 하단에 고정된 상태로 유지하는 방법다음 기사：키보드가 열려 있는 경우에도 요소를 하단에 고정된 상태로 유지하는 방법

관련 기사

더보기