如何强制React应用中Mantine始终使用深色主题

要让Mantine完全忽略浏览器的主题设置，只需要在<MantineProvider>上添加forceColorScheme属性并设为'dark'，同时确保主题配置里的colorScheme也设为'dark'即可。

具体代码示例：

import { MantineProvider } from '@mantine/core';

function App() {
  return (
    <MantineProvider
      theme={{ colorScheme: 'dark' }}
      forceColorScheme="dark"
    >
      {/* 你的应用内容 */}
    </MantineProvider>
  );
}

关键说明： #

• theme={{ colorScheme: 'dark' }}：定义应用的基础深色主题配置
• forceColorScheme="dark"：强制Mantine使用指定的配色方案，完全忽略系统主题变化和用户本地存储的主题偏好设置

如果你的项目中之前引入过ColorSchemeProvider用于主题切换，需要同步将其配置为强制深色，或者直接移除相关主题切换逻辑，避免产生配置冲突。

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