Skip to content
Prev Previous commit
Next Next commit
update docs
  • Loading branch information
siriwatknp committed Nov 18, 2024
commit a850b0f8b13df184cad45d32dd097e18b8947ef5
13 changes: 13 additions & 0 deletions docs/data/material/customization/dark-mode/dark-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,19 @@ To instantly switch between color schemes with no transition, apply the `disable
</ThemeProvider>
```

## Disable rerendering

By default, the `ThemeProvider` rerenders when the theme contains light **and** dark color schemes to prevent SSR hydration mismatches. To disable this behavior, apply the `disableRerender` prop as `true` to the `ThemeProvider` component:

```jsx
<ThemeProvider theme={theme} disableRerender>
```

This prop is useful if you are building:

- A client-only application, such as a single-page application (SPA). This prop will optimize the performance and prevent the dark mode flickering when users refresh the page.
- A server-rendered application with [Suspense](https://react.dev/reference/react/Suspense). However, you must ensure that the server render output matches the initial render output on the client.

## Setting the default mode

When `colorSchemes` is provided, the default mode is `system`, which means the app uses the system preference when users first visit the site.
Expand Down