首頁 >web前端 >css教學 >使用 CSS 變數在 Next.js 中應用深色模式

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

WBOY原創: 2024-08-10 20:37:02741瀏覽

在當今的 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>
  )
}

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

結論

使用 CSS 變數、Tailwind CSS 和 next-themes 在 Next.js 應用程式中實現暗模式提供了靈活且可維護的解決方案。以下是我們所取得成就的總結：

我們設定了 Tailwind CSS 以實現實用優先的樣式。
我們使用 Orea 顏色產生器為淺色和深色模式建立一致的調色板。
我們使用下一個主題實現了主題切換，允許在淺色和深色模式之間輕鬆切換。
我們使用 shadcn/ui 創建了一個精美的主題切換組件，增強了使用者體驗。

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

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

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

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

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

css define switch for while select Directory using Interface copy JS this transition ui Access

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：即使鍵盤打開，如何將元素固定在底部下一篇：即使鍵盤打開，如何將元素固定在底部

看更多