使用 CSS 變數在 Next.js 中應用深色模式-css教學-PHP中文網

首頁

web前端

css教學

使用 CSS 變數在 Next.js 中應用深色模式

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 10, 2024 pm 08:37 PM

在當今的 Web 開發環境中，提供深色模式選項對於現代使用者介面幾乎至關重要。在本文中，我們將探索如何使用 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 顏色產生器。該工具有助於生成一組可以很好地協同工作的顏色，並且可以輕鬆適應不同的主題。

造訪 Orea 顏色產生器並選擇您的基底色。該工具提供了一個用戶友好的介面來創建和視覺化您的配色方案：

上圖顯示了Orea Color Generator介面，您可以：

使用顏色選擇器選擇中間顏色
看看產生的各種色調的顏色
在淺色和深色模式下查看主題預覽
複製 CSS 變數以便輕鬆整合到您的專案中

使用 Orea 顏色產生器產生調色板後，您將需要在專案中實現這些顏色。以下是如何在 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變數定義了原色的一系列色調，從淺色（—primary-50）到深色（—primary-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 的不透明度修改器套用不透明度的能力。

深色/淺色模式主題的下一個主題包

安裝後，我們需要設定基本主題變數。建立一個新的 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'] 選擇器將自動由下一個主題套用。

現在，讓我們在您的layout.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>
  )
}

登入後複製

此元件建立一個下拉式選單，其中包含在淺色、深色和系統主題之間切換的選項。該按鈕使用太陽和月亮圖標來直觀地表示當前主題。