如何在Next.js中为FullCalendar实现明暗主题切换

下面是几个适配Tailwind CSS的可行方案，无需引入Bootstrap 5：

方案1：自定义Tailwind变体+全局模式类 #

通过给根元素动态添加模式类，结合Tailwind自定义变体来覆盖FullCalendar样式：

1. 在tailwind.config.js中注册对应你模式的自定义变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [
    ({ addVariant }) => {
      addVariant('app-mode-dark', '.app-mode-dark &');
      addVariant('app-mode-light', '.app-mode-light &');
    }
  ],
}

2. 在根组件（如App.jsx）中根据模式变量动态添加全局类：

function App() {
  const isDarkMode = useAppMode(); // 替换为你的模式变量获取逻辑
  return (
    <div className={isDarkMode ? "app-mode-dark" : "app-mode-light"}>
      <FullCalendar />
    </div>
  );
}

3. 在全局CSS文件中用自定义变体覆盖FullCalendar样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 覆盖日历工具栏样式 */
.fc-header-toolbar {
  @apply app-mode-dark:bg-gray-800 app-mode-light:bg-gray-100;
}

/* 覆盖日期单元格边框 */
.fc-daygrid-day-frame {
  @apply app-mode-dark:border-gray-700 app-mode-light:border-gray-200;
}

方案2：CSS变量+Tailwind主题映射 #

通过CSS变量关联模式，再映射到Tailwind主题实现动态样式：

1. 在全局CSS中定义模式关联的变量：

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --fc-bg: #f3f4f6;
  --fc-text: #111827;
  --fc-border: #e5e7eb;
}

.app-mode-dark {
  --fc-bg: #1f2937;
  --fc-text: #f9fafb;
  --fc-border: #374151;
}

2. 在tailwind.config.js中把变量映射为自定义主题色：

module.exports = {
  theme: {
    extend: {
      colors: {
        fc: {
          bg: 'var(--fc-bg)',
          text: 'var(--fc-text)',
          border: 'var(--fc-border)'
        }
      }
    }
  }
}

3. 同样给根元素添加模式类，然后在全局CSS中用自定义Tailwind类覆盖：

.fc-header-toolbar {
  @apply bg-fc-bg text-fc-text;
}

.fc-daygrid-day {
  @apply border-fc-border;
}

方案3：FullCalendar内置回调（细粒度控制） #

如果只需要给特定事件或日期单元格加样式，用FullCalendar提供的回调函数：

<FullCalendar
  events={yourEventList}
  // 给事件添加条件样式
  eventClassNames={() => {
    return isDarkMode ? "bg-blue-900 text-white" : "bg-blue-500 text-white";
  }}
  // 给日期单元格添加条件样式
  dayCellClassNames={() => {
    return isDarkMode ? "hover:bg-gray-700" : "hover:bg-gray-100";
  }}
/>

关键注意事项 #

• 若样式不生效，可通过提升选择器优先级解决（比如#root .fc-header-toolbar），尽量避免用!important
• 开启Tailwind JIT模式时，需在safelist中保留FullCalendar相关类，防止被PurgeCSS移除：

module.exports = {
  safelist: ['fc-header-toolbar', 'fc-daygrid-day-frame'] // 按需添加其他类
}

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