使用 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>
  )
}

登录后复制

该组件创建一个下拉菜单，其中包含在浅色、深色和系统主题之间切换的选项。该按钮使用太阳和月亮图标来直观地表示当前主题。