Radix UI + Next.js 浅色/深色模式切换

Question

我正在尝试为我的 Next 应用程序实现明暗模式切换。我正在使用 radix ui 组件库来进行样式设计。我有点难以弄清楚实现这一目标的逻辑。如果我必须在layout.tsx 文件中声明主题，如何将此功能添加到我的导航栏？

布局.tsx：

NavBar.tsx：

Answer 1

npm install next-themes

第 2 步：创建主题提供者

"use client"

import * as React from "react"
import { ThemeProvider } from "next-themes"

export function ThemeProvider({ children, ...props }) {
  return <ThemeProvider {...props}>{children}</ThemeProvider>
}

第 3 步：包裹根布局

import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }) {
  return (
    <>
      <html lang="en" suppressHydrationWarning>
        <head />
        <body>
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
          >
            {children}
          </ThemeProvider>
        </body>
      </html>
    </>
  )
}

第 4 步：添加模式切换

"use client"

import * as React from "react"
import { useTheme } from "next-themes"

export function NavBar() {

  const { theme, setTheme } = useTheme()
  const toggleMode = () => setTheme(theme == 'light' ? 'dark' : 'light')
  
  return (
    <>
    {/* Your code for the navbar */}
      <button onClick={toggleMode}> Toggle mode </button>
    </>
  )
}

Radix UI + Next.js 浅色/深色模式切换

问题描述投票：0回答：1

1个回答

最新问题

Radix UI + Next.js 浅色/深色模式切换

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1