Static Color Scheme by setting colorScheme on page Component

function MyPage() {
    return (<>...</>)
}

MyPage.colorScheme = "dark";

export default MyPage;
// Make sure you update _app.(jsx|tsx) file as well.

Next.js Example

Craft your next amazing library using

Harness the full potential of React 18 Server Components!
ColorScheme Preference Select theme
Select dark theme Select light theme

Apply themes locally using targetSelector

ColorScheme Preference Select theme
Select dark theme Select light theme

Pages Navigator ->

Pages with forced theme/colorScheme

Static Themed Page ->

Example for non dynamic page with forced theme. Uses Component.theme

Static Forced Color Scheme ->

Example for non dynamic page with forced color scheme - Component.colorScheme

Docs ->

Check out the official documentation for more information.

More Examples ->

Check out more examples on the official GitHub Repo. Feel free to suggest additional examples in the discussions section.

Star this repo ->

Star this repo for your new library! This also motivates us and helps us understand that community is interested in this work.

Fork Me on GitHub