如何在Next.js的三个Shadcn管理面板中独立设置主色调？

完全可以为每个管理面板独立设置Shadcn的主色调，你考虑的上下文动态设置颜色是非常合适的方案。核心思路是利用Shadcn依赖的CSS变量机制，通过React上下文动态切换全局CSS变量的值，从而实现不同面板的主题隔离。

以下是具体实现步骤：

1. 定义主题颜色配置 #

先把三个面板的主色调统一整理成配置文件，比如app/config/themes.ts：

export const panelThemes = {
  panel1: {
    '50': '239 246 255',
    '100': '219 234 254',
    '200': '191 219 254',
    '300': '147 197 253',
    '400': '96 165 250',
    '500': '59 130 246',
    '600': '37 99 235',
    '700': '29 78 216',
    '800': '30 64 175',
    '900': '30 58 138',
  },
  panel2: {
    '50': '240 249 255',
    '100': '224 242 254',
    '200': '186 230 253',
    '300': '125 211 252',
    '400': '56 189 248',
    '500': '14 165 233',
    '600': '2 132 199',
    '700': '3 105 161',
    '800': '7 89 133',
    '900': '12 74 110',
  },
  panel3: {
    '50': '250 245 255',
    '100': '243 232 255',
    '200': '233 213 255',
    '300': '216 180 254',
    '400': '192 132 252',
    '500': '168 85 247',
    '600': '147 51 234',
    '700': '126 34 206',
    '800': '107 33 168',
    '900': '88 28 135',
  },
} satisfies Record<string, Record<string, string>>;

export type PanelThemeKey = keyof typeof panelThemes;

2. 创建主题上下文 #

在app/theme-context.tsx中实现主题上下文，用于管理当前面板的主题：

'use client';

import { createContext, useContext, useEffect, useState } from 'react';
import { panelThemes, PanelThemeKey } from './config/themes';

type ThemeContextType = {
  currentTheme: PanelThemeKey;
  setCurrentTheme: (theme: PanelThemeKey) => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({
  children,
  initialTheme,
}: {
  children: React.ReactNode;
  initialTheme: PanelThemeKey;
}) {
  const [currentTheme, setCurrentTheme] = useState<PanelThemeKey>(initialTheme);

  useEffect(() => {
    const themeColors = panelThemes[currentTheme];
    // 把主题色注入到全局CSS变量中
    Object.entries(themeColors).forEach(([key, value]) => {
      document.documentElement.style.setProperty(`--primary-${key}`, value);
    });
  }, [currentTheme]);

  return (
    <ThemeContext.Provider value={{ currentTheme, setCurrentTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

3. 配置Tailwind支持动态变量 #

确保你的tailwind.config.ts中，Shadcn的主色配置引用了这些CSS变量：

import type { Config } from 'tailwindcss';

const config: Config = {
  // ...其他配置
  theme: {
    extend: {
      colors: {
        primary: {
          50: 'rgb(var(--primary-50) / var(--tw-bg-opacity))',
          100: 'rgb(var(--primary-100) / var(--tw-bg-opacity))',
          200: 'rgb(var(--primary-200) / var(--tw-bg-opacity))',
          300: 'rgb(var(--primary-300) / var(--tw-bg-opacity))',
          400: 'rgb(var(--primary-400) / var(--tw-bg-opacity))',
          500: 'rgb(var(--primary-500) / var(--tw-bg-opacity))',
          600: 'rgb(var(--primary-600) / var(--tw-bg-opacity))',
          700: 'rgb(var(--primary-700) / var(--tw-bg-opacity))',
          800: 'rgb(var(--primary-800) / var(--tw-bg-opacity))',
          900: 'rgb(var(--primary-900) / var(--tw-bg-opacity))',
        },
      },
    },
  },
};

export default config;

4. 在面板中应用主题 #

方法一：为每个面板单独设置布局 #

比如在app/panel1/layout.tsx中：

import { ThemeProvider } from '../theme-context';

export default function Panel1Layout({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider initialTheme="panel1">
      {children}
    </ThemeProvider>
  );
}

同理为panel2和panel3创建对应的布局文件，分别传入panel2和panel3作为初始主题。

方法二：根据路由自动切换主题 #

如果你的面板是通过路由区分的（比如/panel1、/panel2），可以在根布局中根据路由动态设置初始主题：

'use client';

import { ThemeProvider } from './theme-context';
import { usePathname } from 'next/navigation';
import { PanelThemeKey } from './config/themes';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  
  const getInitialTheme = (): PanelThemeKey => {
    if (pathname.startsWith('/panel1')) return 'panel1';
    if (pathname.startsWith('/panel2')) return 'panel2';
    if (pathname.startsWith('/panel3')) return 'panel3';
    return 'panel1'; // 默认主题
  };

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

5. 验证效果 #

现在所有使用Shadcn主色的组件（比如按钮、输入框、卡片等），都会根据当前面板的主题自动切换颜色。如果需要手动切换主题（比如面板内的主题切换按钮），可以直接调用useTheme()的setCurrentTheme方法：

'use client';

import { Button } from '@/components/ui/button';
import { useTheme } from '../theme-context';

export default function ThemeSwitcher() {
  const { setCurrentTheme } = useTheme();
  return (
    <div className="flex gap-2">
      <Button onClick={() => setCurrentTheme('panel1')}>面板1主题</Button>
      <Button onClick={() => setCurrentTheme('panel2')}>面板2主题</Button>
      <Button onClick={() => setCurrentTheme('panel3')}>面板3主题</Button>
    </div>
  );
}

注意事项 #

• SSR兼容：如果使用Server Components，确保ThemeProvider只包裹Client Components，或者在根布局中使用'use client'指令。
• 初始主题匹配：确保服务器端渲染的初始主题和客户端一致，避免 hydration 不匹配问题。
• 颜色值格式：Shadcn默认使用RGB格式的变量值（比如239 246 255），所以主题配置中的颜色值要保持一致，不要带rgb()前缀。

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