MUI useColorScheme正确用法及Next.js主题切换系统模式处理咨询

当前实现的问题 #

你当前的实现存在两个关键问题：

1. getPalette 函数中，当 mode 为 'system' 时，会直接 fallback 到 darkPalette，这不符合「跟随系统主题」的预期——系统可能处于亮色模式，此时应该匹配 lightPalette。
2. 直接将包含 'system' 的 mode 传入 createTheme 的 mode 字段是错误的，MUI 的 createTheme 中 mode 仅接受 'light' 或 'dark'，'system' 不是合法值，会导致主题配置异常。

如何获取系统实际使用的模式 #

当 useColorScheme 返回的 mode 为 'system' 时，你可以通过以下两种方式获取系统当前的主题偏好：

• 使用 MUI 提供的 useMediaQuery 钩子（推荐）：

  import { useMediaQuery } from '@mui/material';
  
  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  // isDarkMode 为 true 表示系统当前是暗色模式，false 为亮色模式
  

• 直接使用浏览器原生 API（注意在 Next.js 中需确保在客户端环境执行）：

  const isDarkMode = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches;
  

正确的主题切换实现方式 #

结合你的需求，正确的实现应该让 useColorScheme 管理用户选择的模式（light/dark/system），再根据用户选择动态生成对应主题：

1. 先定义完整的亮色/暗色主题配置：

import { createTheme } from '@mui/material/styles';

const lightTheme = createTheme({
  colorSchemes: { light: true },
  palette: {
    mode: 'light',
    ...lightPalette, // 你的自定义亮色调色板
  },
});

const darkTheme = createTheme({
  colorSchemes: { dark: true },
  palette: {
    mode: 'dark',
    ...darkPalette, // 你的自定义暗色调色板
  },
});

2. 在组件中根据用户选择的模式，结合系统偏好生成当前主题：

import { useColorScheme, ThemeProvider } from '@mui/material/styles';
import { useMediaQuery } from '@mui/material';

function App() {
  const [mode, setMode] = useColorScheme();
  const systemIsDark = useMediaQuery('(prefers-color-scheme: dark)');
  
  // 确定实际使用的主题模式
  const actualMode = mode === 'system' ? (systemIsDark ? 'dark' : 'light') : mode;
  const currentTheme = actualMode === 'dark' ? darkTheme : lightTheme;

  return (
    <ThemeProvider theme={currentTheme}>
      {/* 你的应用内容 */}
      {/* 主题切换按钮示例 */}
      <button onClick={() => setMode(mode === 'light' ? 'dark' : mode === 'dark' ? 'system' : 'light')}>
        切换主题
      </button>
    </ThemeProvider>
  );
}

3. 可选优化：监听系统主题变化
   如果需要在用户选择 'system' 模式时，自动跟随系统主题切换，可以添加监听逻辑：

import { useEffect } from 'react';

// 在组件内添加
useEffect(() => {
  if (mode !== 'system') return;
  
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  const handleChange = () => {
    // useMediaQuery 会自动检测变化并触发组件重渲染，无需手动修改 mode
  };
  
  mediaQuery.addEventListener('change', handleChange);
  return () => mediaQuery.removeEventListener('change', handleChange);
}, [mode]);

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