Actions

colorSchemeScript

The script that sets the page's color scheme before it paints, so a reload in dark mode never flashes light. It reads the choice ColorSchemeProvider keeps in localStorage, resolves system through prefers-color-scheme, and sets the .dark class and the color-scheme property on <html>. Put it in <head> as an inline script, with the same options as the provider, and add suppressHydrationWarning to <html>, whose class the script changes before React hydrates. It is plain text, so a Server Component can call it.

import { colorSchemeScript } from "@/lib/ouro/color-scheme-script";

Example

<html lang="en" suppressHydrationWarning>
  <head>
    <script dangerouslySetInnerHTML={{ __html: colorSchemeScript() }} />
  </head>
  <body>
    <ColorSchemeProvider>{children}</ColorSchemeProvider>
  </body>
</html>

Parameters

options: Type: ColorSchemeOptions; {}

Parameter	Type	Default
`options`	`ColorSchemeOptions`	`{}`

Returns

string

Source on GitHub This page as Markdown