Skip to content

Commit

Permalink
run prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp committed Jun 9, 2024
1 parent 85d0460 commit 8b7e907
Showing 1 changed file with 5 additions and 4 deletions.
9 changes: 5 additions & 4 deletions docs/data/joy/customization/dark-mode/dark-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,19 +152,20 @@ export default class MyDocument extends Document {
To use the Joy UI API with a Next.js project with the App Router, create a separate [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) to utilize the [`getInitColorSchemeScript`](https://mui.com/joy-ui/main-features/dark-mode-optimization/#the-solution-css-variables) function:

```jsx title="colorInit.js"
"use client";
'use client';

import { getInitColorSchemeScript } from "@mui/joy/styles";
import { getInitColorSchemeScript } from '@mui/joy/styles';

export default function ColorInit() {
return <>{getInitColorSchemeScript()}</>;
}
```

Now, you can use the it in your [`app/layout.js`](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts) file in order to prevent flickering:

```jsx title="layout.js"
import ColorInit from "./colorInit";
import { CssBaseline, CssVarsProvider } from "@mui/joy";
import ColorInit from './colorInit';
import { CssBaseline, CssVarsProvider } from '@mui/joy';

export default function RootLayout({ children }) {
return (
Expand Down

0 comments on commit 8b7e907

Please sign in to comment.