next.js - What is the proper way of using useColorScheme of MUI? - Stack Overflow

admin管理员组

文章数量:1279188

I'm using MUI with Next.js. My project needs support for both dark and light themes with a custom color palette.

To switch themes, I use useColorScheme from MUI. Here’s how I set the theme:

const lightPalette = ...
const darkPalette = ...
const getPalette = (mode: 'light' | 'dark' | 'system') => ({
  mode,
  ...(mode === 'light'? lightPalette : darkPalette),
})

And to apply the theme,

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

...

const [mode, setMode] = useColorScheme()
const theme = createTheme({
  colorSchemes: { light: true, dark: true },
  ...getPalette(mode),
})

...

<ThemeProvider theme={theme} >
  ...
</ThemeProvider>

The type of mode is 'light', 'dark', or 'system'. When the mode is set to 'system', how do I determine which mode the system is using? Is this the correct way to implement theme switching with Next.js and MUI?

本文标签： nextjsWhat is the proper way of using useColorScheme of MUIStack Overflow