使用 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中文网其他相关文章！