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

在當今的 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 顏色產生器

要為淺色和深色模式建立和諧的調色板，我們可以使用 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 (
    
      

{children} ) }

在您的組件中，您現在可以使用 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"></sun>
          <moon classname="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></moon>
          <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 顏色產生器為淺色和深色模式建立一致的調色板。
3. 我們使用下一個主題實現了主題切換，允許在淺色和深色模式之間輕鬆切換。
4. 我們使用 shadcn/ui 創建了一個精美的主題切換組件，增強了使用者體驗。

透過利用 CSS 變量，我們創建了一個易於維護和擴展的系統。使用下一個主題可確保我們的主題偏好得以保留，為使用者提供無縫體驗。

實作深色模式時請記住以下要點：

• 始終考慮可訪問性並確保兩個主題有足夠的對比。
• 在淺色和深色模式下徹底測試您的應用程式。
• 考慮使用偏好顏色方案媒體查詢來尊重使用者的系統偏好。
• 所有元件和頁面的主題保持一致。

透過此設置，您就可以在 Next.js 應用程式中提供現代的、用戶友好的深色模式選項。快樂編碼！

以上是使用 CSS 變數在 Next.js 中應用深色模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！