如何在Mantine UI中为浅色/深色模式修改页面背景色

要实现明暗模式下不同的页面背景色，你可以通过扩展Mantine主题的colors配置，再将自定义颜色绑定到全局样式或组件上，具体步骤如下：

1. 定义明暗模式的背景色 #

首先在createTheme中扩展colors对象，新增light和dark两个颜色组，分别设置body属性对应各自模式的背景色：

const theme = createTheme({
  colors: {
    // 浅色模式颜色配置
    light: {
      body: '#ffffff', // 浅色模式页面背景色
      // 可在此添加其他浅色模式自定义颜色
    },
    // 深色模式颜色配置
    dark: {
      body: '#000000', // 深色模式页面背景色
      // 可在此添加其他深色模式自定义颜色
    },
  },
});

2. 将自定义颜色应用到全局页面 #

光定义颜色还不够，需要把这个颜色设置为页面的背景色，有两种常用方式：

方式一：通过全局样式覆盖 #

利用主题的styles配置，直接给全局body标签设置背景色，这样整个页面都会生效：

const theme = createTheme({
  colors: {
    light: {
      body: '#ffffff',
    },
    dark: {
      body: '#000000',
    },
  },
  styles: {
    body: (theme) => ({
      backgroundColor: theme.colors[theme.colorScheme].body,
      margin: 0,
      padding: 0,
      minHeight: '100vh', // 确保背景色铺满整个视口高度
    }),
  },
});

方式二：通过组件默认属性配置 #

如果你使用Mantine的Body或AppShell等根组件，可以在主题的defaultProps里设置它们的背景色，动态匹配当前颜色模式：

const theme = createTheme({
  colors: {
    light: {
      body: '#ffffff',
    },
    dark: {
      body: '#000000',
    },
  },
  defaultProps: {
    Body: {
      bg: (theme) => theme.colors[theme.colorScheme].body,
    },
  },
});

之后在应用中用Body组件包裹所有内容即可：

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

function AppContent() {
  return (
    <Body>
      {/* 你的页面内容 */}
    </Body>
  );
}

3. 确保颜色模式切换生效（可选） #

如果需要支持明暗模式切换，要确保应用包裹在ColorSchemeProvider中，并且主题的colorScheme属性与当前模式同步：

import { MantineProvider, createTheme, ColorSchemeProvider } from '@mantine/core';
import { useState } from 'react';

function App() {
  const [colorScheme, setColorScheme] = useState('light');
  const toggleColorScheme = () => setColorScheme(prev => prev === 'light' ? 'dark' : 'light');

  const theme = createTheme({
    colors: {
      light: { body: '#ffffff' },
      dark: { body: '#000000' },
    },
    styles: {
      body: (theme) => ({
        backgroundColor: theme.colors[theme.colorScheme].body,
        minHeight: '100vh',
      }),
    },
    colorScheme,
  });

  return (
    <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
      <MantineProvider theme={theme}>
        {/* 你的应用内容，比如可以加个切换按钮 */}
        <button onClick={toggleColorScheme}>切换明暗模式</button>
      </MantineProvider>
    </ColorSchemeProvider>
  );
}

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