如何通过点击按钮在Next.js中切换daisyUI主题？

daisyUI依赖<html>标签的data-theme属性切换主题，但Next.js的Custom Document仅能设置服务端渲染时的初始主题，无法实现客户端动态切换。以下是几种可行的实现方案：

方案1：直接操作DOM实现快速切换 #

在客户端组件中，通过原生DOM API直接修改data-theme属性，这是最简单的方式：

// 主题切换函数
const switchTheme = (theme) => {
  document.documentElement.setAttribute('data-theme', theme);
  // 可选：将主题保存到localStorage，实现刷新后保留主题
  localStorage.setItem('activeTheme', theme);
};

// 使用示例
<button onClick={() => switchTheme('cupcake')}>切换到Cupcake主题</button>
<button onClick={() => switchTheme('dark')}>切换到Dark主题</button>

方案2：结合React状态与持久化存储 #

用React状态管理当前主题，配合useEffect初始化时读取本地存储的主题，确保页面刷新后主题不会重置：

'use client';
import { useState, useEffect } from 'react';

export default function ThemeSwitcher() {
  const [currentTheme, setCurrentTheme] = useState('light');

  useEffect(() => {
    // 初始化时加载本地存储的主题，无存储则用默认值
    const savedTheme = localStorage.getItem('activeTheme') || 'light';
    setCurrentTheme(savedTheme);
    document.documentElement.setAttribute('data-theme', savedTheme);
  }, []);

  const changeTheme = (theme) => {
    setCurrentTheme(theme);
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('activeTheme', theme);
  };

  return (
    <div className="theme-switcher">
      <button onClick={() => changeTheme('cupcake')}>Cupcake</button>
      <button onClick={() => changeTheme('retro')}>Retro</button>
      <button onClick={() => changeTheme('forest')}>Forest</button>
    </div>
  );
}

方案3：App Router全局初始化主题 #

如果使用Next.js App Router，可以在根Layout的客户端逻辑中完成主题初始化，确保页面加载时就应用正确的主题：

// app/layout.jsx
'use client';
import { useEffect } from 'react';

export default function RootLayout({ children }) {
  useEffect(() => {
    const savedTheme = localStorage.getItem('activeTheme') || 'cupcake';
    document.documentElement.setAttribute('data-theme', savedTheme);
  }, []);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

之后可以在任意客户端组件中使用方案1或2的切换逻辑。

注意：所有动态主题操作必须在客户端组件中执行（添加'use client'指令），服务端组件无法直接操作DOM。

内容的提问来源于stack exchange，提问作者Mahesh Ghamaand