如何在React/Redux项目中同时适配Tailwind与Mantine的暗黑模式？

不用同时手动修改两个值，我们可以通过联动Mantine的主题切换事件自动同步Tailwind的HTML类名，核心是只维护一处状态，让另一处自动跟随变化。结合你的React/Redux技术栈，推荐以下最优方案：

1. 基于Redux统一管理主题状态 #

把主题模式（亮色/暗黑）存在Redux Store中作为全局状态，让Mantine和Tailwind共享同一数据源，避免状态不一致。

步骤1：创建Redux Slice管理主题 #

// features/theme/themeSlice.js
import { createSlice } from '@reduxjs/toolkit';

// 从localStorage读取初始值，优先用户之前的选择
const initialState = {
  colorScheme: localStorage.getItem('colorScheme') || 'light',
};

const themeSlice = createSlice({
  name: 'theme',
  initialState,
  reducers: {
    toggleColorScheme: (state) => {
      state.colorScheme = state.colorScheme === 'light' ? 'dark' : 'light';
      // 同步到localStorage持久化
      localStorage.setItem('colorScheme', state.colorScheme);
    },
    setColorScheme: (state, action) => {
      state.colorScheme = action.payload;
      localStorage.setItem('colorScheme', action.payload);
    },
  },
});

export const { toggleColorScheme, setColorScheme } = themeSlice.actions;
export default themeSlice.reducer;

步骤2：绑定状态并自动同步类名 #

在根组件中，从Redux获取colorScheme传给MantineProvider，同时利用Mantine的onColorSchemeChange回调，自动修改HTML标签的类名（Tailwind需要的dark类）：

// App.jsx
import { useDispatch, useSelector } from 'react-redux';
import { MantineProvider, ColorSchemeProvider } from '@mantine/core';
import { toggleColorScheme, setColorScheme } from './features/theme/themeSlice';

function App() {
  const { colorScheme } = useSelector((state) => state.theme);
  const dispatch = useDispatch();

  // 同步Tailwind的HTML类名
  const handleColorSchemeChange = (newScheme) => {
    dispatch(setColorScheme(newScheme));
    const html = document.documentElement;
    newScheme === 'dark' ? html.classList.add('dark') : html.classList.remove('dark');
  };

  return (
    <ColorSchemeProvider
      colorScheme={colorScheme}
      onColorSchemeChange={handleColorSchemeChange}
    >
      <MantineProvider
        theme={{ colorScheme }}
        withGlobalStyles
        withNormalizeCSS
      >
        {/* 你的应用内容 */}
        <button onClick={() => dispatch(toggleColorScheme())}>
          切换主题
        </button>
      </MantineProvider>
    </ColorSchemeProvider>
  );
}

export default App;

2. 可选优化：让Tailwind复用Mantine的CSS变量 #

如果需要颜色风格完全统一，可以让Tailwind直接复用Mantine自动生成的CSS变量，无需单独维护两套颜色配置：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: 'var(--mantine-color-primary)',
        secondary: 'var(--mantine-color-secondary)',
        // 其他颜色同理映射
      },
    },
  },
};

核心优势 #

• 只维护一处状态源，彻底避免两处状态不一致的问题
• 切换逻辑完全封装，业务组件只需调用Redux的toggleColorScheme方法，无需关心底层实现
• 自动持久化用户选择，刷新页面后主题不会重置

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